CSSLesson 1 of 10Jump to practice

What is CSS?

CSS controls how HTML looks. Learn what a CSS rule is made of and where to put it.

HTML says what things are. CSS (Cascading Style Sheets) says how they should look: colors, sizes, spacing and layout.

A CSS rule

A CSS rule has two parts: a selector that picks elements, and a declaration block that says what to change.

h1 {
  color: teal;
  font-size: 40px;
}
  • h1 is the selector. This rule applies to every <h1>.
  • color: teal; is a declaration: a property, a colon, a value and a semicolon.

Change some values below and press Run.

Your first CSS
Open in editor
<!DOCTYPE html>
<html>
<head>
<style>
  h1 {
    color: teal;
    font-size: 40px;
  }
  p {
    color: dimgray;
    font-family: Georgia, serif;
  }
</style>
</head>
<body>
<h1>Styled heading</h1>
<p>This paragraph is styled by CSS.</p>
</body>
</html>
Result

Three places to write CSS

Where Example When to use it
A separate file <link rel="stylesheet" href="style.css"> Real websites. One file styles every page
A <style> element <style> p { color: red; } </style> Learning, and single pages like the examples here
A style attribute <p style="color: red"> Rarely. Quick one-off changes

Practice

Check what you just learned. Fill in the missing code, then answer the quiz.

  1. Exercise 1

    Make every paragraph's text blue.

    p {
  : blue;
}

  2. Exercise 2

    Complete the rule so every <h1> has a font size of 32px.

    h1 {
  font-size: ;
}

  3. Exercise 3

    Link the stylesheet file style.css to the page.

    <link rel="" href="style.css">

Quiz: 3 questions

1. In h1 { color: teal; }, what is h1?
2. What separates a property from its value?
3. Why do real websites put CSS in a separate file?

Finish the practice to complete this lesson.