CS 100 (Learn) — CS 100 (Web) — Module 08

CSS :: Our First Style Example

In the previous module we learned how to make basic web pages with some of the fundamental HTML tags. Unfortunately, the HTML documents we produced were not visually exciting.

In this module, we will learn how to make web pages that are much more stylish using CSS (Cascading Style Sheets).

We will only learn some of the basic elements of CSS. There are advanced CSS techniques that are beyond the scope of the course.

Our goal is to give you enough of a foundation so that when you encounter well-designed web pages you can both appreciate the design and have a basic understanding of how it was accomplished.

First, we are going to focus on the "middle S" of CSS (Style).

In the previous module we learned that style includes all of the different ways of changing the appearance and formatting of a web page. We also learned that it is important to separate the content (in HTML) from the Style.

Let's revisit this example:

According to the book <cite>Wild Birds</cite>, the Canada Goose (<i>Branta canadensis</i>) can be very dangerous.
If you accidentally approach a nest and a goose starts honking at you, slowly back away while <em>maintaining eye contact</em>.

According to the book Wild Birds, the Canada Goose (Branta canadensis) can be very dangerous. If you accidentally approach a nest and a goose starts honking at you, slowly back away while maintaining eye contact.

The default style behaviour of a web browser is to display all three elements (<cite> <i> <em>) the same (with italics).

It's important to remember that a browser or device designed to aid someone with a visual impairment may represent the three elements differently.

In this first example, we want to change the style so that the <cite> element will appear green.

The style Attribute

First, we are going to introduce the style attribute because it is the easiest approach to understand. However, as we will see later, using the style attribute directly is not a good approach for managing large documents and websites.

According to the book <cite style="color: green;">Wild Birds</cite>, the Canada Goose (<i>Branta canadensis</i>) can be very dangerous.
If you accidentally approach a nest and a goose starts honking at you, slowly back away while <em>maintaining eye contact</em>.

According to the book Wild Birds, the Canada Goose (Branta canadensis) can be very dangerous. If you accidentally approach a nest and a goose starts honking at you, slowly back away while maintaining eye contact.

The only change was to add a style attribute to the <cite> element (tag):

  <cite style="color: green;">Wild Birds</cite>

Do not concern yourself with the syntax of the style attribute. We will discuss the syntax in another section.

It is important to note that we did not use a new tag. Instead, we styled an existing tag. In the early days of the web, the same effect could have been achieved with:

<font color="green">Wild Birds</font>

This is a subtle distinction (adding style to an existing tag instead of introducing a new tag), but an important one. The tag <font> didn't really belong among the other HTML tags designed to describe (or markup) the content.