HTML Workshops

Fall 2006–LIS Web Team

Session 3: Introduction to Cascading Style Sheets

Note: This material relies on previous HTML Workshops

Objectives
1. To be familiar with the story behind cascading style sheets and their purpose.
2. To build some confidence in using styles three different ways: locally; using an internal style sheet;
and with an external style sheet.
3. To know how to use classes of style and apply them to HTML documents.
4. To be familiar with a few resources for style sheet information.

Introduction
Cascading Style Sheets (CSS) is a language that allows you to define how you want your html
document to look. This concerns features such as typeface, background, link colors, margins, and
placement of objects on a page. CSS Level 1 (or version 1) became a World Wide Web Consortium
(W3C) recommendation in 1996. The CSS Level 2 specification or version came into effect in 1998.
As of fall 2006 CSS Level 3 is still being developed. (If you get interested in CSS development, you
can follow their progress here: http://www.w3.org/Style/CSS/current-work)

Why style sheets? In the early days of HTML, one could define the various parts of a document (such
as headings, body text, bold, etc.), but it was up to the browser to interpret what that was supposed to
look like. Internet Explorer would display an <h1> heading tag with a particular font, size, color, etc.,
and Netscape would choose a different combination, and so on. What this meant was that you could
make your page look great in one browser, then look at it in another browser and everything would
change. Then Netscape and IE started to add special display features to their browsers that developers
would use, but those features simply would not work across all browsers. Companies were losing the
point about the web being a place where people could view a document across all kinds of computers
and browsers without having major differences.

There were certain display features, such as margins, that were not possible to create unless you
created strange workarounds with the available tags, such as tables. These workarounds resulted in
problems such as longer download times and very messy coding. Then, whenever there was a change
to a website, such as your boss saying, “let’s change our website color scheme”, this meant editing
many, many pages.

The W3C decided to tackle these problems by developing the CSS standard and urging all browser
companies to comply with the standards. For the first few years companies resisted this call to order
and there was a problem with browser compatibility with style sheet features. For example a style
sheet command might work in Netscape 5.0 but not Netscape 4.0 and not in any version of Internet
Explorer. These days this scenario is rapidly changing as companies are complying with the style sheet
standards.

Why use them?

1. Style sheets make managing the look of multiple web pages MUCH easier by separating
CONTENT from DISPLAY information.
2. They make web pages faster to download, very important when you are trying to reach people with
older computers and modems.

1
 HTML Workshops
Fall 2006–LIS Web Team

3. The W3C is slowly phasing out old ways of coding HTML in its standards, for example the use of
the <font> tag. This translates into: professional standards are moving toward style sheets.

Style rules
All these display instructions are called “style rules” in CSS lingo. Style rules are simply a way of
telling anyone’s browser how to make your web page look. Style rules can be coded in three places:
1. Inline - right in the HTML tag
2. Internal Style sheet - at the beginning of the html document
3. External Style Sheet - in a separate document that is used as a reference for multiple html
pages, and there is a code (a kind of link) in the html pages that tells the browser where to look
for the instructions

You can have all three instances of stylesheets in one HTML document. Styles are applied through
four levels, the top levels overriding the levels underneath it. The browser will look for styles to apply
in the inline style first, then the internal and finally the external style. In some cases when there are no
styles applied, the browser will give the HTML document the browser default. Think about it this
way: the closer the style is to the actual thing it’s styling, the more power it has.

Inline style instructions: Big boss (right inside the HTML)

Internal sheet style instructions: Medium boss (at the top of the HTML page)
External sheet style instructions: Little boss (in a separate .css page)
Browser default: Littlest boss (set in your computer)

But first, the anatomy of a style rule

There are two parts to a style rule. The selector determines what you are styling, and the declaration is
made up of one or more property:value pairs, ending in a semi-colon and enclosed in curly brackets.
In this case a property is a display feature such as color, and a value is what you want that property to
look like. For example,

h1 {color: red;}
selector property value

means “I want my <h1> headers’ text color to be red.”

You can have more than one declaration, or rule, for each selector. Just separate them with semi-
colons. We also recommend you put each new rule on a new line, for easy reading. Put the ending
curly bracket after the last one.

h1 {color: red;
background: yellow;}
The above declaration means “I want all my <h1> headers’ text color to be red and set in a
background that is yellow.” This is the pattern that you will use to compose ALL of your style rules:

“The thing you are talking about” {“the aspect of that thing”: “exactly what you want it to be”;}

2
 HTML Workshops
Fall 2006–LIS Web Team

Naming your sections: classes and ids

Another brilliant part of CSS is the ability to distinguish unique sections in your HTML code, or to
group several sections together under one set of rules. You do this with classes and ids.

The way to do this is to create a set of rules in your CSS, and give it a name. For example, let’s say
you want your “navigation” section to be all blue text, at 10pt font (different from your regular text,
which is black and 12pt font.) For this one section you would make an id, and your rules would be:

{color: blue;
font-size: 10pt;}

but what would your selector be? Here is where you give it a name, with a numeral sign it front:

#nav {color: blue;

font-size: 10pt;}

The # numeral sign means “this is an id” and the name of this section is “nav.” The above code would
go in your <style> section; the way you would write it in your <body> code would be:

<div id=”nav”> blah blah blah </div>

Remember that the <div> acts like a box or container, and that you can style everything in that box as
one unit – well, now you have a unit called “nav,” and you can style it differently than anything else on
the page. Also: each id can only be used once in a page. You cannot have two divs named “nav”;
however, you can make as many unique ids as you want (“nav1” “content” “middleparagraph” etc).

If you want to make more than one section look the same – that is, say you want three different
sections to all have red text and 16pt font, you can use a class. You would write your rules:

{color: red;
font-size: 16pt;}

but this time you would name it with a period in front of it:

.bigred {color: red;

font-size: 16pt;}

The “period” in front means “this is a class” and the name of this class is “bigred.” This code would
go in your <style> section; the way you would write it in your <body> code would be:

<div class=”bigred”> This is my first section </div>

<div class=”bigred”> This is my second section </div>
<div class=”bigred”> This is my third section </div>

You now have three units called “bigred.” You can use the same class as many times as you want in
one page. That’s the point! You have created a “class” of sections, all of which will be styled the same
way.

TIP: Name your classes and ids with explanatory names, so you won’t forget what it means!
3
 HTML Workshops
Fall 2006–LIS Web Team

Thanks, now can I change the color?

Now that we’ve gone over the syntax (meaning, how to type the code) of style rules, you want to get to
the nitty-gritty – what kinds of things can you do with style? Well, pretty much anything, actually. My
basic rule of thumb is: anything you can imagine, someone else who knows more than you has already
invented a way to do it, you just have to find out how and copy it. For now, let’s look at some of the
most basic changes you can make: color changes, font changes, and spacing changes.

Color
There are sixteen pre-defined colors in HTML: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, and yellow. That means, you can just type the word “blue”
into your code, and the browser will give you the default color for blue. If you want more variety or
nuance, there are also 216 “web safe colors” that all browsers should be able to read accurately. You
can use these colors by using the “HEX” color code system (a combination of A-F and 0-9 to six
places). The HEX system works on the RGB principle: each color is a combination of Red Green and
Blue, and the code is divided in three parts, with the first two spaces representing Red, the second two
Green, and the third two Blue. F is the highest, and 0 is the lowest; so here are some basic patterns:

#000000 = black (total absence of color, all zeros) #FFFFFF = white (presence of all colors, all Fs)
#FF0000 = red (the red section at full level) #00FF00 = green (the green section at full level)
#FF8800 = a shade of orange (red plus green) What do you think the code would be for blue?

To learn more about HTML color, a good page is: http://www.w3schools.com/html/html_colors.asp

Font
When you style font, the most typical thing to change is the size. For HTML nowadays, font size is
not measured in “points” but in “ems.” An em is the size of the capital letter “M” in the default font
and font size which was set by the user’s browser, which means that it could be anything! However,
this flexibility is very important. If you remember from the Accessibility lecture, different people need
different sized fonts: a visually-impaired person might have their computer set for large size font,
whereas someone else might like very small size font. You the designer shouldn’t force an exact size
on the user, but should build in flexibility to your design to accommodate users’ needs. So, using an
em as a unit of measurement provides web designers with some amount of control and precision in
their fonts and widths, while allowing for flexibility on the viewer’s part.

Font size, therefore, is relative: 1em is the size of a capital M at 100%, if you want it smaller, you
could put 0.8em which would make your font 80% of the size of the default M; if you want it larger
you can make it 1.2em which would be 120% the size of a default M, and so on.

Spacing
You can control the spacing of your page with margins, padding, width, and height. This will be more
important in the next session (and frankly, is a little complicated), so for now just remember that
spacing is set in pixels. A pixel is a standard size that all browsers recognize – though it can still be
somewhat flexible, depending on the size of the computer screen on which your page is being viewed.
You will get the feel for how large pixels are after you play around with your page. Pixels are written
px, and some typical commands might include things like:

margin-left: 10px; width: 100px; height: 252px; padding: 5px 5px 5px 5px;

4
 HTML Workshops
Fall 2006–LIS Web Team

PRACTICE TIME
Okay, we now come to the fun part. Please get your “index.html” file from where you have saved it,
and open it in Notepad (PC) or TextEdit (Mac). You should have something similar to this in your
“index.html” file from session 2.

<html>
<head>
<title>John’s Homepage</title>
</head>
<body>
<div>
<a href="index.html">Home </a>
<a href="courses.html">Courses</a>
<a href="personal.html">Personal</a>
</div>
<div>
<p>This is my brief description for my webpage.<br />
Contact: <a href="mailto:john@hawaii.edu">john@hawaii.edu</a><br />
<a href="http://www.hawaii.edu/slis">Go to the LIS home page</a>
</p>
<div>
<img src="palmtree.jpg" alt="a picture of a palm tree"/>
</div>
</div>
</body>
</html>

Exercise 1: Creating an Internal Style Sheet:

Enter the following text between the </title> tag and the </head> tag, on a separate line.
Follow the indenting conventions. By organizing the indenting and punctuation this way, it really
helps you to layout your ideas and allows you to easily find mistakes in your coding when things don’t
work:
</title>
<style type="text/css"> TIP:
When writing code, write the brackets
body {
text-align: left; first. That way you won’t forget to put
font-size: 1em; the closing tag on later, after you’ve
} typed the content of the tag.
a {
color: #6666FF;
For example, type:
font-size: 1.2em;
} <div> </div> or
p {
p { }
background-color: #CCCCFF;
}
before typing in the rest.
img {
border: 1px solid #000000;
}
</style>
</head>
5
 HTML Workshops
Fall 2006–LIS Web Team

6
 HTML Workshops
Fall 2006–LIS Web Team

Check your work. It should look something like this:

<html>
<head>
<title>John’s Homepage</title>
<style type="text/css">
body {
text-align: left;
font-size: 1em;
}

a {
color: #6666FF;
font-size: 1.2em;
}

p {
background-color: #CCCCFF;
}

img {
border: 1px solid #000000;
}
</style>
</head>
<body> ………

 Now, save your index.html file and look at it in a browser. Check the webpage against the code
you just wrote; can you identify all of the changes you made?

Exercise 2: Practicing inline style commands:

Change the first paragraph’s first <p> to :

<p style="color: red; background-color: yellow;"> This is my brief

description for my webpage.</p>

Now, let’s dress up an image. Take the image <img> tag and change it to:

<img src="palmtree.jpg" style="border: solid; border-color: green;" alt= "a

picture of a palm tree" />

 Save your work and open index.html in a browser. Notice a couple of things about the hierarchy
of the styles:
 The text color of the paragraph is the color we specified in the inline style, not the internal sheet
above.
 The border of the image is that of the inline style, not the internal sheet.
 BUT – the <a> links in the paragraph are still the same as we specified above in the internal
sheet. That’s because <a> is a separate element from <p> and has to be styled separately, even
though it’s inside the <p>. We’ll show you how to do this later on.

These are all the effects of the “cascading” part of CSS, which creates a hierarchy of styles.

7
 HTML Workshops
Fall 2006–LIS Web Team

Exercise 3: Practicing external style commands:

In your HTML document, after the </title> tag and before the internal style command
<style>, delete the rules you had entered for p and img, and enter the following text:

<link rel="stylesheet" type="text/css" href="base.css">

The top of the file should now look something like this:
<html>
<head>
<title>CSS Example 3</title>
<link rel="stylesheet" type="text/css" href="base.css">
<style type="text/css">
body {
text-align: left;
font-size: 1em;
}

a {
color: #6666FF;
font-size: 1.2em;
}
</style>
</head>

The code you just typed in tells the browser that style information can be located in a file called
“base.css” in the same directory as the index.html. Add another <img> tag after your first <img> tag
in the <body> of the HTML document, make sure you take out the inline elements from the second
one. Add another <p> </p> with no inline style as well, if you don’t already have one. This will
demonstrate the difference. It should look like this:
<div>
<img src="palmtree.jpg" style="border: solid; border-color: green;" alt= "a
picture of a palm tree" />
<img src="palmtree.jpg" />
</div>

 Save and close index.html. Then start a new blank file with Notepad or TextEdit and type in the
following lines:

img {
border: solid;
border-color: red;
}
p {
color: blue;
background-color: green;
}

This is ALL that is needed…no html, header, title, etc. tags.  Save the file as “base.css” and be
sure to save it right next to (in the same folder as) your index.html file. Use a browser to look at
index.html. Now, your <img> and <p> tags are styled by the external file, your <body> and <a>
tags are styled by the internal sheet, and a few of your <p> and <img> tags are styled with inline
style. Try adding and deleting rules in the internal and external files, or add new <p> or <img>, each
time you will see that the inline style overrides the internal sheet, which overrides the external sheet.

8
 HTML Workshops
Fall 2006–LIS Web Team

Exercise 4: Using ids

<div> tags allow you to create a container for your content, and by adding in ids in your stylesheets,
we can apply an overall style format to that container. ids in stylesheets are denoted by the # sign.

Add in the following after the last selector{property:value} in your internal stylesheet:

#nav {
border: 1px dashed blue;
}

#nav a {
font-size: 1.2em;
color: #990000;
}

#content {
text-align: right;
border: 1px solid green;
}

Now edit your <div> tags so they look like this:

<div id="nav">
<a href="index.html">Home</a>
<a href="courses.html">Courses</a>
<a href="personal.html">Personal</a>

</div>
<div id="content">
<p class="important">This is my brief description for my webpage.< br />
Contact: <a href="mailto:john@hawaii.edu">john@hawaii.edu</a><br />
<a href="http://www.hawaii.edu/slis">Go to the LIS home page</a>
</p>
</div>

 Save and refresh your index.html file. You will notice that that the contents of the <div> tags
have taken on the properties that were assigned to that id. Now, why did we put both “#nav” and
“#nav a”? Well, look inside your #nav <div>, what is inside? There are three <a> links in there, and
remember when we said that <a> is a separate element in HTML, and needs to be styled separately
from other things? This is the way to do it. What you have done is to create a sub-rule for your #nav
container; by putting the name of the thing you want to style after the id, you are saying:

#nav a { } = Inside my “nav” container, please style all <a> tags this way.

More examples include:

#content p { } = Inside my “content” container, please style all <p> tags this way.
#content img { } = Inside my “content” container, please style all <img> tags this way.

Basically, each time you have a set of < > brackets, you have to check to make sure your style rules
cover what’s inside – this is the idea of inheritance. Sometimes the styles does penetrate all the way to
the lowest level, but sometimes not, and you have to be sure to style each element accordingly.

Finally, notice the borders around your <div>s – now you can see the container’s rectangular shape!

9
 HTML Workshops
Fall 2006–LIS Web Team

Exercise 5: Using classes, more display ideas, and controlling the look of multiple pages:
WHAT IF we have an HTML document with a number of similar objects, for example paragraphs, and
we want them to look the same way? We can’t use #id because that can only be used once, but we
can create different “classes” for those paragraphs, so that each one can have the same style.

Add in the following code in the internal stylesheet. (If you want to go easy on the hexadecimal
color codes, just use words such as blue, black, green, etc. Just don’t be too surprised by your
results…)

.contentp {
color: #E62B86;
background: #EFB3C6;
}

p.important {
color: #AE00FF;
background: #C4B87F;
}

Classes are denoted by the “.” before the selector name you create for it and can be applied to any
element. Classes assigned to specific elements can only be called upon by that element. (i.e. in
p.important, the .important class is given only to the paragraph element).

Your HTML should look something like this:

<style type="text/css">
body {
text-align: left;
font-size: 14px;
}
a {
color: #6666FF;
}

#nav {
font-size: 16px;
color: #990000;
border: 1px dashed blue;
}

#nav a {
font-size: 1.2em;
color: #990000;
}

#content {
text-align: left;
border: 1px solid green;
}

.contentp {
color: #E62B86;
background: #EFB3C6;
}

p.important {
color: #AE00FF;
background: #C4B87F;
}
</style>
10
 HTML Workshops
Fall 2006–LIS Web Team

Now add four new paragraphs to your #content <div>, three should have the words
class=”contentp”, and the fourth should have class= “important” in the initial <p> tag:

<body>
<div id=”nav”>
<a href="index.html">Home</a>
<a href="courses.html">Courses</a>
<a href="personal.html">Personal</a>
</div>
<div id=”content”>
<p>This is my brief description for my webpage.< br />
Contact: <a href="mailto:john@hawaii.edu">john@hawaii.edu</a><br />
<a href="http://www.hawaii.edu/slis">Go to the LIS home page</a>
</p>
<p class="contentp"> This is my first test paragraph
</p>
<p class="contentp"> This is my second test paragraph
</p>
<p class="contentp"> This is my third test paragraph
</p>
<p class="important"> This is my important paragraph!
</p>
<div>
<img src="palmtree.jpg" alt="a picture of a palm tree" />
</div>
</div>
</body>

 Save and refresh your index.html file. You should now see three paragraphs that look the same
(pink), and one with a beige background. This example shows you how you can use one set of rules (a
class) to style multiple elements, and also how you can make that class only applicable to one element
(in this case <p>).

We encourage you to change around the layout of your page, move paragraphs around and test
different kinds of styles. Use the color chart website to find HEX codes for your favorite colors, and
don’t be afraid of making mistakes – that’s the best way to learn!We have also included a handy list of
CSS propreties for you to try out on your page!

Next week, we’ll be looking at layout and positioning. Please have in mind the layout you want
for your webpage, including where you want your navigation, and what kind of content you
want.

RESOURCES:
1. If you want to learn more, I HIGHLY recommend the following website:
http://www.webmonkey.com/webmonkey/authoring/stylesheets/tutorials/tutorial1.html
It is an EXCELLENT step by step tutorial.

2. Castro, E. (2003). HTML for the World Wide Web, with XHTML and CSS.
Berkeley:Peachpit Press. An EXCELLENT resource!! A very useful table of properties and values is
in the back, and it does a gentle job of bringing people out of HTML 4.0 to XHTML and CSS.

3. http://w3schools.com/css/default.asp breaks down the elements and explains them, they also
provide test pages for you to edit the code and view the changes you make to better understand how
the declarations work.
11
 HTML Workshops
Fall 2006–LIS Web Team

<html> * ONE POSSIBLE FINAL VERSION OF TODAY’S CODE *

<head>
<title>John’s Homepage</title>
<link rel="stylesheet" type="text/css" href="base.css">
<style type="text/css">
body {
text-align: left;
font-size: 1em;
}
a {
color: #6666FF;
font-size: 1.2em;
}
#nav {
border: 1px dashed blue;
}
#nav a {
font-size: 1.2em;
color: #990000;
}
#content {
text-align: right;
border: 1px solid green;
}
.contentp {
color: #E62B86;
background: #EFB3C6;
}
p.important {
color: #AE00FF;
background: #C4B87F;
}
</style>
</head>
<body>
<div id="nav">
<a href="index.html">Home</a>
<a href="courses.html">Courses</a>
<a href="personal.html">Personal</a>
</div>
<div id="content">
<p style="color: red; background-color: yellow;">This is my brief
description for my webpage.<br />
Contact: <a href="mailto:john@hawaii.edu">john@hawaii.edu</a><br />
<a href="http://www.hawaii.edu/slis">Go to the LIS home page</a>
</p>
<p>This is my new test p.</p>
<p class="contentp"> This is my first test paragraph</p>
<p class="contentp"> This is my second test paragraph</p>
<p class="contentp"> This is my third test paragraph</p>
<p class="important"> This is my important paragraph!</p>
<div>
<img src="palmtree.jpg" style="border: solid; border-color: green;"
alt="a picture of a palm tree"/>
<img src="palmtree.jpg" alt="a picture of a palm tree"/>
</div>
</div>
</body>
</html>

12
 HTML Workshops
Fall 2006–LIS Web Team

SELECTED CSS PROPERTIES AND VALUES

Here are some useful properties of style that you might want to try out in your own pages. The files
examples.css and examples.html found at
http://www.hawaii.edu/slis/webteam/workshops/06sp.CSS_Student/ demonstrate some of these
properties. If you want more information on the available properties of CSS, try
http://www.blooberry.com/indexdot/css/propindex/all.htm for an alphabetical list.

background-color for changing the background color of elements

e.g. background-color: blue;
e.g. background-color: #FFFFFF (white)
background-image for changing the background image of elements
e.g. background-image: url(bluehill.jpg);
border-color for setting the color of the border
e.g. border-color: green;
border for setting the style of a border (syntax: width type color)
e.g. border: 5px solid green;
color for setting the foreground color of an element – basically, the text
font-family for choosing the font family for text
e.g. font-family: helvetica;
font-size for setting the size of text – nowadays, size is in “ems”, or, the size of
one upper-case M in the font you selected.
e.g. font-size: 1.0em;
font-weight for applying, removing, and adjusting bold formatting
height for setting the height of an element – applies only to content height!
(does not include margin and padding)
e.g. height: 100px;
margin for setting the amount of space outside the border of the element
set “top right bottom left” (it spells TRBL like trouble)
e.g. margin: 10px 20px 10px 20px;
letter-spacing for setting the amount of space between letters
e.g. letter-spacing: 20px;
letter-spacing for setting the amount of space between letters
e.g. letter-spacing: 20px;
padding for setting the amount of space between the border of the element and
the content (measured same as margin: TRBL)
e.g. padding: 5px 10px 5px 10px;
text-align for aligning text
e.g. text-align: right; (or left or center)
text-decoration for decorating text, mostly within the lines
e.g. text-decoration: underline; (or overline, or line-through)
width for setting the width of an element – applies only to content width!
(does not include margin and padding)
e.g. width: 1024px;

13