Selectors

A tag selector (p) styles every element of that type. A class selector (.highlight) styles every element carrying class="highlight". An id selector (#header) targets the one single element with that id.

Example 1: combining selectors

p { font-family: sans-serif; }
.highlight { background: yellow; }
p.highlight { font-weight: bold; }

p.highlight (no space between them) only matches paragraphs that also carry the highlight class — combining selectors narrows what they match, while spacing them out (p .highlight) would mean something different entirely: any highlighted element inside a paragraph.

Example 2: what happens when two rules disagree

p { color: blue; }
.highlight { color: red; }
/* A 
 ends up red — class beats tag selector */

When two rules target the same element with different values for the same property, CSS uses specificity to decide the winner: id selectors beat class selectors, which beat tag selectors. This is exactly why unexpected styling sometimes "just doesn't apply" — a more specific rule elsewhere is quietly winning, and learning to check specificity is often the fastest way to debug it.