Flexbox Lesson #3

Completing Your Page Header

We're going to complete our web page header by adding some paragraph text.

To do this, we only need to add one line to our HTML code.

Then we'll define the appearance using our style sheet.

👉Note: We use a paragraph tag in our header and save the H1 tag for use in web page content. You should only use ONE h1 tag in any page. Use keywords in your h1 tag. A little SEO advice.

 

Third Exercise

Copy and Paste the code shown in drk red inside of the header element:

<header>

<p>My First Flexbox Page</p>

</header>

🔴 Save flex-tutorial.html

 

Define the paragraph tag in the header

We added a paragraph tag for our site header text to the html code. We need to define the text and locate it in the desired positions using the style sheet.

We're introducing a little known procedure of CSS which is Nesting Elements. Nested settings will only be applied in this case to paragraph tags in the header.

If you need a simple HTML editor that supports nesting in style sheets, grab a free copy of Geany. It is cross platform: Works on Windows, Linux and Apple.

Note: Your editor may not support nested elements, but your browser will.

 

Copy and paste the code into your style sheet.

Explanation below:

header { /*Begin Nested header*/
        background-color: dodgerblue;
        content-justify : left;
        align-items : left;
        p { /*nested paragraph*/
        font-size: clamp(1.25rem , 1dvw + 1rem , 2.25rem); /* Adjusts from 20px to 36px*/
        text-indent : 0;
        color:#fff;
        text-shadow : 1px 1px 2px #000;
           }
        } /* End nested header */

🔴 Save flex-tutorial.html

 

👀 Look at the HTML page with your browser.

The Result

You should see something similar to this image. Is so, you can proceed to the next lesson.

Explantion

Two lines are used to position the paragraph text in the header element:
content-justify : left;
align-items : left;

Once again we use the clamp function to define font-size.

 

Top