One style file for many pages
There are three ways to add CSS. Inline CSS is written inside one element and only changes that element. Internal CSS sits in the head of one page and only changes that page. External CSS lives in a separate file with the ending .css, and many pages can link to it, so it is best for a whole site. The link line goes in the head: the part href gives the file name, and rel="stylesheet" says what kind of file it is. Look at the two pages in the pictures. Both link to the same style file. So both headings are dark green and both paragraphs use letters of size 18px. If you change one value in the style file, both pages change at once, which is the benefit “edit once, every page follows” from Lesson 1.
| Way | Where it is written | Covers |
|---|---|---|
| inline | inside one element | that element only |
| internal | in the head of a page | that one page |
| external | in a separate .css file | every page that links to it |
1<html> 2<head> 3 <link rel="stylesheet" href="style.css"> 4</head> 5<body> 6 <h1>Class garden diary</h1> 7 <p>We planted beans today.</p> 8</body> 9</html>
1h1 { 2 color: darkgreen; 3} 4p { 5 font-size: 18px; 6} 7
On paper, copy the style file and change one value. Then draw how page one and page two look before and after. Write one sentence that begins “Because both pages link to the same file…”. No device is needed.