CSS: Units of Measurement
Throughout the course, pixels, the smallest element of the screen that outputs color, are what we've been using as units of measurement. The pictures that you look at on the screen are all made from pixels (and there's a lot of them). They've been used to indicate font size, element height and width, internal and external indentation, line height, and so on.
Pixels are the absolute unit of measure in CSS. So, what does that mean? It means that regardless of what screen size you specify, the value specified in pixels will be retained. If you specify a 30-pixel indent, it will be the same on your phone, a 102-inch TV, and your microwave.
On the one hand, this is good because you can be sure that on different devices all sizes will remain the same. On the other hand, it can also be a problem. Imagine text with a font size of 12 pixels. It will read fine on an average screen but using it on a TV or smartphone will cause the text to be too small to read comfortably because the devices have different screen sizes. If the screen is only 50 pixels, the text will become incredibly large because it will take up most of the screen
In addition to pixels, there are other absolute units of measurement:
- centimeters
- millimeters
- inches
- points
Although they are not often used, they can be useful when setting up printing. Websites only use pixels.
Besides absolute units of measurement, there are relative units. By their name, it's clear that in this case the size of the element isn't fixed, but rather is calculated relative to something. As for web pages, this something is the size of the font. Why the font? Imagine that you, as a user, increase the size of the font on the site for your own convenience. If the indentation, width, and height are not tied to the size of the text, then such text will go beyond the block. And the text is the basis of any page on the Internet.
One of the relative units of measurement are percentages. They're counted from the font size of the parent element, i.e., the element they're in. For example:
<section class="news">
<h2>News</h2>
</section>
.news {
font-size: 20px;
}
.news h2 {
font-size: 200%;
}
What size will the second level header be? The correct answer is 40px since the font size for the news section is set to 20px. It's relative to this size and calculated with a value of 200%. It doesn't matter what other tags there are and in which wrappers these news items are located since the size is calculated from the font-size value of the news element.
But it's important to remember that font-size is an inherited property. If it is not explicitly specified in the news element in our example, then, for it, the font-size value of the parent will be set. Let's expand on the example:
<main>
<section class="news">
<h2>News</h2>
</section>
</main>
main {
font-size: 16px;
}
h2 {
font-size: 200%;
}
What is the size of the second level header? The correct answer is 32px. If you build a logical chain of font sizes, it looks like this:
- The
<main>element has the font size set to16px. - The element with class
newshas no separate font size indication, so it inherits from<main>, which is also16px - The second level header has a font size of
200%. The value is set relative to the font size of the parent, i.e., the block with the class.news. Otherwise, it'll be16px * 2 = 32px.
There are several other basic relative units of measurement:
- em. is defined relative to the font size of the parent element, i.e.,
1.5emwill be 50% larger than the font size of the parent's base font size. It's very similar to using percent, only specified a little differently - rem. is determined relative to the font size of the root element, i.e., the
htmltag (default value is 16px)
Instructions
Add <div> with the class set to header. Set the font size to 22px. Inside <div>, put a paragraph with the class offer, and set the font size to 200%. Write the styles in the <style> tag
The exercise doesn't pass checking. What to do? 😶
If you've reached a deadlock it's time to ask your question in the «Discussions». How ask a question correctly:
- Be sure to attach the test output, without it it's almost impossible to figure out what went wrong, even if you show your code. It's complicated for developers to execute code in their heads, but having a mistake before their eyes most probably will be helpful.
In my environment the code works, but not here 🤨
Tests are designed so that they test the solution in different ways and against different data. Often the solution works with one kind of input data but doesn't work with others. Check the «Tests» tab to figure this out, you can find hints at the error output.
My code is different from the teacher's one 🤔
It's fine. 🙆 One task in programming can be solved in many different ways. If your code passed all tests, it complies with the task conditions.
In some rare cases, the solution may be adjusted to the tests, but this can be seen immediately.
I've read the lessons but nothing is clear 🙄
It's hard to make educational materials that will suit everyone. We do our best but there is always something to improve. If you see a material that is not clear to you, describe the problem in “Discussions”. It will be great if you'll write unclear points in the question form. Usually, we need a few days for corrections.
By the way, you can participate in courses improvement. There is a link below to the lessons course code which you can edit right in your browser.
Tips
With relative units, you can control not only the size of the font but also the rest of the properties, which take a number and a unit of measurement as a value