top of page

10.11.2018: One Lesson of Coding


Today's soundtrack is Dance With the Dead: Near Dark, a cool electronic album with vaporwave and rock elements. It's what might happen if Steve Vai was trapped in a Swedish dance club in 1992.


This evening, I'm working learning how to "Override Class Declarations by Styling ID Attributes". In the last lesson, I learned that HTML reads CSS styling from top to bottom. The style that's nearest the bottom will win. But there is one exception to this rule: by using id attributes, we can override even the lowest of styles.


In summary, when it comes to CSS styles, HTML processes CSS from top to bottom, but id attributes override styles, regardless of the id attribute's position in the style section. To override an id attribute, we can use an inline style command, such as "color: pink;".


There is, it should be known, one override to override them all. We can add the keyword "!important" after a colour in our style command section. This will override every other attribute or style command. Here's how it plays out:


<style>

body {

background-color: white;

font-family: arial;

color: black;

}

.green-text {

color: green !important;

#blue-text {

color: blue;

}

.grey-text {

color: grey;

}

</style>

<p id="blue-text" class="green-text grey-text" style="color: red">What colour am I?</p>


What colour am I?

bottom of page