There are three different ways to apply CSS to an HTML document that you'll commonly
come across, some
more useful than others. Here we'll briefly review each one.
External stylesheet
You've already seen external stylesheets in this article, but not by that name. An
external stylesheet is
when you have your CSS written in a separate file with a .css extension, and you reference it from an HTML
<link>
element. The HTML file looks something like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello!</h1>
<p>This is CSS example</p>
</body>
</html>
And the CSS file:
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
This method is arguably the best, as you can use one stylesheet to style multiple
documents, and would
only need to update the CSS in one place if changes were needed.
Internal stylesheet
An internal stylesheet is where you don't have an external CSS file, but instead place
your CSS inside a
<style>
element, contained inside the HTML head. So the HTML would
look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
<body>
<h1>Hello!</h1>
<p>This is CSS example</p>
</body>
</html>
This can be useful in some circumstances (maybe you're working with a content
management system where you
can't modify the CSS files directly), but it isn't quite as efficient as external stylesheets — in a
website, the CSS would need to be repeated across every page, and updated in multiple places if changes
were required.
Inline styles
Inline styles are CSS declarations that affect one element only, contained within a
style attribute:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue;">Hello!</h1>
<p>This is CSS example</p>
</body>
</html>
Please don't do this, unless you really have to! It is really bad for maintenance (you
might have to
update the same information multiple times per document), and it also mixes your presentational CSS
information with your HTML structural information, making the CSS harder to read and understand. Keeping
your different types of code separated and pure makes for a much easier job for all who work on the code.
The only time you might have to resort to using inline styles is when your working
environment is really
restrictive (perhaps your CMS only allows you to edit the HTML body.)