How to Create a Web Page with HTML5 and CSS

📖 Add Paragraph Tag and Style sheet Settings

You should complete these lessons in order. If you haven't completed the first exercise, go back and start there.

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 1 line of code to our HTML page.

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

Third Exercise

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

<header>

<p>My First Web Page</p>

</header>

🔴 Save myfirstpage.html

👀  Look at it in your browser if you want to see how it displays before you add the style settings.

Define the header's paragraph tag

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.

The next block of CSS code defines the appearance of the text of the p tag and then positions it within the header element.

Copy and paste the code into your style sheet.

Explanation below:

header p {
	font-size: clamp(1.5rem  , 1.5rem + .5dvw , 2.25rem) ; 
	line-height : clamp ( 1.8rem , 1.8rem + .5dvw ,  2.7rem); 
	text-indent : 0;
	text-align : left;
	color:#fff;
	text-shadow:2px 2px 4px #000}

🔴 Save myfirstpage.html

👀 Preview in the browser.

Refresh or reload if the page is already open.

See Result...

The Result

header p {
/* 24 to 36 px */
font-size: clamp(1.5rem, 1.5rem + .5dvw ,2.25rem) ; 
/*line-height 1.2 to 1.5 X size of text */
line-height: clamp (1.8rem, 1.8rem + .5dvw ,2.7rem); 
text-indent : 0;
text-align : left;
color:#fff;
text-shadow:2px 2px 4px #000}

font-size: clamp(1.5rem  , 1.5rem + .5dvw , 2.25rem) ;

font-size: clamp(1.5rem , 1.5rem + .5dvw , 2.25rem) ;

 1.5rem + .5dvw

👉  Explanation

Were you successful?

The display may vary in appearance depending on the width of your browser window and the viewing resolution.

If you don't see something similar, check the code that you added to your HTML page and style sheet.

The exact order of placing entries in your style sheet isn't critical except for the first and second blocks.

You should try to keep it organized by placing container definitions with container definitions and text definitions with text definitions. Or learn to use the newer nesting technique demonstrated in our Flexbox Tutor.

We'll show you a practical order for placement as we go along.

Ready to Proceed

When you get everything working with the desired result in your browser, you are ready to proceed to the next exercise.

Don't be afraid to delete all your work and start over from the beginning!

Don't go on unless you have a basic understanding of the procedures presented so far.

Top