CS412

Subunit 3.2: The Saylor Foundation’s “Interactive CSS Laboratory”

Introduction

As you have seen in the materials presented so far, a cascading style sheet (CSS)
provides a convenient way to specify the styles for a web page. Cascading style sheets
are composed of rules. A rule consists of a selector and one or more declarations that
can specify the size and color of text, background colors, fonts, how links work, how an
item on the page behaves when the mouse hovers over it, and so forth. A selector is
usually an HTML tag such as p or body. Let’s look at an example of a CSS rule:

body { font-family: arial; text-decoration: bold;}

This would make the font of the entire body of the HTML document Arial and also bold.
Notice how the declarations are contained in braces and separated by a semicolon.
You may not want to have a declaration apply to all tags in a document of a certain
type. For example, perhaps you only want certain types of anchor tags to change color
after being clicked. In this case, you can have a special class that you add to the HTML
tag and then reference this in the CSS rule. Let’s look at an example. First, here is a
snippet of HTML code:

<a class=”linkType1” href=”http://www.google.com”>Google</a>

<a href=”http://www.amazon.com”> Amazon</a>

Now, here is the CSS rule:

a.linkType1 {text_decoration: underline;}

The rule shown above will cause all anchors of class linkType1 to be underlined. In the
HTML code above, only Google will be underlined. Amazon will not be.

In addition to specifying a class for a specific type of tag, you can also specify a rule for
a class for all types of tags that are named with the class. Let’s look at some HTML:

<p class=”blueText”>This text will appear blue</p>

<p>This text will be black</p>
<table border = 1>
<tr><td class = “blueText”>Blue Cell</td>
<td>Black Cell</td>
</tr>
</table>

Saylor URL: www.saylor.org/CS412 subunit 3.2 (end)

The Saylor Foundation Saylor.org

Page 1 of 7
 And here is the corresponding CSS rule:

.blueText {color:blue;}

The first line, which is part of a paragraph tag, will appear in blue. The second line will
be black. The table will contain a blue cell and a black cell. So, you can see that the
rule applies to any type of HTML tag as long as it has a class of “blueText.”

One other aspect of cascading style sheets that is of interest to us is pseudo-classes,

which are used to add special effects to some selections. For example, a pseudo-class
for an anchor tag is hover. Here is how you would specify to change the color when
hovering (moving the mouse) over an anchor:

a:hover {color: red;}

Style sheets are cascading, since a property set in a child tag will override a property
set by a parent. While it is beyond the scope of this laboratory to review every possible
thing that one can do with cascading style sheets, let’s discuss a couple of types of style
sheets and how these work.

Internal Cascading Style Sheet

Internal cascading style sheets are contained within the head of an HTML document.
The advantage to this is that all of your styles are easily seen when writing HTML tags.
The big disadvantage is that you cannot easily reuse the cascading style sheet code,
since you will have to copy it into other HTML documents. An example of an internal
CSS is shown in Figure 1 below.

Figure 1

Let’s discuss this: Lines 6 and 7 are simply part of the HTML document and specify that
we are currently working in the head, and they give the head a title. Line 8 lets the
browser know that inside of the style tag is a set of styles that are of type CSS. Lines 9
through 16 contain the actual CSS code. As mentioned above, the CSS rule has a
format with a selector and one or more declarations. Line 9 specifies that the body
Saylor URL: www.saylor.org/CS412 subunit 3.2 (end)

The Saylor Foundation Saylor.org

Page 2 of 7
 element of the HTML document is going to have a font of either arial, Helvetica, or sans-
serif. The reason that there are three choices for font-family is because you may not
know the fonts installed on the host system. Line 10 is a style for anchor tags,
indicating that the text is not decorated (i.e., underline, italics, etc.). This only applies to
anchor tags with a class of “link1.” Lines 11 and 12 define a rule that dictates what
color the link will change to after the link has been clicked. Line 13 causes the link to be
underlined when you hover over it with the mouse. Lines 14 and 15 cause any text
within an emphasis tag (em) to be bold and underlined. Line 16 makes any data in cells
display in courier font.

Figure 2 shows the use of the internal CSS within an HTML document. Download the
html code here and try to render this in a browser to see how it works.

Review Question:

1. How would the page render if the selector for line 11 was just a and not a.link1?

The solution to this can be found in the answer key.

Saylor URL: www.saylor.org/CS412 subunit 3.2 (end)

The Saylor Foundation Saylor.org

Page 3 of 7
 Figure 2
Saylor URL: www.saylor.org/CS412 subunit 3.2 (end)

The Saylor Foundation Saylor.org

Page 4 of 7
 External Cascading Style Sheets

In the example shown above, we used an internal style sheet. While this is convenient,
it does not lend itself to reuse. Also, anyone can view the source of an HTML page and
see your styles. A better approach is to use an external style sheet, which is simply a
file with a css extension. Figure 3 shows the CSS code from the example above,
rewritten as an external style sheet.

body { font-family: arial, helvetica, sans-serif }

a.link1 { text-decoration: none; }
a.link1:visited { color: red;
text-decoration: none;}
a:hover { text-decoration: underline; }
em { font-weight: bold;
text-decoration: underline }
td { font-family: courier }
Figure 3

Rather than present the entire HTML document again, Figure 4 shows only the part that
was changed to use the external style sheet.

<head>
<title>External Style Sheet Example</title>
<link rel = "stylesheet" type = "text/css" href="example1.css" />
</head>
Figure 4

Lab Assignment

The solution to this can be found in the answer key.

Task 1

Given the HTML code in Figure 5 (also found here), add CSS code to accomplish the
following:

1. Change the font-family for the body to arial, helvetica, and sans-serif.

2. Change the color of the body to lavender.

3. Center any text within h1 tags.

4. Set the font size of any text within h1 tags to 16.

Saylor URL: www.saylor.org/CS412 subunit 3.2 (end)

The Saylor Foundation Saylor.org

Page 5 of 7
 5. Set the font size of any text within an ol tag to 14.

6. Set the color of any text within an ol tag to green.

7. Changed the background to light gray (#D8D8D8) for ordered list elements (li tag)
with a shaded class.

8. Change any text within a paragraph tag with a note class to centered, color red, and
underlined (hint: use text-decoration).

You should make this an external style sheet so that you can use it on other HTML files.
When this renders after the CSS has been written, it should look like Figure 6.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title>CSS Interactive Laboratory Assignment</title>
</head>
<body>
<h1>My List of Things to Do</h1>
<ol>
<li class = "shaded">Change Oil</li>
<li>Check Tires</li>
<li class = "shaded">Vacuum Car</li>
<li>Wash Car Windows</li>
<li class= "shaded">Dust Interior</li>
</ol>
<hr>
<p class = "note">Complete all of this in the order which it is listed!</p>
</body>
</html>
Figure 5

Figure 6
Saylor URL: www.saylor.org/CS412 subunit 3.2 (end)

The Saylor Foundation Saylor.org

Page 6 of 7
 Task 2

Take a look at the HTML code in Figure 7(also found here). Add a call to your external
CSS file to the code and render this in a browser.

<?xml version = "1.0" encoding = "utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title>CSS Interactive Laboratory Assignment Part 2</title>
</head>
<body>
<h1>My Grocery List</h1>
<ul>
<li class = "shaded">Milk</li>
<li>Butter</li>
<li class = "shaded">Scali Bread</li>
<li>Provolone Cheese</li>
<li class= "shaded">Salami</li>
</ul>
<hr>
<div class = "note">Please remember all of this!</div>
<hr>
<h2>Priority Items</h2>
<ol>
<li class = "shaded">Milk</li>
<li>Scali Bread</li>
</ol>
<hr>
<p class = "note">Complete all of this in the order which it is listed!</p>
</body>
</html>
Figure 7
Change the CSS code so that:

1. Any text within the h2 tag is centered

2. All tags with a class of note will be in red and underlined

Saylor URL: www.saylor.org/CS412 subunit 3.2 (end)

The Saylor Foundation Saylor.org

Page 7 of 7