Lesson 7: Styling

Now that know how to make web pages, it’s time to make them look good – things like fonts, colours, and positioning things where you want them on the screen. That’s where CSS (Cascading Style Sheets) comes in.

HTML has some left-over garbage from the 90’s (when Microsoft and Netscape had their famous http://en.wikipedia.org/wiki/Browser_wars[browser war]) in the form of tags like <b>, <i>, <blink> and <font>. Don’t use them. CSS provides a much better way of achieving the same end results, and more.

Let’s get started.

Take your HTML resume, and add a single line in the tag, as shown here.

<head>
    <link rel="stylesheet" type="text/css" href="/style.css">
</head>

Now, in the same directory, create a new file called “style.css”, and enter the following text into it:

html, body {
    font-family: Verdana;
    font-size: 9px;
}

h1 {
    font-size: 150%;
}

h2 {
    font-size: 130%;
}

h3 {
    font-size: 120%;
}

Now open the resume, and check out the difference!

Maybe that’s a little too small for comfortable reading. Change “9px” to “14px”. Reload.

Now lets jazz up our headings.

html, body {
    font-family: Verdana;
    font-size: 13px;
}

h1 {
    font-size: 150%;
    color: #efdf00;
    text-align: right;
    border-bottom: solid gray 2px;
}

h2 {
    font-size: 130%;
    color: #efdf00;
    text-align: right;
    border-bottom: solid gray 2px;
}

h3 {
    font-size: 120%;
    color: #efdf00;
    text-align: right;
    border-bottom: solid gray 2px;
}

Practice

Have some fun with font sizes.
Play around with text-align. Valid values are “left”, “right”, “center”, and ”justify”.
Modify the borders. They can be solid, dotted, or dashed (or others too). They can have different colours. The width can be varied. And you can use border-top, border-left and border-right too.

Previous Lesson Index Next Lesson