Styling foundations · Lesson 4 of 17

Colours and text

Colour formats, font size and family.

7 minutes2 games

Colours can be names (tomato), hex (#1e90ff) or rgb(30, 144, 255). color sets the text colour and background the background. For text: font-size, font-weight (700 is bold), font-family and text-align.

HTML

<style>
  .banner {
    background: #0f172a;
    color: white;
    text-align: center;
    padding: 20px;
    font-family: Georgia, serif;
  }
  .banner strong { color: #38bdf8; font-size: 28px; }
</style>

<div class="banner">
  <strong>SeaCode</strong>
  <p>Learn to code for real</p>
</div>

Complete the code

Complete: black background, white text.

.dark {
  : black;
  : white;
}

Exercise

Make the .note paragraph 20px and bold (font-weight: 700).

HTML

<style>
  .note {
    
  }
</style>
<p class="note">Remember to save!</p>

Learn more from

Played 0 of 2 games

CSS

Styling foundations · Lesson 4 of 17

Colours and text

Colour formats, font size and family.

7 minutes2 games

HTML

<style>
  .banner {
    background: #0f172a;
    color: white;
    text-align: center;
    padding: 20px;
    font-family: Georgia, serif;
  }
  .banner strong { color: #38bdf8; font-size: 28px; }
</style>

<div class="banner">
  <strong>SeaCode</strong>
  <p>Learn to code for real</p>
</div>

Complete the code

Complete: black background, white text.

.dark {
  : black;
  : white;
}

Exercise

Make the .note paragraph 20px and bold (font-weight: 700).

HTML

<style>
  .note {
    
  }
</style>
<p class="note">Remember to save!</p>

Learn more from

Played 0 of 2 games