Sizing

Text size keywords

Earlier we set the font-size of text to large. This is an keyword that tells the browser to set an absolute size. Click below for the other available keywords:

You can also use relative keywords, which will set the font-size relative to the size of the parent element:

• larger
• smaller

Here's an example:

I travelled for 1 million inches (or 96 million pixels) until I reached the CSS guru. I quietly asked him "How should I size my CSS?". He replied You should generally use relative sizing!

<blockquote style="font-size: large">I travelled for 1 million inches (or 96 million pixels) until I reached the CSS guru. I quietly asked him <span style="font-size: small">"How should I size my CSS?"</span>. He replied <i style="font-size: smaller">You should generally use relative sizing!</i></blockquote>

Note how the CSS guru's reply becomes size medium, one size smaller than the size of the parent element blockquote.

More Exact Sizing

It's fine to use keywords to set the default font-size for certain elements, such as the body element. Often, you'll want more control when setting the size of other elements. CSS lets you set the size very precisely with both absolute units and relative units.

absolute sizes
You can set the font-size using an absolute measure such as px (for pixels), but this is usually not recommended, since the screen's size and proportions can very greatly. You can also useinfor inches, among other measurements. In CSS, oneinis 96px`, not an actual inch.

relative sizes

em
Instead of using absolute sizes, you should generally use relative sizing for most of your styles. em is a common measurement to use, and 1em equals one line of the parent element. This makes it easy to size different elements in relation with each other.

% (percent)
% is similar to em, where 100% is the size of the parent element instead of 1em

Here's another example that uses both absolute and relative sizing:

I travelled for 100% of the journey until I reached the CSS guru. I quietly asked him "How should I size my CSS?". He loudly replied You should generally use relative sizing!

<blockquote>I travelled for 100% of the journey until I reached the CSS guru. I quietly asked him <span style="font-size: 11px;">"How should I size my CSS?"</span>. He loudly replied <i style="font-size: 115%;">You should generally use relative sizing!</i></blockquote>

Setting the Size of Other Elements

These size units are used for setting the size of other elements besides the text itself. You can set the width or height of an element itself px, em or %. You can also set other sizes, such as the border-width.

This paragraph is only 50% as wide as its parent element, no matter how big the screen is.

<p style="width: 50%">This paragraph is only 50% as wide as its parent element, no matter how big the screen is.</p>

Sometimes, you want to set a maximum size for an element to appear on a large screen, but where it fill fill the space on a small screen. Use the max-width property set to an absolute value for this purpose:

This paragraph has max-width of 700px wide, so it will leave extra space on a large screen but fill a small screen.

<p style="max-width: 700px;">This paragraph has max-width of 700px wide, so it will leave extra space on a large screen but fill a small screen.</p>

Styling your Store

In your static store, set the font-size of the headings according to the following:

• h1 - 2.2em
• h2 - 1.8em
• h3 - 1.4em

Mini-Challenges

For the next few questions, you're given the following CSS:

.default-size {
  font-size: 16px;
}
.big-size {
  font-size: 1.5em;  
}
.small-size {
  font-size: 75%;
}

...and HTML:

<div class="default-size">
   <p>Five hexing wizard bots jump quickly.</p>
  <p class="big-size">The quick brown fox jumps over the lazy dog.</p>
  <p class="small-size">Pack my box with <span class="big-size">five dozen</span> liquor jugs.</p>
</div>