Adding CSS: three ways and three selectors

What you will learn

• three places to put CSS: inline, internal <style> and an external file
• rule syntax: selector, property and value
• element, class (.name) and id (#name) selectors
• colour names, hex codes and rgb()

Understand the idea

HTML says what content is; CSS (Cascading Style Sheets) says how it looks. There are three places to write it. Inline CSS goes in a style attribute on one element, internal CSS goes between <style> tags in the head, and external CSS lives in its own file linked with <link rel="stylesheet" href="style.css">. External files are best, because one file can style a whole website.

A CSS rule has a selector that says what to style, then curly brackets holding declarations. Each declaration is a property, a colon, a value and a semicolon: h1 { color: tomato; }. The three most useful selectors are the element selector (h1, every h1), the class selector (.intro, everything with class="intro") and the id selector (#special, the one element with that id).

Colours can be written in three ways. A name such as tomato or navy is easiest. A hex code such as #ff6347 is red, green and blue in base 16. rgb(255, 99, 71) gives the same three numbers from 0 to 255. Use color for text and background-color for the area behind it.

When two rules disagree, the more specific selector wins: an id beats a class, and a class beats an element. If they are equally specific, the rule written later wins. That is the "cascade" in the name.

Example

h1 {
  color: rebeccapurple;
}

.intro {
  background-color: #fff3bf;
}

#special {
  color: rgb(220, 20, 60);
  background-color: lavender;
}

Your turn: code to type and practise

Colour the h1 text, give .intro a background-color, and give #special both a color and a background-color.

← Forms and user inputBackgrounds and gradients →