Week 3 Notes
3.3 CSS Selectors
A selector tells CSS which HTML element(s) to style. Mastering selectors is one of the most important CSS skills.
|
CSS Selectors |
|
/* ELEMENT selector — styles ALL paragraphs */ |
|
p { color: #333; } |
|
|
|
/* CLASS selector — styles elements with class="highlight" */ |
|
.highlight { background-color: yellow; font-weight: bold; } |
|
|
|
/* ID selector — styles ONE element with id="main-title" */ |
|
#main-title { color: darkblue; font-size: 2.5rem; } |
|
|
|
/* DESCENDANT selector — only <a> tags INSIDE a <nav> */ |
|
nav a { color: white; text-decoration: none; } |
|
|
|
/* MULTIPLE selectors — applies same style to h1, h2, and h3 */ |
|
h1, h2, h3 { font-family: 'Arial', sans-serif; } |
|
|
|
/* PSEUDO-CLASS — styles a link when hovered */ |
|
a:hover { color: orange; text-decoration: underline; } |