🎓 A1Learner
🔍

CSS Intro

CSS is the language that styles web pages. The HTML course teaches the content of a page, and this course styles that content.

Colour the heading

This rule colours the main heading blue. The h1 selector picks the heading element.

h1 {
  color: blue;
}

More than one rule

A stylesheet holds many rules. Each rule holds its own declarations.

h1 {
  color: blue;
}
p {
  color: green;
}

Every paragraph at once

The p selector picks every paragraph. The intro paragraph is a paragraph too.

p {
  color: red;
}

Example

h1 {
  color: blue;
}
p {
  color: green;
}
ul {
  color: red;
}

Key points

  • CSS: short for Cascading Style Sheets
  • Selector: the part of a rule that chooses the elements
  • Property: the feature a rule sets, like color
  • Value: the setting a property takes, like blue
  • px: a screen pixel, the unit in a length like 16px
  • CSS can sit in a style element or in a linked file.
  • HTML holds the content of a page, and CSS controls its presentation.

In this example, the first rule colours the heading blue. The second rule colours every paragraph green. The third rule colours the list red. Three short rules style the whole practice page.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

What does a selector do in a CSS rule?