Meet CSS

CSS describes how structured content is presented. It can control color, type, spacing, layout, motion, and adaptation across devices without changing the meaning in the HTML.

Start coding CSS

CSS needs an HTML page to style. In the same first-site folder as index.html:

• Create a plain-text file named styles.css.
• Add the stylesheet link below inside the HTML head.
• Add the first CSS rule to styles.css.
• Save both files and refresh index.html in the browser.
• Open browser developer tools and inspect an element to see which rules apply.

Connect a stylesheet

01<link rel="stylesheet" href="styles.css" />

Place the link in the document head. The browser downloads the file and applies matching rules to the page.

01body {
02  background: #f7f6f8;
03  color: #211a25;
04  font-family: system-ui, sans-serif;
05}

A rule contains a selector and declarations. Each declaration has a property, a value, and a semicolon.

Let the cascade work

CSS is designed for shared defaults plus targeted exceptions. Start broadly, then make specific changes only where the design requires them.

01body { line-height: 1.6; }
02h1, h2 { line-height: 1.1; }
03a { color: rebeccapurple; }

Keep this

Keep structure in HTML, presentation in CSS, and write small rules that make the intended relationship obvious.