CSS Colors, Backgrounds and Typography

Introduction

A good website is not only about structure and functionality. Visual presentation is also important. Colors, backgrounds and typography help users understand content, identify important sections and navigate a website comfortably.

CSS gives developers powerful tools for controlling the visual appearance of text and page elements. In this lesson, you will learn how to work with colors, backgrounds and typography.

1. CSS Colors

CSS allows you to specify colors for text, backgrounds, borders, shadows and many other visual properties.

For example:

body {
    color: #222;
    background-color: white;
}

The color property controls the foreground text color, while background-color controls the background.

2. Named Colors

CSS supports many predefined color names.

h1 {
    color: blue;
}

.warning {
    color: red;
}

.success {
    color: green;
}

Named colors are easy to understand, but professional interfaces usually use more precise color systems such as hexadecimal, RGB or HSL.

3. Hexadecimal Colors

Hexadecimal colors are written using a hash symbol followed by six hexadecimal characters.

.primary {
    color: #0b5ed7;
}

.dark {
    color: #111827;
}

.light {
    color: #f8fafc;
}

A hexadecimal color is commonly represented as:

#RRGGBB

The first pair represents red, the second pair represents green and the third pair represents blue.

4. Short Hexadecimal Colors

Some hexadecimal colors can be written using three characters.

color: #fff;
color: #000;
color: #f00;

These represent white, black and red respectively.

For example:

#fff

is equivalent to:

#ffffff

5. RGB Colors

RGB represents red, green and blue values.

color: rgb(11, 94, 215);

Each value normally ranges from 0 to 255.

For example:

rgb(255, 0, 0)

represents red.

rgb(0, 0, 255)

represents blue.

6. RGBA Colors

RGBA extends RGB by adding an alpha value for transparency.

background-color: rgba(11, 94, 215, 0.5);

The final value controls opacity.

A value of 1 is fully opaque, while 0 is fully transparent.

7. HSL Colors

HSL means:

• Hue
• Saturation
• Lightness

Example:

color: hsl(214, 90%, 44%);

HSL can make it easier to adjust the lightness or saturation of a color while keeping the same basic hue.

8. HSLA Colors

HSLA adds an alpha channel to HSL.

background-color: hsla(214, 90%, 44%, 0.5);

This allows you to create transparent versions of HSL colors.

9. Text Color

The color property changes the color of text.

body {
    color: #222;
}

h1 {
    color: #0b5ed7;
}

p {
    color: #4b5563;
}

When selecting text colors, make sure there is enough contrast between the text and its background.

10. Background Color

The background-color property sets the background color of an element.

.hero {
    background-color: #0b5ed7;
    color: white;
}

Background colors are commonly used for headers, cards, buttons, navigation sections and hero areas.

11. Background Images

CSS can display an image as the background of an element.

.hero {
    background-image: url("hero.jpg");
}

The image can be combined with other background properties.

12. Background Repeat

By default, some background images can repeat across an element.

You can control this using background-repeat.

.hero {
    background-repeat: no-repeat;
}

Other values include:

• repeat
• repeat-x
• repeat-y
• no-repeat

13. Background Size

The background-size property controls how large a background image appears.

.hero {
    background-size: cover;
}

cover makes the background image cover the entire element while maintaining its aspect ratio.

Another common value is:

background-size: contain;

contain attempts to display the entire image within the element.

14. Background Position

The background-position property controls where the background image is positioned.

.hero {
    background-position: center;
}

Other values include:

top
bottom
left
right
center

You can also combine positions:

background-position: center top;

15. Background Attachment

The background-attachment property controls how a background image behaves when the page scrolls.

.hero {
    background-attachment: fixed;
}

Common values include:

• scroll
• fixed
• local

16. Background Shorthand

Several background properties can be combined using the background shorthand.

.hero {
    background:
        #0b5ed7
        url("hero.jpg")
        center / cover
        no-repeat;
}

Shorthand properties can make CSS shorter, but beginners should understand the individual properties first.

17. CSS Gradients

Gradients allow colors to transition smoothly from one color to another.

Example:

.hero {
    background: linear-gradient(
        135deg,
        #0b5ed7,
        #063b8f
    );
}

A radial gradient can also be used:

.hero {
    background: radial-gradient(
        circle,
        #0b5ed7,
        #063b8f
    );
}

Gradients are commonly used in hero sections, buttons, cards and modern interfaces.

18. Typography

Typography refers to the visual presentation of text.

Good typography improves readability, hierarchy and the overall appearance of a website.

Important CSS typography properties include:

• font-family
• font-size
• font-weight
• font-style
• line-height
• text-align
• text-decoration
• text-transform
• letter-spacing
• word-spacing

19. Font Family

The font-family property controls which font is used.

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

It is common to provide several fonts as a fallback list.

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

If the first font is unavailable, the browser attempts to use the next font.

20. Generic Font Families

Common generic font families include:

• serif
• sans-serif
• monospace
• cursive
• fantasy

For modern web interfaces, sans-serif fonts are commonly used for clean and readable layouts.

21. Font Size

The font-size property controls the size of text.

h1 {
    font-size: 42px;
}

p {
    font-size: 16px;
}

CSS also supports relative units such as rem, em and percentages.

22. Pixels vs Relative Units

Pixels are fixed CSS units:

font-size: 18px;

Relative units can make interfaces more flexible.

font-size: 1rem;

rem is relative to the root element’s font size.

em is relative to the font size of the relevant parent context.

23. Font Weight

The font-weight property controls how thick text appears.

h1 {
    font-weight: 700;
}

p {
    font-weight: 400;
}

Common numeric values include:

• 300 — light
• 400 — normal
• 500 — medium
• 600 — semi-bold
• 700 — bold

24. Font Style

The font-style property controls whether text is normal or italic.

em {
    font-style: italic;
}

You can also explicitly set:

font-style: normal;

25. Line Height

The line-height property controls the vertical space between lines of text.

p {
    line-height: 1.7;
}

A comfortable line height can significantly improve the readability of long paragraphs.

26. Text Alignment

The text-align property controls horizontal text alignment.

h1 {
    text-align: center;
}

Common values include:

• left
• center
• right
• justify

27. Text Decoration

The text-decoration property controls decorative lines around text.

a {
    text-decoration: none;
}

This is commonly used to remove the default underline from navigation links.

You can also create an underline:

.important {
    text-decoration: underline;
}

28. Text Transform

The text-transform property changes the capitalization of text.

.uppercase {
    text-transform: uppercase;
}

Other values include:

lowercase
capitalize
none

29. Letter Spacing

The letter-spacing property controls the spacing between characters.

.logo {
    letter-spacing: 2px;
}

It can be useful for headings, navigation labels and branding.

However, excessive letter spacing can make text difficult to read.

30. Word Spacing

The word-spacing property controls the space between words.

.heading {
    word-spacing: 6px;
}

31. Text Indent

The text-indent property controls the indentation of the first line of a block of text.

p {
    text-indent: 30px;
}

32. Text Shadow

The text-shadow property adds a shadow effect to text.

h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}

Text shadows should be used carefully because excessive effects can reduce readability.

33. Typography Hierarchy

A professional webpage normally uses different text sizes and weights to create visual hierarchy.

For example:

h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

h2 {
    font-size: 2rem;
    font-weight: 700;
}

h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

p {
    font-size: 1rem;
    line-height: 1.7;
}

This allows users to understand the structure of the content quickly.

34. Color Contrast

Text must have sufficient contrast against its background.

For example:

.good {
    background: #ffffff;
    color: #222222;
}

This generally provides strong contrast.

By contrast, placing light gray text on a white background can make the content difficult to read.

When designing websites, always consider accessibility and readability.

35. Typography for Navigation

Navigation menus often require clear and consistent typography.

nav a {
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: #1f2937;
}

nav a:hover {
    color: #0b5ed7;
}

This creates a simple navigation style with a visual hover state.

36. Typography for Buttons

Buttons should have clear labels and readable text.

.btn {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

Typography should support the purpose of the button rather than distract from it.

37. CSS Custom Properties for Colors

Modern websites can store commonly used colors in CSS custom properties.

:root {
    --primary: #0b5ed7;
    --dark: #111827;
    --light: #f8fafc;
    --text: #374151;
}

body {
    color: var(--text);
}

.button {
    background-color: var(--primary);
}

This makes it easier to maintain a consistent design system.

38. Creating a Simple Design System

A website can define a small set of colors and typography rules.

:root {
    --primary: #0b5ed7;
    --primary-dark: #063b8f;
    --text: #1f2937;
    --muted: #6b7280;
    --surface: #ffffff;
    --background: #f5f7fb;
}

body {
    font-family: Arial, sans-serif;
    color: var(--text);
    background: var(--background);
}

h1,
h2,
h3 {
    color: var(--primary-dark);
}

p {
    color: var(--muted);
    line-height: 1.7;
}

This approach helps create consistency across multiple pages.

39. Practical Example

Here is a simple course card using colors, backgrounds and typography:

.course-card {
    background: #ffffff;
    color: #1f2937;
    padding: 24px;
    border-radius: 12px;
}

.course-card h3 {
    color: #0b5ed7;
    font-size: 1.5rem;
    font-weight: 700;
}

.course-card p {
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.7;
}

.course-card a {
    color: #0b5ed7;
    font-weight: 600;
    text-decoration: none;
}

.course-card a:hover {
    color: #063b8f;
    text-decoration: underline;
}

40. Practical Exercise

Create a course landing page with:

• A large hero heading.
• A short paragraph.
• A call-to-action button.
• Three course cards.
• A footer section.

Apply the following:

1. Use a consistent primary color.
2. Use a lighter background for the page.
3. Use a different color for secondary text.
4. Create a typography hierarchy for headings.
5. Set a comfortable line height for paragraphs.
6. Add a hover effect to the button.
7. Use a gradient for the hero background.
8. Use CSS custom properties for your main colors.

41. Code Challenge

Build a Dwallnet-style course hero section with the following requirements:

• Dark blue gradient background.
• White heading text.
• Readable paragraph text.
• Bright primary button.
• Responsive text sizing.
• Hover effect on the button.
• Consistent font family.

Start with:

<section class="hero">
    <div class="hero-content">
        <p class="eyebrow">DWALLNET TECHNOLOGIES</p>
        <h1>Build Your Digital Future</h1>
        <p>
            Learn practical technology skills through
            structured hands-on training.
        </p>
        <a href="#" class="hero-button">Explore Courses</a>
    </div>
</section>

Then create the CSS styling yourself.

42. Lesson Summary

Colors and typography are essential parts of modern web design. CSS provides several ways to define colors, including named colors, hexadecimal, RGB, RGBA, HSL and HSLA.

Background properties allow developers to control background colors, images, gradients, positioning, repetition and sizing.

Typography properties control font families, sizes, weights, styles, line heights, alignment, decoration, transformation and spacing.

A good design uses color contrast, consistent typography and visual hierarchy to make information easier to understand.

CSS custom properties can also be used to create a reusable design system that keeps colors and other values consistent throughout a website.