Chapter 1 · The foundations·8 min read

How CSS connects to HTML

CSS and HTML work as a pair. HTML says what something is, and CSS says what it should look like. The two are joined by a simple rule.

Chapter 1 · The foundationsLesson 1 of 6

0 of 6 lessons complete across this handbook

Selectors, properties, values

A CSS rule has two main parts. The selector says which element the rule applies to. Then, inside the curly braces, a list of properties and values says how to style it. A property is a thing you can change, like color, and a value is the setting, like red.

You can add CSS right inside the HTML page using a <style> tag in the head, or in a separate file with a .css ending. A separate file is usually better, because one file can style many pages.

Read CSS out loud

p { color: red; } reads as 'apply to every paragraph: make the color red'. Reading it aloud like this makes complex rules far easier to follow.

css

/* every paragraph gets red text */
p {
  color: red;
}

/* the main heading gets a blue color and larger size */
h1 {
  color: #2743E3;
  font-size: 32px;
}

Knowledge checkpoint

Verifies: CSS rules

In the rule 'h1 { color: blue; }', what is the selector?

colorblueh1{ }