Explanation Lesson #5 🌗

main h2 {
/*20px to 24px */
font-size: clamp(1.25rem , 1.25rem + .25dvw  ,1.5rem );
line-height : clamp( 1.5rem , 1.5rem + .25dvw  , 1.8rem );
text-align:center;
color:dodgerblue;
	}

main p {
text-align:left;
text-indent:1rem;
margin:1dvw 0}

main p.spacer {
display: block;
font-size : 2rem;
clear: both
	}

The H2 Tag

The first block of code defines the h2 tag

/*20px to 24px */
font-size: clamp(1.25rem , 1.25rem + .25dvw  ,1.5rem );
line-height : clamp( 1.5rem , 1.5rem + .25dvw  , 1.8rem );

Using the clamp function on mobile it displays as 20px. On desktop it displays as 24px. The preferred(algorithm) flexes between those two values.

line-height was calculated at 1.2 times size of text. The preferred line-height(algorithm) mirrors the preferred font-size.

text-align:center;

Aligns it to center of available space

color: dodgerblue;

Defines forecolor as dodgerblue

margin:1dvw 0;

Margins create space on the outside of the element (padding - inside). In this case it's 1% of viewport width top and bottom and zero left and right. Use margins to create white space between elements. Lack of white space will make your pages harder to read.

 

The Paragraph Tag

The second block of code further defines our paragraph tag. Font family, font-size and line-height were defined in the body declaration in the top of the style sheet.

text-align:left;

Aligns text to the left of the page

text-indent: 1rem;

Indents the first line of text 16 pixels. (more white space)

margin: 1dvw 0

once again we add 1% of viewport width margin top and bottom for more white space.

The Spacer

main p.spacer {
display: block;
font-size : 2rem;
clear: both
	}

The spacer is used in place of the line-break tag(br). It serves the same purpose but can be styled. All attributes for the br tag were deprecated in html5.