Fonts and Sizes
Change what the letters themselves look like.
index.html
1<!doctype html>
2<html>
3 <head>
4 <title>Fonts</title>
5 <link rel="stylesheet" href="style.css">
6 </head>
7 <body>
8 <h1>BIG NEWS</h1>
9 <p>This just in: fonts are fun.</p>
10 </body>
11</html>
style.css
1body {
2 font-family: Arial, sans-serif;
3}
4
5h1 {
6 font-size: 60px;
7}
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>Fonts</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.
</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.
font-family: Arial, sans-serif;- font-family picks the typeface. It is a wish list: use Arial, and if this device doesn't have it, fall back to whatever sans-serif font it does have. (sans-serif means "without the little feet" on the letters.)
}- The } closes the rule.
h1 {- Another h1 rule.
font-size: 60px;- font-size sets how tall the letters are; px means pixels, the little dots your screen is made of. 60 of them makes a properly shouty headline.
}- The } closes the rule.