Learning to Code: Day 8— Introduction to CSS Part 5
Hello everyone, I hope you’re having a great Friday, got your tea with you and ready to go. Let’s jump straight back into CSS. Yesterday was all about Padding and Margins, and today were going to look at different lengths within the code and several different ranking overriding factors.
Hey, what did the editor say to the console? Gimmie a <br>!
I’ll see myself out.
—
Absolute Units vs. Relative Units
Absolute Units are tied to physical units of lengths such as millimetres (mm) or inches (in) or pixels (px). They are approximate to the actual length of the computer screen but resolutions may vary.
Relative Units are relative to another length value. The relative lengths rem and em are based on the size of an element’s font. Here is a breakdown of the em measurement from Tutorial Republic:
A measurement of
1emis equal to the computed value of thefont-sizeproperty of the element on which it is used. It may be used for vertical or horizontal measurement.For example, if
font-sizeof the element set to 16px andline-heightset to 2.5em then the calculated value ofline-heightin pixel is2.5 x 16px = 40px.The exception occurs when em is specified in the value of
font-sizeproperty itself, in that case it refers to the font size of the parent element.So, when we specify a font size in
em, 1em is equal to the inheritedfont-size. As such,font-size: 1.2em;makes the text 1.2 times larger than the parent element's text.
It’s early days yet, and there are lots of ways to define the units of length in CSS, here is a breakdown of the many length names and whether they are Absolute or Relative:
Styling an HTML Body Element
Let’s take a break from lengths for now and focus on the body element of HTML, which appears in the style block, remember?
We can style the body element, and all child elements nested inside the body element (the parent element) will inherit these styles. For example, if we set the background-color of the body to black, make all element text colours green, and change all fonts of the child elements to monospace, it looks like this in the editor:
<style>
body {
background-color: black;
color:green;
font-family: monospace;
}
</style>
<h1>Hello World!</h1>
Because the header (h1) is a child element of it’s parent, the body, it will inherit the features stated in the body element and the outcome will be like this:
Prioritising Styles that conflict with each other
We can go one step further and prioritise one style over another in an element. If you create a CSS class declaration in the style which defines a colour for an element, it will override the body element’s CSS class declaration (“color:green;”):
<style>
.pink-text {
color: pink;
}
</style>
This will override the “color:green” CSS class declaration originally stated in the body and give this result:
One step further, if we want to override the current CSS selector (“pink-text”) you simply add a *second* CSS class declaration and place it after the first in the style block. The ordering of those classes in the style block are important as the second CSS class declaration will take priority and overwrite the attributes of the first, because it is read second and therefore the most up-to-date command:
<style>
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
This will produce this result:
We see here that “.pink-text” is the first CSS selector to be declared, then the second CSS selector “.blue-text” is declared. HTML will take the second selector as priority and even when you write the class types in reverse order in the element you want to style, the ordering of them won’t matter as the classes have already been set out earlier inside the style block. Remember, the construction of the class attributes in the element you want to affect would be class=“class1 class2”:
<h1 class=“blue-text pink-text”>Hello World!</h1>
Override All Class Attributes with ID Attributes
In the land of class, the id rule. *Cue dramatic music.*
The browser reads the code in order and we know now that it will choose the last class as priority, but the id class declaration can override all these classes. Remember in the style block, the id selector begins with a hashtag. Then the id attribute in the element you want to style (which appears as id=“type”) links to that id class declaration in the style and overrides all other classes.
Let’s add this id class declaration to the already existing code in the style which has two CSS classes (the .pink-text and the .blue-text) to turn the font orange:
#orange-text {
color:orange;
}
Next lets add the id attribute in the element:
<h1 id=”orange-text”
class=”pink-text blue-text”>Hello World!</h1>
And here’s the result:
Hey Presto! We did it guys.
Override Class Declarations with Inline Styles
Remember the inline styles? They are written in the element as [attr=type] and appear as style=“colour: white” for example. Let’s make one that overrides all class and id declarations:
<h1
style=”color: white”
id=”orange-text” class=”pink-text blue-text”>Hello World!</h1>
See it there? On line 2? Here’s what the outcome will be now:
Override Everything using Important
But wait! There’s one more! Let’s bring out the big finale, the one keyword to rule them all. And it’s called !important.
If you make mistakes and want to be absolutely sure you are using the correct CSS, then use this keyword.
Note: This will be helpful to you in many other occasions using the CSS libraries in other fields.
Remember that .pink-text class declaration that was buried under the others? Let’s bring it back to life amid all the other existing class and id declarations using the !important keyword:
.pink-text {
color: pink !important;
}
And then we’re back to this:
—
Aaaaaaand let’s call it a day there. This was probably the longest post so thanks for keeping up and I hope it was clearer and more precise than yesterday’s red and yellow squares fandango.
Oh man, anyone else getting a real buzz out of learning this stuff? I’m absolutely loving it. The podcasts I listen to are making alot more sense now too. I might try to dip my toe back into the Coding Blocks waters again. See you!
