Selecting HTML Elements

CSS selectors are used to find (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories: Simple selectors, Combinator selectors, Pseudo-class selectors, Pseudo-elements selectors, and Attribute selectors.

/* Element Selector */
p { color: red; }

/* ID Selector */
#header { background: blue; }

/* Class Selector */
.highlight { background: yellow; }

/* Universal Selector */
* { margin: 0; padding: 0; }

/* Grouping Selector */
h1, h2, h3 { font-family: Arial; }

• Element selector - Selects by tag name (p, h1, div)
• ID selector - Selects by id attribute (#header)
• Class selector - Selects by class attribute (.highlight)
• Universal selector - Selects all elements (*)
• Grouping selector - Selects multiple elements (h1, h2)

<h1 id="title">Page Title</h1>
<p class="intro">Introduction paragraph</p>
<p>Regular paragraph</p>
<p class="intro">Another intro paragraph</p>