CS 100 (Learn) — CS 100 (Web) — Module 08
We have seen a short example of style, the "middle S" in CSS (Cascading Style Sheets), and now we are going to learn about the "last S" (Sheets).
The example we have seen was to add the style attribute to a <cite> tag:
According to the book <cite style="color: green;">Wild Birds</cite>...
According to the book Wild Birds...
There is nothing special about using the <cite> tag, we are just using it for this example. The style attribute can be applied to any HTML tag:
<ul style="color: red">
<li> Red
<li> Unordered List (ul)
</ul>
To continue this example, we want to make all <cite> elements in a document appear green. Consider the following example:
Bruce Banner (the Hulk) was played by Eric Bana in the movie <cite style="color: green;">Hulk</cite>,
but was replaced by Edward Norton for the movie <cite style="color: green;">The Incredible Hulk</cite>,
who was himself replaced by Mark Ruffalo in <cite style="color: green;">The Avengers</cite>.
Bruce Banner (the Hulk) was played by Eric Bana in the movie Hulk, but was replaced by Edward Norton for the movie The Incredible Hulk, who was himself replaced by Mark Ruffalo in The Avengers.
Adding the style property (style="color: green;") to every occurrence of the <cite> tag is a bit tedious.
Also, imagine that we change our mind and want the <cite> elements to be blue instead of green... we would have to find every occurrence of the <cite> tag and change it from green to blue.
It would be more convenient to style the tag once.
The <style> element (tag) is added to the header (<head>) section of an HTML document (after the <head> tag, but before the <body> tag).
Any style that appears in the <style> element is applied to the entire document.
For this example, we will add in the <html>, <head> and <body> tags to put the <style> tag in context. As with the style attribute, do not concern yourself with the syntax of the style element. We will discuss the syntax in another section.
<html>
<head>
<title>Hulkamania</title>
<style>
cite { color: green; }
</style>
<body>
<p>Bruce Banner (the Hulk) was played by Eric Bana in the movie <cite>Hulk</cite>,
but was replaced by Edward Norton for the movie <cite>The Incredible Hulk</cite>,
who was himself replaced by Mark Ruffalo in <cite>The Avengers</cite>.
Bruce Banner (the Hulk) was played by Eric Bana in the movie Hulk, but was replaced by Edward Norton for the movie The Incredible Hulk, who was himself replaced by Mark Ruffalo in The Avengers.
This has two primary advantages:
<cite>, it can be changed in only one place, and the entire document is updated.The style tag may look like an ideal solution, and it is much better than using the style attribute, but there is an even better approach.
To motivate this other approach, what if you want to change the style across an entire website, not just a single page? Even small websites typically have multiple pages. Larger websites can easily be thousands of web pages.
While using the <style> element may seem like a big step forward, in practice most web developers go one step further and put all of the style information in a separate file known as a Style Sheet.
Style Sheets are given the .css file extension.
To specify the .css file used from within an .html file, the <link> tag is used within the header section.
<link rel="stylesheet" href="filename.css">
The <link> tag indicates that a separate file is being used ("linked to"). The href attribute specifies the URL of the style sheet and follows the same rules as linking in HTML (for example, href="filename.css" assumes that the file is in the same folder). The rel attribute is required and specifies the relationship of the link (the file is a "stylesheet").
cite { color: green; }
<html>
<head>
<title>Hulkamania</title>
<link rel="stylesheet" href="myfile.css">
<body>
<p>Bruce Banner (the Hulk) was played by Eric Bana in the movie <cite>Hulk</cite>,
but was replaced by Edward Norton for the movie <cite>The Incredible Hulk</cite>,
who was himself replaced by Mark Ruffalo in <cite>The Avengers</cite>.
Bruce Banner (the Hulk) was played by Eric Bana in the movie Hulk, but was replaced by Edward Norton for the movie The Incredible Hulk, who was himself replaced by Mark Ruffalo in The Avengers.
The main benefit of .css files is they can be used by multiple .html files.
They are also useful to separate the content from the style even further. In practice the two files may be authored by different people. This can be quite liberating: A writer can focus on the content of the document without worrying about how it looks, and a designer can focus on the visual look of a document without worrying about the content.
The use of CSS files is so prevalent that most people refer to all HTML style simply as "CSS".
For brevity, we will generally refer to the syntax and behaviour of style sheets, but any styling that appears in a style sheet can also be included in a <style> element (tag).
You are probably curious about the "C" in CSS (Cascading), but first we need to better understand style sheets.