HTML and CSS Reference
In-Depth Information
Linking from “lounge.html” to the external stylesheet
Now we need a way to tell the browser that it should style this page with the
styles in the external stylesheet. We can do that with the HTML
<link>
element. Here's how you use the
<link>
element in your HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
Head First Lounge
</title>
<link type="text/css" rel="stylesheet" href="lounge.css">
<style>
</style>
Here's
the HT
ML t
hat lin
ks
to the
exter
nal sty
lesheet
.
</head>
<body>
<h1>
Welcome to the Head First Lounge
</h1>
<p>
<img src="drinks.gif" alt="Drinks">
</p>
.
.
.
</p>
</body>
</html>
The
rest o
f the
HTML
is the
same.
HTML Up Close
Let's take a closer look at the
<link>
element since you haven't seen it before:
<link type="text/css" rel="stylesheet" href="lounge.css">
The rel attribute specifies the re
lationship between the
HTML file and the thing you're
linking to. We're linking to
a stylesheet, so we use the value “
stylesheet”.
