3.3 Build Three Styled Flex Sections

How To Use This Tutorial

Work through each step in order. Add the code shown, check the expected output, then move to the next step. The final code is visible at the bottom so you can compare your finished work.

Steps

Create the project files
Add the basic HTML page structure
Link the external CSS file
Add the main area HTML
Add the red section HTML
Add the amber section HTML
Add the green section HTML
Style the body
Make main use flex
Add a gap between the sections
Add padding and background to main
Make each section use flex
Style the shared section boxes
Add the red section colours
Add the amber section colours
Add the green section colours
Remove the heading margins
Remove the paragraph margins

Step 1

Step 1 Create the project files

Where to put this code Create these files inside a new project folder. This step is not typed into the HTML file.

Code

styled-flex-sections
|
|-- index.html
`-- style.css

What this does

styled-flex-sections is the project folder for this tutorial.
index.html will contain the webpage structure.
style.css will contain the CSS styling rules.

Expected output

No webpage output yet. You have only created the files.

Step 2

Step 2 Add the basic HTML page structure

Where to put this code Add this code into index.html. This creates the starting HTML page.

Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three Styled Flex Sections</title>
</head>

<body>

</body>
</html>

What this does

DOCTYPE html tells the browser that this is an HTML5 webpage.
head stores information about the webpage.
title sets the text shown on the browser tab.
body is where the visible webpage content will go.

Expected output

The page is blank because no visible content has been added yet.

Step 3

Step 3 Link the external CSS file

Where to put this code Replace the current head section in index.html with this updated head section.

Code

<head>
    <meta charset="UTF-8">
    <title>Three Styled Flex Sections</title>
    <link rel="stylesheet" href="style.css">
</head>

What this does

link connects the HTML file to another file.
rel tells the browser that the linked file is a stylesheet.
href tells the browser the name of the CSS file.
style.css will control how the webpage looks.

Expected output

The page is still blank because there is no visible content yet.

Step 4

Step 4 Add the main area HTML

Where to put this code Add the main tag inside the body tag in index.html.

Code

<main>

</main>

What this does

main creates the main content area of the webpage.
main will hold the three coloured sections.

Expected output

The main area is empty, so there is still no visible content yet.

Step 5

Step 5 Add the red section HTML

Where to put this code Add this first section inside the main tag in index.html.

Code

<section class="section-box red-section">
    <h2>Section 1</h2>
    <p>This section uses a red theme for warning or important information.</p>
</section>

What this does

section creates the first content section inside main.
section-box is a shared class that will style all three sections.
red-section is a specific class that will give this section its red theme.
h2 creates the section heading.
p creates the paragraph text.

Expected output

Section 1

This section uses a red theme for warning or important information.

Step 6

Step 6 Add the amber section HTML

Where to put this code Add this second section inside the main tag, under the red section.

Code

<section class="section-box amber-section">
    <h2>Section 2</h2>
    <p>This section uses an amber theme for reminders or useful notes.</p>
</section>

What this does

section creates the second content section inside main.
section-box uses the same shared class as the first section.
amber-section is a specific class that will give this section its amber theme.
h2 creates the section heading.
p creates the paragraph text.

Expected output

Section 1

This section uses a red theme for warning or important information.

Section 2

This section uses an amber theme for reminders or useful notes.

Step 7

Step 7 Add the green section HTML

Where to put this code Add this third section inside the main tag, under the amber section.

Code

<section class="section-box green-section">
    <h2>Section 3</h2>
    <p>This section uses a green theme for success or positive information.</p>
</section>

What this does

section creates the third content section inside main.
section-box uses the same shared class as the first two sections.
green-section is a specific class that will give this section its green theme.
h2 creates the section heading.
p creates the paragraph text.

Expected output

Section 1

This section uses a red theme for warning or important information.

Section 2

This section uses an amber theme for reminders or useful notes.

Section 3

This section uses a green theme for success or positive information.

Step 8

Step 8 Style the body

Where to put this code Add this code into style.css.

Code

body {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    color: #222222;
}

What this does

body selects the whole visible webpage.
margin-top removes the browser gap at the top.
margin-right removes the browser gap on the right.
margin-bottom removes the browser gap at the bottom.
margin-left removes the browser gap on the left.
font-family changes the font used on the webpage.
background-color changes the page background to light grey.
color changes the normal text colour to dark grey.

Expected output

Section 1

This section uses a red theme for warning or important information.

Section 2

This section uses an amber theme for reminders or useful notes.

Section 3

This section uses a green theme for success or positive information.

Step 9

Step 9 Make main use flex

Where to put this code Add this code into style.css under the body CSS.

Code

main {
    display: flex;
    justify-content: center;
}

What this does

main selects the main content area.
display turns the main area into a flex container.
flex allows the three sections to sit side by side.
justify-content controls how content is positioned across the main axis.
center places the group of sections in the centre horizontally.

Expected output

Section 1

This section uses a red theme for warning or important information.

Section 2

This section uses an amber theme for reminders or useful notes.

Section 3

This section uses a green theme for success or positive information.

Step 10

Step 10 Add a gap between the sections

Where to put this code Add this gap line inside the existing main CSS rule in style.css.

Code

main {
    gap: 20px;
}

What this does

gap adds space between flex items.
20px creates a clear gap between each section.
main is the flex container, so the gap is applied between the sections inside it.

Expected output

Section 1

This section uses a red theme for warning or important information.

Section 2

This section uses an amber theme for reminders or useful notes.

Section 3

This section uses a green theme for success or positive information.

Step 11

Step 11 Add padding and background to main

Where to put this code Add these padding and background lines inside the existing main CSS rule in style.css.

Code

main {
    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;

    background-color: #cccccc;
}

What this does

padding-top adds space inside the top of main.
padding-right adds space inside the right side of main.
padding-bottom adds space inside the bottom of main.
padding-left adds space inside the left side of main.
background-color changes the main area background to grey.

Expected output

Section 1

This section uses a red theme for warning or important information.

Section 2

This section uses an amber theme for reminders or useful notes.

Section 3

This section uses a green theme for success or positive information.

Step 12

Step 12 Make each section use flex

Where to put this code Add this code into style.css under the main CSS.

Code

.section-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

What this does

.section-box selects every section with the class name section-box.
display turns each section into a flex container.
flex-direction controls the direction of the content inside each section.
column places the heading above the paragraph.
gap adds space between the heading and paragraph.

Expected output

Section 1

This section uses a red theme for warning or important information.

Section 2

This section uses an amber theme for reminders or useful notes.

Section 3

This section uses a green theme for success or positive information.

Step 13

Step 13 Style the shared section boxes

Where to put this code Add these style lines inside the existing .section-box CSS rule in style.css.

Code

.section-box {
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;

    width: 30%;

    border-width: 2px;
    border-left-width: 10px;
    border-style: solid;

    border-radius: 8px;
}

What this does

padding adds space inside each section.
width makes each section take up 30 percent of main.
border-width sets the normal border thickness.
border-left-width makes the left border thicker than the other sides.
border-style makes the border a solid line.
border-radius rounds the corners of each section.

Expected output

Section 1

This section uses a red theme for warning or important information.

Section 2

This section uses an amber theme for reminders or useful notes.

Section 3

This section uses a green theme for success or positive information.

Step 14

Step 14 Add the red section colours

Where to put this code Add this code into style.css under the .section-box CSS.

Code

.red-section {
    background-color: #ffe5e5;
    border-color: #8b0000;
    border-left-color: #c1121f;
    color: #7f1d1d;
}

What this does

.red-section selects only the section with the red-section class.
background-color changes the section background to light red.
border-color changes the normal border to dark red.
border-left-color changes the thick left border to a stronger red.
color changes the text colour to dark red.

Expected output

Section 1

This section uses a red theme for warning or important information.

Section 2

This section uses an amber theme for reminders or useful notes.

Section 3

This section uses a green theme for success or positive information.

Step 15

Step 15 Add the amber section colours

Where to put this code Add this code into style.css under the .red-section CSS.

Code

.amber-section {
    background-color: #fff3cd;
    border-color: #92400e;
    border-left-color: #f59e0b;
    color: #78350f;
}

What this does

.amber-section selects only the section with the amber-section class.
background-color changes the section background to light amber.
border-color changes the normal border to dark amber.
border-left-color changes the thick left border to a stronger amber.
color changes the text colour to dark amber.

Expected output

Section 1

This section uses a red theme for warning or important information.

Section 2

This section uses an amber theme for reminders or useful notes.

Section 3

This section uses a green theme for success or positive information.

Step 16

Step 16 Add the green section colours

Where to put this code Add this code into style.css under the .amber-section CSS.

Code

.green-section {
    background-color: #e7f7e7;
    border-color: #166534;
    border-left-color: #22c55e;
    color: #14532d;
}

What this does

.green-section selects only the section with the green-section class.
background-color changes the section background to light green.
border-color changes the normal border to dark green.
border-left-color changes the thick left border to a stronger green.
color changes the text colour to dark green.

Expected output

Section 1

This section uses a red theme for warning or important information.

Section 2

This section uses an amber theme for reminders or useful notes.

Section 3

This section uses a green theme for success or positive information.

Step 17

Step 17 Remove the heading margins

Where to put this code Add this code into style.css under the colour section CSS.

Code

.section-box h2 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}

What this does

.section-box h2 selects only headings inside the section boxes.
margin-top removes extra space above each heading.
margin-right removes extra space on the right of each heading.
margin-bottom removes extra space below each heading.
margin-left removes extra space on the left of each heading.

Expected output

Section 1

This section uses a red theme for warning or important information.

Section 2

This section uses an amber theme for reminders or useful notes.

Section 3

This section uses a green theme for success or positive information.

Step 18

Step 18 Remove the paragraph margins

Where to put this code Add this code into style.css under the .section-box h2 CSS.

Code

.section-box p {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}

What this does

.section-box p selects only paragraphs inside the section boxes.
margin-top removes extra space above each paragraph.
margin-right removes extra space on the right of each paragraph.
margin-bottom removes extra space below each paragraph.
margin-left removes extra space on the left of each paragraph.

Expected output

Section 1

This section uses a red theme for warning or important information.

Section 2

This section uses an amber theme for reminders or useful notes.

Section 3

This section uses a green theme for success or positive information.

Final code

Final index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three Styled Flex Sections</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <main>
        <section class="section-box red-section">
            <h2>Section 1</h2>
            <p>This section uses a red theme for warning or important information.</p>
        </section>

        <section class="section-box amber-section">
            <h2>Section 2</h2>
            <p>This section uses an amber theme for reminders or useful notes.</p>
        </section>

        <section class="section-box green-section">
            <h2>Section 3</h2>
            <p>This section uses a green theme for success or positive information.</p>
        </section>
    </main>

</body>
</html>

Final style.css

body {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    color: #222222;
}

main {
    display: flex;
    justify-content: center;
    gap: 20px;

    padding-top: 30px;
    padding-right: 30px;
    padding-bottom: 30px;
    padding-left: 30px;

    background-color: #cccccc;
}

.section-box {
    display: flex;
    flex-direction: column;
    gap: 10px;

    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;

    width: 30%;

    border-width: 2px;
    border-left-width: 10px;
    border-style: solid;

    border-radius: 8px;
}

.red-section {
    background-color: #ffe5e5;
    border-color: #8b0000;
    border-left-color: #c1121f;
    color: #7f1d1d;
}

.amber-section {
    background-color: #fff3cd;
    border-color: #92400e;
    border-left-color: #f59e0b;
    color: #78350f;
}

.green-section {
    background-color: #e7f7e7;
    border-color: #166534;
    border-left-color: #22c55e;
    color: #14532d;
}

.section-box h2 {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}

.section-box p {
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;
}