To include a style sheet in an HTML file, we use the link
element. <link>
is an empty element and goes inside the head
element.
<head>
<link>
</head>
<body>
<h1>Water Puns</h1>
<p>
Why does water never laugh at jokes?
It's not a fan of dry humor.
</p>
</body>
h1 {
color: red;
}
p {
color: blue;
}
To know what kind of file to include, the opening link
tag needs the rel
attribute set using rel="stylesheet"
.
<head>
<link rel="stylesheet">
</head>
<body>
<h1>Water puns</h1>
<p>Why are rivers amazing roommates? They go with the flow.
</p>
</body>
h1 {
color: red;
}
p {
color: blue;
}
To specify the style sheet's location, set the href
attribute to "style.css"
.
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Water Puns</h1>
<p>
Why are oceans so meticulous?<br>
They like to be pacific.
</p>
</body>
h1 {
color: red;
}
p {
color: blue;
}