Should I use colour names or hex codes?

Colour names like 'tomato' or 'navy' are quick and readable, but there are only about 140 of them. Hex codes (#3a7bd5) and rgb() let you choose any colour exactly, which is why designers usually prefer them for real projects.

How do I use a Google Font?

Add a to the font in your HTML's (Google Fonts gives you the exact line), then write that font's name first in your font-family list, with a generic family like sans-serif as a fallback.

CSS Colours and Fonts | Coding

Colour and type bring a page to life

A web page with no styling is just black text on a white background. The two changes that make the biggest difference are colours and fonts. The right colour makes a heading pop and a button feel clickable; the right font makes text comfortable to read. In this lesson you'll learn exactly how to control both with CSS.

If you haven't styled a page before, start with Styling Web Pages with CSS to see how CSS rules attach to HTML. Here we'll go deep on the two most fun parts: colour and type.

Two colour properties

There are two colour properties you'll use constantly:

color — the colour of the text.
background-color — the colour behind the element.

h1 {
  color: white;
  background-color: navy;
}

That gives a heading white text on a navy background. Don't mix them up: color is always the text, never the background.

Three ways to write a colour

CSS lets you describe a colour in several ways. The three most common:

1. Colour names. About 140 words like red, tomato, gold, navy, teal. Easy to read, limited in choice.

p { color: tomato; }

2. Hex codes. A # followed by six characters: two for red, two for green, two for blue, each from 00 (none) to ff (full).

p { color: #3a7bd5; }   /* a nice blue */

So #ff0000 is pure red, #00ff00 pure green, #0000ff pure blue, #000000 black and #ffffff white. You can mix any amounts to get millions of colours.

3. rgb() values. The same idea but with numbers from 0 to 255 for red, green and blue:

p { color: rgb(58, 123, 213); }   /* the same blue as above */

Way to write it	Example	Good for
Name	`gold`	quick tests, common colours
Hex	`#3a7bd5`	exact, compact, designer favourite
rgb()	`rgb(58,123,213)`	exact, easy to tweak one channel

All three are valid — pick whichever is clearest for the job.

Choosing fonts with font-family

The font-family property picks the typeface. The clever part is that you list several fonts as backups, because not every computer has every font:

body {
  font-family: "Segoe UI", Arial, sans-serif;
}

The browser tries the first font; if it's missing it tries the next, and so on. Always end the list with a generic family so there's a guaranteed fallback:

sans-serif — clean fonts with no little feet (great for screens).
serif — fonts with small feet, like Times (formal, book-like).
monospace — every character the same width (used for code).

.code { font-family: "Courier New", monospace; }

Sizing and weight

Two properties control how big and how bold text is.

font-size sets the size. You can use pixels (px) or rem (a multiple of the page's base size):

h1 { font-size: 32px; }
p  { font-size: 16px; }

font-weight sets the thickness. Use normal, bold, or numbers from 100 (thin) to 900 (heavy):

.important { font-weight: bold; }   /* same as 700 */
.subtle    { font-weight: 300; }    /* light */

A couple of related properties make text even nicer to read:

p {
  line-height: 1.6;       /* space between lines */
  text-align: center;     /* left, right, center or justify */
}

A complete worked example

Let's style a small page using everything above. Save it as an .html file and open it in a browser, then try changing the colours and fonts.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Colours and Fonts</title>
  <style>
    body {
      font-family: "Segoe UI", Arial, sans-serif;
      background-color: #f4f6fb;
      color: #333333;
      line-height: 1.6;
      max-width: 500px;
      margin: 30px auto;
      padding: 0 16px;
    }

    h1 {
      color: #ffffff;
      background-color: #3a7bd5;
      padding: 16px;
      border-radius: 8px;
      text-align: center;
    }

    .highlight {
      color: tomato;
      font-weight: bold;
    }

    .note {
      font-family: "Courier New", monospace;
      background-color: #fff3cd;
      padding: 10px;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <h1>My Coding Journal</h1>
  <p>Today I learned how to use <span class="highlight">colours and fonts</span> in CSS.</p>
  <p class="note">Tip: hex codes like #3a7bd5 let you pick any colour you like.</p>
</body>
</html>

What's happening:

The body sets a soft background, dark-grey text, and a clean sans-serif font for the whole page.
The h1 flips the colours — white text on a blue background — to stand out as a banner.
The .highlight span recolours just a few words and makes them bold.
The .note uses a monospace font and a pale yellow background, like a sticky note.

Picking colours that work together

A few quick rules for good-looking pages:

Contrast matters. Dark text on a light background (or the reverse) is easy to read. Light grey text on white is not.
Don't use too many colours. One main colour, one accent, plus greys for text usually looks tidy.
Reuse your colours. Pick a small set of hex codes and use them across the page so it feels consistent.

Try it yourself

New colour scheme. Change the h1 background to a different hex code and adjust the text colour so it still reads clearly.
Swap the font. Change the body font-family to a serif stack like Georgia, serif and notice how the mood changes.
Add a button. Create a <button> and style it with a colourful background-color, white color and font-weight: bold.

Challenge: Design a "profile card" with a coloured header bar, a name in a large bold font, a short bio in normal weight, and a highlighted hobby in your accent colour. Use only hex codes for every colour and keep the whole card to three colours plus grey text. When the look is right, lay it out neatly using ideas from Build a Simple Web Page with HTML.

CSS Colours and Fonts

Key takeaways