HTML and CSS Reference
In-Depth Information
Setting up the new lounge
Before we start the major construction, let's get familiar with the new lounge.
Here's what you need to do:
Take a look at the “chapter9/lounge” folder and you'll find the file “lounge.html”,
with all new content. Open the file in your editor and have a look around. Everything
should look familiar: head, paragraphs, a few images, and a list.
1
You're going to spend most of this chapter adding style to this HTML, so you need a
place for your CSS. You're going to create all new styles for the lounge in the stylesheet
file “lounge.css”, so you'll find your
<link>
element in the
<head>
of “lounge.html” is
still there, but the previous version of “lounge.css” stylesheet is gone.
2
<link type="text/css" rel="stylesheet" href="lounge.css">
Remember, this
<link>
element tells the browser to look for an external stylesheet called
“lounge.css”.
3
Next, you need to create the new “lounge.css” in the “chapter9/lounge” folder. This file is
going to hold all the new CSS for the new lounge.
Starting with a few simple upgrades
Now you're all ready to start styling the lounge. Let's add a few
rules to your CSS just to get some basics out of the way
—
like the
font family, size, and some color
—
that will immediately improve
the lounge (and give you a good review from the last chapter). So,
open your “lounge.css” file and add the following rules.
He
re's t
he de
fault
font
si
ze for
the
page.
body {
font-size: small;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
h1, h2 {
color: #007e7e;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 130%;
}
