CSS, short for Cascading Style Sheets, gives an HTML page its finishing touches. HTML supplies the structure—headings, paragraphs, and lists—while CSS tells the browser how those pieces should look. A style can change typeface, color, size, layout, or even animated effects. Think of HTML as a house frame and CSS as the paint, flooring, and trim. section 1.4 section 1.23
CSS works through rules. A rule first selects the page element to affect, then places one or more instructions inside braces. Each instruction is a declaration: a property, a colon, a value, and a semicolon. For example, color controls text color, font-size controls text size, and margin controls surrounding space. section 1.17 section 7.4
Style every main heading
h1 { font-size: 36px; } Here h1 is the selector, font-size is the property, and 36px is the value. The browser applies the rule to every h1 heading on the page. That keeps repeated headings consistent, and changing one value updates them all. section 1.19
<style>
selectorA { #3 #2
propertyA1: valueA1; #1
propertyA2: valueA2; #1
... #3
} #2
selectorB { #4
propertyB1: valueB1; #4
propertyB2: valueB2; #4
... #4
} #4
...
</style>
Use this rule-shaped template to spot the selector, braces, and declarations in an internal style sheet. section 7.4
CSS rules can be placed in several useful locations:
- Inline: directly on an HTML tag with its style attribute. section 7.12
- Internal: inside a style element in the page head. section 7.4
- External: in a separate .css file connected with a link tag. section 7.12
As pages grow, rules can overlap. CSS resolves that tangle through inheritance, the cascade, and specificity. Styles may come from browser defaults, user settings, or style sheets; when competing declarations apply, source order and selector specificity help determine what the browser renders. section 19.22 section 19.30
Try a small change
Write a rule for h2 headings with font-size: 30px;. Then add a second declaration, such as a color or margin, inside the same braces. You are giving one selector several coordinated instructions. section 1.19 section 1.17
