CSS for Beginners: Rules, Stylesheets and Colors

Lesson 1

Rules, properties and values

What CSS is, and how a rule is written.

What is CSS?

HTML says what is on the page. CSS (Cascading Style Sheets) says how it looks: colors, fonts, sizes, spacing, and where things sit.

Without CSS, every page would be black text on white, in one long column. With it, the same HTML can look like a newspaper, a game or a shop.

A CSS rule

CSS is a list of rules. Each rule says which elements to style, and how:

the selector (h1) picks the elements

inside the curly braces, each declaration is a property, a colon, a value and a semicolon

This rule turns every <h1> purple and makes it bigger. Change the values and watch the page.

CSS

h1 {
  color: purple;
  font-size: 40px;
}

Practise “Rules, properties and values” in the game

Lesson 2

Where CSS lives

style elements, stylesheets and the style attribute.

Three places for CSS

In its own file, like style.css, linked from the <head>. This is the usual way: one file can style every page of a site.

In a <style> element in the <head>, for one page.

In a style attribute on one element. Handy for a quick test, but messy for a whole site.

HTML

<head>
  <link rel="stylesheet" href="style.css">
  <style>
    p { color: teal; }
  </style>
</head>
<body>
  <p style="color: red;">Only this paragraph is red.</p>
</body>

Comments in CSS

CSS comments look different from HTML ones. They go between /* and */, and the browser skips them:

CSS

/* the big title */
h1 {
  color: tomato; /* a warm red */
}

Practise “Where CSS lives” in the game

Lesson 3

Colors

Color names, hex codes, rgb and backgrounds.

Three ways to write a color

Names: red, tomato, gold, teal... there are about 140 of them

Hex codes: # and six digits, two each for red, green and blue: #FF0000 is red, #F7DF1E is JavaScript yellow

rgb(): the same three amounts as numbers from 0 to 255: rgb(255, 0, 0) is red

color sets the text color. background-color sets the color behind it.

CSS

body {
  background-color: #FFF8E1;
}
h1 {
  color: rgb(41, 101, 241);
}
.alert {
  color: white;
  background-color: tomato;
}

Tip: Pick text and background colors with strong contrast, so everyone can read them.

Practise “Colors” in the game

Recap

What Level 1 covers, in a few lines.

CSS decides how a page looks: colors, sizes, spacing and layout. HTML says what things are; CSS says how they look.
A CSS rule is a selector and a block of declarations: h1 { color: red; }. Each declaration is a property, a colon, a value and a semicolon.
CSS goes in a <style> element, or better, in its own file linked with <link rel="stylesheet" href="style.css">.
Colors can be names (tomato), hex codes (#FF6347) or rgb values (rgb(255, 99, 71)). color is the text color and background-color the color behind it.

Now try it in CSS School

Write real code and watch your page change as you type, with a check after every step and a test at the end of each level. Free.

Start learning