Linking CSS to HTML
As already explained, CSS contains information about how your markup (usually HTML) should be presented to the end user. That means that the two languages have to be linked together - the browser needs to know that you want to combine a piece of HTML markup with a piece of CSS code. To obtain the highest level of flexibility, there are several ways to accomplish this.
Inline CSS through the Style attribute
Almost every HTML tag includes the Style attribute and using this attribute, you can specify CSS directly for the element. This defeats one of the main advantages of CSS, re-usability, since CSS code applied with this technique only applies to a single element and can't be re-used for other elements.
It is however a great way to test things out, or to specify rules which you do not expect ever to re-use. Here's how it may be used:
<span style="color: Blue; text-decoration: underline;">Hello, CSS!</span>Notice that I can define several properties for the same element, in this case rules for text color as well as text decoration. This is by far the easiest way to use CSS, since it doesn't involve extra tags or files - just locally defined CSS. However, for reasons already stated, this is not the preferred way of using CSS.
Another disadvantage is the fact that the style code will have to be downloaded each time the page is requested. This is not really a problem for a single element with a couple of style rules, but if you have a loop which outputs the same style attribute code many times, then it fills up your markup document unnecessarily, and instead of being cached by the browser and only downloaded once per visitor, the code is downloaded again and again!
Document wide CSS through style blocks
The second easiest way to apply CSS to elements in your document is through the use of a style block. HTML includes a tag called style, which can contain CSS code. Here, you can define rules which can then be used all across your document. Here's an example:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<style type="text/css">
.highlight {
color: Blue;
text-decoration: underline;
}
</style>
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>Notice how I can now define the rule in one place and then re-use it multiple times in the document. You can define multiple style blocks, if you want to, and place them wherever in the document you want to. It is however considered best practice to include the style block(s) in the top of the document, inside the head (<head>) section.
Global CSS through external CSS documents
So, by using the style block as described above, you can re-use your CSS code all over the document, but you still have to include it on all of the pages of your website, which requires the browser to download it on each request instead of just downloading an external CSS file once and then cache it. This is a major disadvantage of the style block approach and why you should normally go for the third approach instead: The external CSS file!
A CSS file is simply a plain text file saved with a .css extension and then referenced in the file(s) where you want to apply the rules. If we re-use the example from the style block part, we can then move the "highlight" rule to a new file (without the HTML part) and save it under an appropriate name, e.g. style.css:
.highlight {
color: Blue;
text-decoration: underline;
}We can then reference it in our HTML document, using the link element:
<!DOCTYPE html>
<html>
<head>
<title>Style blocks</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
This is a piece of <span class="highlight">text</span> with <span class="highlight">highlighted</span> elements in <span class="highlight">it</span>.
</body>
</html>This example requires the HTML and CSS file to be in the same directory - if they are not, you need to update the href attribute to match the path.
Now we define all of our CSS code in its own file and then just reference it inside all of our sub pages to take advantage of the defined rules! If you want to, you can divide your CSS code into several external files and only include the ones you need - it all depends on how big your website is and how you prefer to organize your code.
Summary
We have talked about different ways for your webpage to consume CSS code in this chapter.
The first approach was the inline style attribute. Its biggest advantage is the fact that its so easy to use, but as a disadvantage, it cuts you off from some of the biggest benefits of CSS: Code re-usability and the ability to make layout changes in a single place and have it applied across your entire website.
The second approach uses the style block. It's only slightly less cumbersome to use than the inline style attribute, and allows re-using your CSS code. The biggest disadvantage is that code in a style block is global across the page, but not across multiple pages, meaning that you will have to include it on each subpage of your website.
The third approach is the one you most commonly see on websites: External CSS file(s). It only has the disadvantage of being slightly harder to work with, because you have to place the CSS in a separate file which you will have to open to make changes - a very small price to pay for the ability to re-use your CSS across your entire website!
Please be aware that throughout this tutorial, I will mainly be using the second and the first approach, but only because the examples presented in this tutorial are all small, separate entities and not a big website. It's simply a lot easier to demonstrate the various CSS properties this way, instead of having to separate markup and CSS into distinct files and explaining this fact each time. You are free to use the approach you prefer, but for anything other than small examples and very simple websites, the third approach is usually the superior way!