Lesson #1 🌗

For information on the head section and meta tags see Basic HTML Page

Setting Up the Style Sheet

* {
margin:0 0 0 0;
padding:0 0 0 0}

The first block closes all gaps in your displayed code. It removes any default values for margins and padding for elements that you add to the code of the page.

body{

The second block of CSS defines the body section of the web page.

max-width: 100dvw;

Sets the maximum width that the page will spread out.

I've set it to 100% of the viewport width of the visiting device.

min-width: 22rem 0r 352px

Just means the page can be viewed at 360px without scrolling to the right.

font-family: Helvetica , Arial, verdana , sans-serif;

Defines the default font settings for the web page.

If we define the default font-family at the top of the style sheet we can experiment with the different font faces by simply changing their order.

Place your preferred choice first in the list.

/*font-size flexes from 20px to 22px*/ 
font-size: clamp(1.25rem, 1.25rem + .25dvw ,1.375rem); 

/*line height should be 1.2 to 1.5 X size of font*/ 
line-height: clamp(1.5rem, 1.5rem + .25dvw ,1.65rem);

font-style:normal;
font-weight:normal;

color: #444;

We set font-size and line-height using the clamp function.

If you're serious about learning modern web design focus on understanding the use of the clamp function.

Defines the default color of text elements like paragraphs if not specified.

background-color: whitesmoke

Defines the background color of the page. Could also be defined using hexidecimal or RGB code.