Now you've learned the basics about HTML. We'll now look at how you can make the HTML, also called markup, look good.
The language for making HTML look good is called CSS, Cascading Style Sheets. It's created by the same group that made HTML, the W3C.
Defining colours
Create a file style.css and put the following in it:
h1 {
color: red;
}
This makes all the big <h1> headline elements red. We need to wire
up the CSS file from the HTML, so in your HTML file, we'll add a
<link/> element to tell the browser where to get the style
sheet. Since this is not content, but meta information about your web
page, it's put in the <head> element instead of <body>:
<html>
<head>
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<h1>My headline should be red</h1>
<h2>This header should have the browser default colours</h2>
</body>
</html>
Notice that this is an empty element, so the start tag ends with />
and there's no </link>. The <link> element is used for linking
lots of things to our web page, so we must tell it that it's a
stylesheet by using the rel (relation) attribute.
Now, the header should be red.
Page layout
We can apply style directives to the whole page too, by adding a
body block in the style.css file. This is useful for example for
defining margins for your page:
body {
margin-top: 10%;
margin-left: 5%;
margin-right: 5%;
margin-bottom: 10%;
}
Fonts
Another thing you might want to define for the entire web page, is the font to use. CSS allows you to define a list from which the browser can pick the first one it finds. At the end of the list, you should put a font-family which is one of: "serif", "sans-serif", "cursive", "fantasy" and "monospace".
body {
font-family: Verdana, Helvetica, sans-serif;
}
If there's a space in the font name, you must put the name in quotes
("Airy brush").
