CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Legend
Legend

Reputation: 116800

How to change the font-size uniformly?

If I have the following HTML:

<div class="div1">
   <div class="div2">
   </div>
   <div class="div3">
   </div>
</div>

div2 and div3 have their own CSS with font-sizes etc. defined. Is there a way I can reduce the font-size of div1 uniformly? That is, take the font size defined in div2 and div3 and reduce them by say 2px? This is similar to how you do Select All -> Ctrl + Shift + < to reduce the size of the selected text by 1 point in word processing software. Any suggestions?

Upvotes: 3

Views: 1278

Answers (5)

Dean
Dean

Reputation: 4594

If you set the font-size with a percentage or em then yes you can, but not with pixels. With the following example if you change the div1 font-size it will effect both div2 and div3. See this article for a comparison of the font-size unit types CSS FONT-SIZE: EM VS. PX VS. PT VS. PERCENT

.div1{
    font-size:16px;
}

.div2{
    font-size:80%;
}

.div3{
    font-size:90%;
}

Also here is what I use in my websites to setup the font-sizes:

/* percentage to px scale (very simple)
 80% =  8px
100% = 10px
120% = 12px
140% = 14px
180% = 18px
240% = 24px
260% = 26px
*/

body
{
    font-family: Arial, Helvetica, sans-serif;
    font-size:10px;
}

By setting the font-size properties like that for the body element, setting the font-size for everything else becomes trivial as 100% = 10px. This also makes using the jQuery ui library a lot easier as they use this same font-size setup.

Upvotes: 3

Paulo R.
Paulo R.

Reputation: 15609

If you set your inner divs' font-sizes in ems it's trivial. If you had this...

.div2 {
    font-size: 1.8em; /*180% of inherited font-size */
}

.div3 {
    font-size: 1.4em; /*140% of inherited font-size */
}

... then if you'd change div1's font-size, .div2 and .div3's font-sizes would change proportionally.

Upvotes: 2

A.M.K
A.M.K

Reputation: 16795

I think that this is what you want:

Demo: http://jsfiddle.net/SO_AMK/JjutY/

HTML: 

<div class="div1">
   <div class="div2">
       Some text, and more, and more, and more, and more, and more, and more, and more, and more.
   </div>
   <div class="div3">
       Some text, and more, and more, and more, and more, and more, and more, and more, and more.
   </div>
    <button class="increaseFontSize">Increase Font Size</button>
</div>​

jQuery: 

$(".increaseFontSize").click(function(){
        var fontSize = getFontSize($(".div3"));
        var newFontSize = fontSize + 2;
        $(".div3").css("font-size", newFontSize);
        return false;
});
function getFontSize(element) {
    var currentSize = $(element).css("font-size");
    var currentSizeNumber = parseFloat(currentSize);
    return currentSizeNumber;
}

​

Upvotes: 4

Borophyll
Borophyll

Reputation: 1119

basic idea with javascript:

var divs = document.getElementsByTagName('div');
for(int i = 0; i < divs.Length; ++i) {
  var element = divs[i];
  element.style.setAttribute('font-size', '2px');  //whatever you need to set it to
}

The above will change the font size for every div. Obviously this is probably not quite going to do it for you... but you could do a few things to modify the code. You could get your top-level div with document.getElementById('id'); and then set the style on the child nodes

Upvotes: 1

DRTauli
DRTauli

Reputation: 771

I don't think you can do that with css but if someone knows how kindly educate me as well.

the only solution i can think of is to nest them so that elements with div2 and div3 won't get affected and this will only affect div2 and div3 that are nested under div1 elements.

    div.div2 { font-size:14px; }
    div.div3 { font-size:12px; }

    div.div1 div.div2 { font-size:12px; }
    div.div1 div.div3 { font-size:10px; }

Upvotes: 1

Related Questions