• Chetneet Chouhan

Day 1: Priority in CSS

I have learned that CSS has an inbuilt priority system. Meaning, if there are more than one CSS element defining the style of a single HTML element, then that HTML will have the CSS properties of that element which is the latest.

Example,

body {
  background-color: black;
}

h1 {
  background-color: pink;
}

The color will not be black, but pink (of H1 element). But if we specify by making an id, then id will take over it.


For example, I have made an id here and the code is the same as above.


body {
  background-color: black;
}

h1 {
  background-color: pink;
}

/* i have given h1 element an id of brown-background-color-h1 */

#brown-background-color-h1 {
  background-color: brown;
}

Here is the result


Working on a Dr, Norman Borlang project (for FreeCodeCamp). Result is, background is black (body is defined as above) but the background of title is brown (not pink) because we specified it with an id.


chetneetpatreon.jpg

Get more exclusive essays that aren't published anywhere. Get it on Patreon.

Get insightful and deep essays to your inbox and my latest book by signing up my newsletter

how to consciously learn from internet.j

Featured Essays

Recent posts