3.1 Flex Section

Unit 6 Website Development - Tutorial 3

3.1 Build a Flex Section

First add the HTML in small steps. Then style the section afterwards using small CSS chunks.

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.

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

flex-section
|
|-- index.html
`-- style.css

What this does

flex-section is the project folder.
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>Flex Section</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.
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>Flex Section</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.

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 flex section in this tutorial.

Expected output

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

Step 5

Step 5 Add the section HTML

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

Code

<section class="alert-section">

</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.
alert-section is the class name used for this component.

Expected output

The section is empty, so there is still no visible text.

Step 6

Step 6 Add the heading and paragraph HTML

Where to put this code Add the h2 and p tags inside the section tag in index.html.

Code

<h2>Section 1</h2>
<p>This section uses flex to place the content neatly inside the main area.</p>

What this does

h2 creates the heading inside the section.
p creates the paragraph text inside the section.
Text content is now visible, but it has not been styled yet.

Expected output

Section 1

This section uses flex to place the content neatly inside the main area.

Step 7

Step 7 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.
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 flex to place the content neatly inside the main area.

Step 8

Step 8 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.
justify-content controls how content is positioned across the main axis.
center places the section in the centre horizontally.

Expected output

Section 1

This section uses flex to place the content neatly inside the main area.

Step 9

Step 9 Add padding inside main

Where to put this code Add these padding 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;
}

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.

Expected output

Section 1

This section uses flex to place the content neatly inside the main area.

Step 10

Step 10 Make the section use flex

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

Code

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

What this does

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

Expected output

Section 1

This section uses flex to place the content neatly inside the main area.

Step 11

Step 11 Style the section box

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

CSS to add inside the .alert-section rule

.alert-section {
    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: 80%;

    border-radius: 8px;
}

What this does

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

Expected output

Section 1

This section uses flex to place the content neatly inside the main area.

Step 12

Step 12 Remove the heading margin

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

Code

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

What this does

.alert-section h2 selects only the heading inside the alert section.
margin-top removes extra space above the heading.
margin-bottom removes extra space below the heading.

Expected output

Section 1

This section uses flex to place the content neatly inside the main area.

Step 13

Step 13 Remove the paragraph margin

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

Code

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

What this does

.alert-section p selects only the paragraph inside the alert section.
margin-top removes extra space above the paragraph.
margin-bottom removes extra space below the paragraph.

Expected output

Section 1

This section uses flex to place the content neatly inside the main area.

Final code

Final index.html

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

<body>

    <main>
        <section class="alert-section">
            <h2>Section 1</h2>
            <p>This section uses flex to place the content neatly 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;

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

.alert-section {
    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: 80%;

    border-radius: 8px;
}

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

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