1 - Tag Selector

This paragraph is styled using the p selector.

2 - ID Selector

The Header, Menu and Footer are styled using IDs.

3 - Class Selector

This paragraph uses class .highlight

Another element using the same class.

4 - Multiple Classes

This paragraph has FOUR classes.

Blue + Bold

Red + Big

5 - Reusable Class

The class .shadow can be reused on any element.

6 - Tag + Class

This selector is: 


p.highlight

7 - Tag + ID

The selector used is: 


div#menu

8 - CSS Specificity

This text is RED because the ID selector has higher priority than the class selector.

9 - Summary

Selector Example Description
Tag p Styles every paragraph
ID #header Styles one unique element
Class .card Reusable style
Tag + Class p.highlight Only highlighted paragraphs
Tag + ID div#menu Specific div with id="menu"