Day3: Override CSS

Day 3 of #100DaysOfCode Challenge

Basic CSS: Override Styles in Subsequent CSS

Example 1:

<style>
body {
background-color: black;
font-family: monospace;
color: green;
}

.pink-text {
color: pink;
}

.blue-text {
color: blue;
}

</style>

<h1 class="pink-text blue-text">Hello World!</h1>
<!-- OR -->
<h1 class="blue-text pink-text">Hello World!</h1>
OutPut:




No matter blue-text pink-tex or pink-text blue-text, the output is the same.


The .blue-text is declared later, and it will override the .pink-text.

Example 2:

Now adding an id selector to example 1 and declaring it to <h1> Rest of the code remains the same.


#orange-text {
color: orange;
}


<h1 class="pink-text blue-text" id="orange-text">Hello World!</h1>

Override Class Declarations with Inline Styles

The inline CSS overrides class and id tags. 

Override All Other Styles by using Important

Using !important will override all the CSS stytles. 100% sure that the pink color is applied. 

#100DaysOfFitness Challenge

Day3: 10km Morning Cycling

#100DaysOfWriting Challenge

Completed writing Things to do article, need to revise. I was working on it for three days.

With Love,
Vasant V Patil