3.2 Build Three 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 first section HTML
Add the second section HTML
Add the third 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 section boxes
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

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

What this does

three-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 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 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 section boxes.

Expected output

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

Step 5

Step 5 Add the first section HTML

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

Code

<section class="section-box">
    <h2>Section 1</h2>
    <p>This is the first section inside the main area.</p>
</section>

What this does

section creates a separate section of content inside main.
class gives the section a name so CSS can style it later.
h2 creates the heading inside the first section.
p creates the paragraph inside the first section.

Expected output

Section 1

This is the first section inside the main area.

Step 6

Step 6 Add the second section HTML

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

Code

<section class="section-box">
    <h2>Section 2</h2>
    <p>This is the second section inside the main area.</p>
</section>

What this does

section creates another section inside main.
class uses the same section-box class so both sections can share the same CSS.
h2 creates the heading inside the second section.
p creates the paragraph inside the second section.

Expected output

Section 1

This is the first section inside the main area.

Section 2

This is the second section inside the main area.

Step 7

Step 7 Add the third section HTML

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

Code

<section class="section-box">
    <h2>Section 3</h2>
    <p>This is the third section inside the main area.</p>
</section>

What this does

section creates the third section inside main.
class uses the same section-box class again so all three sections can share one CSS rule.
h2 creates the heading inside the third section.
p creates the paragraph inside the third section.

Expected output

Section 1

This is the first section inside the main area.

Section 2

This is the second section inside the main area.

Section 3

This is the third section inside the main area.

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 is the first section inside the main area.

Section 2

This is the second section inside the main area.

Section 3

This is the third section inside the main area.

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 is the first section inside the main area.

Section 2

This is the second section inside the main area.

Section 3

This is the third section inside the main area.

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.

CSS to add inside the main rule

main {
    gap: 20px;
}

What this does

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

Expected output

Section 1

This is the first section inside the main area.

Section 2

This is the second section inside the main area.

Section 3

This is the third section inside the main area.

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.

CSS to add inside the main rule

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 is the first section inside the main area.

Section 2

This is the second section inside the main area.

Section 3

This is the third section inside the main area.

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 is the first section inside the main area.

Section 2

This is the second section inside the main area.

Section 3

This is the third section inside the main area.

Step 13

Step 13 Style the section boxes

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

CSS to add inside the .section-box rule

.section-box {
    background-color: #ffe5e5;

    border-width: 2px;
    border-style: solid;
    border-color: red;

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

    width: 30%;

    border-radius: 8px;
}

What this does

background-color changes each section background to pale red.
border-width sets the thickness of each section border.
border-style makes each border a solid line.
border-color changes each border colour to red.
padding adds space inside each section.
width makes each section take up 30 percent of the main area.
border-radius rounds the corners of each section.

Expected output

Section 1

This is the first section inside the main area.

Section 2

This is the second section inside the main area.

Section 3

This is the third section inside the main area.

Step 14

Step 14 Remove the heading margins

Where to put this code Add this code into style.css under the .section-box 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 is the first section inside the main area.

Section 2

This is the second section inside the main area.

Section 3

This is the third section inside the main area.

Step 15

Step 15 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 is the first section inside the main area.

Section 2

This is the second section inside the main area.

Section 3

This is the third section inside the main area.

Final code

Final index.html

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

<body>

    <main>
        <section class="section-box">
            <h2>Section 1</h2>
            <p>This is the first section inside the main area.</p>
        </section>

        <section class="section-box">
            <h2>Section 2</h2>
            <p>This is the second section inside the main area.</p>
        </section>

        <section class="section-box">
            <h2>Section 3</h2>
            <p>This is the third section inside the main area.</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;

    background-color: #ffe5e5;

    border-width: 2px;
    border-style: solid;
    border-color: red;

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

    width: 30%;

    border-radius: 8px;
}

.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;
}