Colours
Style different tags with different rules.
index.html
1<!doctype html>
2<html>
3 <head>
4 <title>Colours</title>
5 <link rel="stylesheet" href="style.css">
6 </head>
7 <body>
8 <h1>Deep Sea Diary</h1>
9 <p>Today I saw a glowing jellyfish.</p>
10 </body>
11</html>
style.css
1body {
2 background-color: navy;
3 color: white;
4}
5
6h1 {
7 color: gold;
8}
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>Colours</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>Deep Sea Diary</h1>- A heading to style.
<p>Today I saw a glowing jellyfish.</p>- And a paragraph.
</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.
background-color: navy;- A darker sea this time.
color: white;- color (one l, American spelling: CSS insists) sets the TEXT colour. Setting it on body sets it for the whole page, because tags inside inherit it.
}- The } closes the rule.
h1 {- A second rule, aimed only at <h1> tags. A stylesheet is a list of rules, checked top to bottom.
color: gold;- The body rule only reaches the heading by inheritance (colours trickle down), and a rule aimed straight at <h1> beats an inherited colour every time. So the heading goes gold while everything else stays white.
}- The } closes the rule.