Colors and fonts

What CSS does

HTML says what each part of a page is. CSS says how it looks. A CSS file is a list of rules. Each rule picks some elements and gives them new properties.

h1 {
  color: navy;
  font-size: 32px;
}

A rule has three parts:

• The selector says which elements to change. Here it is h1.
• A property is the thing to change, such as color.
• A value is the new setting, such as navy. The property and the value are separated by a colon, and the pair ends with a semicolon.

The rules go between braces { }. The index.html file in this lesson is already linked to style.css, so you only write in style.css.

Colors

You can write a color in three common ways:

• By name: red, navy, tomato.
• As a hex code: #1d4ed8. The six digits are the amounts of red, green, and blue.
• With rgb(): rgb(29, 78, 216).

color changes the color of text. background-color changes the color behind it.

Fonts and sizes

• font-family lists fonts to try, in order. Always end the list with a general family such as serif, sans-serif, or monospace.
• font-size sets the size of text. The unit px means pixels. Normal text is 16px.
• text-align moves text to the left, center, or right.

The preview cannot load fonts from other websites. Use fonts that are already on the computer, such as Georgia, Arial, or Courier New.

Classes

To style one element and not the others, give the element a class in the HTML, then use the class name in the selector with a dot in front. In this lesson, the first paragraph has class="lead", so the selector .lead finds only that paragraph.

Your turn

Write your rules in style.css. The index.html tab is read-only so that you can read it, but not change it.