Styling foundations · Lesson 1 of 17

What is CSS?

The shape of a rule: a selector and properties.

6 minutes3 games

CSS tells the browser how things look. Each rule has a selector that picks elements and, inside { }, properties written as property: value;.

HTML

<style>
  h1 {
    color: teal;
    font-size: 40px;
  }
  p {
    color: #555;
  }
</style>

<h1>Hello CSS</h1>
<p>This paragraph is grey.</p>

The 3 selectors you'll use most

p by tag: every paragraph.
.card by class (dot): any element with class="card"; reuse it freely.
#logo by id (hash): the one element with id="logo".

HTML

<style>
  .tag { background: gold; padding: 2px 8px; }
  #main-title { color: crimson; }
</style>

<h2 id="main-title">News</h2>
<p>Topics: <span class="tag">HTML</span> <span class="tag">CSS</span></p>

Quick question

How do you select every element with class="btn"?

Spot the bug

One declaration will be ignored because of a syntax mistake. Which?

Exercise

Make the h1 red (red).

HTML

<style>
  
</style>
<h1>Red title</h1>

Learn more from

Played 0 of 3 games

CSS

Styling foundations · Lesson 1 of 17

What is CSS?

The shape of a rule: a selector and properties.

6 minutes3 games

CSS tells the browser how things look. Each rule has a selector that picks elements and, inside { }, properties written as property: value;.

HTML

<style>
  h1 {
    color: teal;
    font-size: 40px;
  }
  p {
    color: #555;
  }
</style>

<h1>Hello CSS</h1>
<p>This paragraph is grey.</p>

The 3 selectors you'll use most

p by tag: every paragraph.
.card by class (dot): any element with class="card"; reuse it freely.
#logo by id (hash): the one element with id="logo".

HTML

<style>
  .tag { background: gold; padding: 2px 8px; }
  #main-title { color: crimson; }
</style>

<h2 id="main-title">News</h2>
<p>Topics: <span class="tag">HTML</span> <span class="tag">CSS</span></p>

Quick question

How do you select every element with class="btn"?

Spot the bug

One declaration will be ignored because of a syntax mistake. Which?

Exercise

Make the h1 red (red).

HTML

<style>
  
</style>
<h1>Red title</h1>

Learn more from

Played 0 of 3 games