Last week you learned that styles give exquisite control over how text in an HTML file is displayed by a web browser. However, you no doubt also learned that the actual task of using styles can be cumbersome. You used inline styles—style statements that were specific to only one HTML tag, because they were entered into the individual HTML tag as attributes. If you wanted to use a style again, you had to enter it again. And again. Every time you wanted to use the style, you had to enter it as if your computer had never seen it before. You probably wished for a more convenient way to harness the power of styles.
That’s the topic of this week’s lesson.
A style sheet is a place where you can define a style once so that you can refer to it again and again in your HTML document. It helps you keep a consistent format with minimal typing, providing minimal opportunities to make mistakes. What’s not to like about that?
There are two types of style sheets: internal and external. An internal style sheet is part of an HTML document. It defines styles for use within that document. An external style sheet is a stand-alone document that defines styles that can be used by any HTML file. If all the web pages in a web site refer to the same external style sheet, they all can have the same look. Even better, if you want to change the look of the entire web site, only the external style sheet needs to be modified.
Both internal and external style sheets are written in the language CSS, which stands for Cascading Style Sheets. The “cascading” in the title refers to the fact that a single ducument may be controlled by more than one style sheet at a time, and that there are priority rules to determine which style prevails in a conflict.
You used CSS when coding style attributes in your HTML files. A style is specified by a list of property specifications. Each property specification is given as a name + colon (“:”) + propertyvalue. Property specifications are separated by semicolons. So, to code blue italic text, you would specify
font-style: italic; color: blue;
That is sufficient for inline styles, because an inline style controls only one element of an HTML file. For style sheets, which control many elemts, it is necessary to specify the element to which a style applies.
In a style sheet, the HTML element is named, followed by its property specification list in curly brackets. To specify, for instance, that all paragraphs display in red fifteen-point text, the style sheet would contain the statement
p {font-size: 15pt; color: red;}
But what if you don’t want all paragraphs to be displayed in blue fifteen-point test? What if you want to use default text for most paragraphs, and blue fifteen-point text only for paragraphs quoted from your favorite cookbook? This is easy to do using classes.
If you want to display some, but not all, of your paragraphs in blue fifteen-point type, you would define a class of paragraph that is blue with fifteen-point font. Let’s say you decide to call this class “cookbook.” Then your style sheet would contain the statement
p.cookbook {font-size: 15pt; color: blue;}
Then, every time you wanted a particular paragraph to display as cookbook class, you would specify this class in its opening tag: <p class="cookbook">. You would not need to define the format anew for each instance of the style. Even better, if you later decide that you want the cookbook paragraphs to display in a slightly darker, greener blue, you do not need to find each paragraph of that class and change its specification. All you need to do is change the class’s definition in the style sheet to
p.cookbook {font-size: 15pt; color: #0033CC;}
The last piece of information you need to actually implement this flexibility is how to set up an internal style sheet in your HTML document. The style sheet belongs in the head of your HTML document, right before the closing </head> tag. It is bracketed by a <style> </style> tag pair. For instance, here is an example of an internal style sheet specifying that most paragraphs are displayed in black Verdana eleven-point type, but that paragraphs of class “cookbook” are set in blue-green fifteen-point type:
<style type="text/css">
p {font-family: Verdana, Arial, sans serif; font-size: 11pt; color: #000000;}
p.cookbook {font-size: 15pt; color: #0066CC;}
</style>
In the body of the HTML file, any paragraph opened with a <p class="cookbook"> tag would be displayed in blue-green, fifteen-point, Verdana type.
Notice that this specification sets up a style conflict: general paragraphs are to be displayed in black eleven-point type, while cookbook paragraphs are to be displayed in blue-green fifteen-point type. This is no problem. The more specific class overrides the general definition where there is a conflict. The cookbook paragraphs are still set in fifteen-point Verdana font, which was set in the higher level and not overridden for the class.
Sub-classes do not exist. You cannot, for instance, define a class of paragraph to use Times font and then define different sub-classes of that class to display Times font in different sizes. Nor is it possible to assign an HTML element to more than one style. In other words, you cannot define one style that sets a different font-family than the default and another style that sets a different color than the default and then assign both styles to a paragraph to produce a paragraph in the new font face and the new color. These restrictions are not as bad as they may seem: it is possible to achieve something like this intended result using divisions and spans.
You have probably noticed a use of internal style sheets already: I have used them to define styles for the comments I inserted into your returned HTML homework files.
Open one of your old HTML files for editing. Place a style sheet into its head as described above, defining general paragraphs and a class of paragraph. In the body of the file, set several paragraphs to belong to the class you defined. Display your file in a browser, and see what the paragraphs look like.
Then, change the specifications for general paragraphs, or for your class, or both. Save the file, and refresh your browser window. See your changed specifications applied! Define yet another class of paragraph and set one or more paragraphs in your file to your new class. Save the file, and refresh your browser window. You should see all of your formatting styles implemented.
If you want to display text in different formats within a paragraph, spans are the tool for you. You have previously used spans to painstakingly format words or phrases by setting the style of each individual span. It is much more convenient to set span formats by using style sheets. In your style sheet, define a class of span, and then you need only to assign a span to that class to apply all the formatting of the class to the span. More importantly, you can then apply the formatting of that class to any number of spans in your document!
Let’s say that you want to occasionally format words in pink sixteen-point Papyrus font. You can call the class anything you want; let’s choose “pyrp”. Place the definition
span.pyrp {font-family: Papyrus, serif; font-size: 16pt; color: #CC0066;}
inside your internal style sheet, and then place all text you want styled that way between <span class="pyrp"> and </span> brackets. Then, typing
<span class="pyrp">Barbie’s Dream Vacation</span>
creates text that displays in a browser as Barbie’s Dream Vacation. You can format more text in the same way, using the class that you defined.
Define a class of span in your internal style sheet. Define several! Apply the styles to text in your file by using <span> </span> tags with class attributes. Apply the same styles to text in different places, in different paragraphs!
Although it is not possible to assign a span to two classes, it is possible to place a span of one class within a span of another class. This applies the formatting of both classes to the text within both.
Here is an example. We can define a span class to display text with a strike through it. To define this class, which we will call “strk”, we will include the line
span.strk {text-decoration: line-through;}
in the internal style sheet. Now, typing
“<span class="strk">Barbie’s Dream Monster Truck</span>”
creates text that displays as Barbie’s Dream Monster Truck. Enclosing that within a span of class pyrp,
“<span class="pyrp"><span class="strk">Barbie’ Dream Monster Truck</span></span>”
gives Barbie’s Dream Monster Truck. Both styles have been applied to the text. A slightly different result is obtained by putting the class “strk” span inside the class “pyrp” span: Barbie’s Dream Monster Truck. Here, the purple color is not applied to the strike mark.
To apply styles to more than one HTML page, use an external style sheet.
For a page depending on an external style sheet to display properly on a computer, the style sheet must be accessible to the computer. In general, this means that the style sheet must be posted on the web. (If the computer is not connected to the web, it simply won’t display the file properly. Period.) Since you may not be able to post style sheets to the web, to use this feature you will need to refer your HTML file to a style sheet that is already posted.
To refer your web page to an external style sheet, use a link tag in the head of the HTML file. A link tag refers the HTML file to an external resource; in this case, the external resource is a style sheet.
The consistent look of all the pages on the barransclass.com website is due to the style sheet that they all reference. Every web page on the site contains the following statement in its head:
<link href="http://www.barransclass.com/ClassStyle.css" rel="stylesheet">
This tells any browser displaying the HTML file that the file ClassStyle.css at the barransclass.com site is an external resource. The rel attribute explains the relationship of the external resource to the HTML file. In this case, rel="stylesheet", so the external resource is a style sheet for the HTML file.
There is a good chance that the link tag above already appears in the head of your HTML file, because it is included in the blank HTML template file from the first tutorial. It also appears in most of the pages in my web site. To see what your HTML file looks like without it, delete it or “comment it out” with <!-- --> brackets. See how your file displays.
To get a feel for what style sheets do, replace the address within the href attribute of the link tag with one of the following addresses to different external style sheets.
Your HTML-format project should reference my ClassStyle.css as its external style sheet. That way, all of the web pages from the class will have the same consistent format.
You should know about some of the classes already defined in that style sheet, so that you can use them if you wish.
| Span classes | |
|---|---|
| emph | orange italic |
| ital | italic |
| bf | bold-face |
| strong | bold yellow |
| sstrong | bold orange |
| imp | orange |
| Paragraph (<p>) classes | |
|---|---|
| cntr | centered text |
| just | justified text |
| cite | 11-point font |
| Image (<img>) classes | |
|---|---|
| box | navy border around the image |
You may use any or none of these styles as suit you.
If your HTML file references an external style sheet and also contains an internal style sheet, whichever one comes last overrides the prior one any time there is a conflict. So, if you want to define some additional styles just for your web page, define them in an internal style sheet. Place the internal style sheet in the head of your file, after the link statement referencing my ClassStyle.css sheet. That’s all there is to it!
Now you know all that you need to know to make classy, well-formatted web pages. You can organize your text with headings, and place text into paragraphs, tables, and lists. You can make links to web pages and display pictures. You can type special characters and create special formatting for any text you choose. You can give your file a standard look by linking it to an external style sheet.
That’s all you need to do to make the HTML file for your report!
Copyright © 2009, Richard Barrans
Revised: 9 November 2010. Maintained by Richard Barrans.
URL: http://www.barransclass.com/phys1090/labor/circus/htmlsn/stylesheets.html