HTML and CSS Reference
In-Depth Information
Once you have your CSS code in its own stylesheet file, you need to link it to your web page so that the browser
knows how to find it. You do this using the
<link>
element.
<link rel="stylesheet" href="style.css">
The link element uses two attributes to point the browser to your separate resources, such as stylesheets: the
rel
and
href
attributes. The
rel
attribute describes the relationship of the file that you are linking. The
href
attribute
tells the browser where it can locate the stylesheet file. In the previous example, the resource is a stylesheet, so the
rel
attribute will have the value
stylesheet
, and the
href attribute
points to a file named
style.css
.
Now that you have a basic understanding of what CSS does, you need to link a stylesheet to your page templates to
make them a bit easier on the eye.
The code for this exercise can be found in folder 12.
1.
Create a new folder in your project directory called
css
. Download the
style.css
file from the topic's
website (folder 12) and place it in the
css
folder.
2.
Create a new folder called
img
in your project directory. Download the image files from the topic's website
(folder 12,
img
folder) and place them in your new
img
folder. There should be two files:
bodyBg.png
and
featureBg.png
. These files are referenced in the CSS code.
3.
Open the
index.html
and
about.html
files in your text editor.
4.
Add the following
<link>
element to the
<head>
of your page templates.
<head>
<meta charset="utf-8">
<title>...</title>
<link rel="stylesheet" href="css/style.css">
...
</head>
5.
Save the files.
Now open the page templates in your web browser; you should see that there has been quite a transformation. It's
just like magic!
Figures 2-13 and 2-14 show how your page templates should look with the new CSS styling.
