CSS Selectors

CSS

Selectors tell CSS which HTML elements to style. There are many types:

Element — p { } styles all paragraphs
Class — .box { } styles elements with class="box"
ID — #header { } styles the element with id="header"
Universal — * { } styles everything

Classes are the most commonly used selector in real projects.

Example — CSS

/* Element selector */
h1 { color: red; }

/* Class selector (most used!) */
.highlight {
    background: yellow;
    padding: 4px 8px;
}

/* ID selector */
#main-title {
    font-size: 2.5rem;
    font-weight: bold;
}

/* Multiple selectors */
h1, h2, h3 {
    font-family: Arial, sans-serif;
}

Result

Red Heading (element)

Highlighted text (class)

Big Title (ID)

Previous CSS Introduction

Next CSS Box Model

CSS Selectors

Red Heading (element)

Continue Learning