Linking a Stylesheet
Add a second file that controls how the page looks.
index.html
1<!doctype html>
2<html>
3 <head>
4 <title>My First Site</title>
5 <link rel="stylesheet" href="style.css">
6 </head>
7 <body>
8 <h1>Welcome to my site!</h1>
9 </body>
10</html>
style.css
1body {
2 background-color: lightblue;
3}
Every line, explained
<!doctype html>- <!doctype html> is the very first line of every real web page. It simply tells the browser "this is a modern HTML page"; it is a declaration, not a tag, so it never gets closed.
<html>- <html> is the root: every other tag on the page lives inside it. Intro to HTML skipped this wrapper; now you are writing pages the way the pros do.
<head>- <head> holds information ABOUT the page: its title, and links to other files. Nothing inside <head> is drawn on the page itself.
<title>My First Site</title>- <title> names the browser tab. Look at the tab bar of a real browser: every name you see there is one of these.
<link rel="stylesheet" href="style.css">- This line connects the stylesheet: rel="stylesheet" says what the file IS, href="style.css" says where it lives. From now on, everything in style.css shapes how this page looks. One page, two files, working together.
</head>- </head> closes the head. The visible part of the page comes next.
<body>- <body> holds everything you can actually see: all the tags you learned in Intro to HTML go in here.
<h1>Welcome to my site!</h1>- The page content, unchanged. Its LOOK is about to move to the other tab.
</body>- </body> closes the body.
</html>- </html> closes the root tag. Nothing comes after it.
body {- A CSS rule has two parts: a selector (which tags to style) and, between the curly braces, the declarations (what to change). The selector body means "style the <body> tag": the whole page. Click the file tabs above the editor to peek at either file.
background-color: lightblue;- A declaration: the property (background-color), a colon, the value (lightblue), and a semicolon to finish, like a full stop. CSS knows nearly 150 colour names, and lightblue is one of them.
}- The } closes the rule. Run the page: same HTML, new look. That is CSS's whole job: HTML says what things ARE, CSS says how they LOOK.