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.
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.
<link type="text/css" rel="stylesheet" href="lounge.css">
Remember, this <link> element tells the browser to look for an external stylesheet called
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%;
Search WWH ::

Custom Search