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 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 <head> 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

Previous Lesson Index Next Lesson