CSS Specificity

When we put styles in a html tag, it’s called inline styles

We give a div with class row a padding of 10px.

If you look at the white blank space on the side of the lettering “Side” there is 10px of white blank space.

Notice in the same div, we add a

Then

When we add styles in the head section, its called internal CSS:

But because we have inline styling, the inline style (with the padding 10px) wins (1,1,0,0 points)

It always has precedence.

Let’s try it with an ID and a element plus a class

As you can see, since ID has precedence over tag and class, the div’s text color will use the Id’s CSS, and not the element + class.