Explanation Lesson #4

Add Navigation and h1 Tag

The nav element is another new addition in HTML5. You can use it just like a division to add a navigation device of any kind to your web page.

Our navigation device is constructed using anchor tags.

Adding a Page Heading

This is the proper use of the h1 tag. Remember, only one to a web page.

main h1 {
/* 24 to 36 px */
font-size: clamp(1.5rem, 1.5rem + .5dvw ,2.25rem) ;
/*Line-height is 1.2 to 1.5 X size of text */
line-height : clamp(1.8rem, 1.8rem + .5dvw ,2.7rem);
color : dodgerblue;
font-weight : 600;
margin: 2rem 0;
text-align: center
	}

Here we set font-size using the clamp function. The preferred (algorithm) will cause it to resize from 24 px to 36px.

Line-height is calculated at 1.2 times size of font.

Set color to dodgerblue. Set font-weight to 600 (could also use bold, normal and thin)

Added a 2rem(32px) margin top and bottom to create white space

Finally aligned it to center on page