DHTML Lab 2:
Cascading Style Sheets (the SPAN and DIV tags)

Unlike most treatments of CSS, we are going to start our discussion of Cascading Style Sheets with the introduction of two new HTML tags, the <SPAN> and the <DIV> tags. Unlike most tags they really don't have any inherent formatting properties by themselves, but they must be defined by properties we add to them (Actually DIV has the inherent property that it has a line bread before and after it, this is the only difference between DIV and SPAN.

The colors below are for instructional emphasis.

In HTML mode, Type the following code into CodeRunner below
<body>

Here is <span>some text</span>

</body>


Now Preview this code by clicking on the Preview button in CodeRunner below.

Notice anything? Right. It didn't do anything. Now add the red text below:
In HTML mode, Type the following code into CodeRunner below
<body>

Here is <span style="background-color:blue; color:white;">some text</span>

</body>


Preview this.

You should have gotten a some white text with a blue background around it, like this.

What we have here is a new HTML attribute, the style attribute. After the equals sign and in between a pair of quotes are a couple of properties the background-color and the color properties. Values for properties are set after a semi-colon :.

Take some time right now to try changing SPAN to DIV to see what happens Also, we can put any HTML within the SPAN tag. Try putting HTML you are familiar within the SPAN tag.

This is it. All we are going to learn in the rest of this and the next two DHTML learning labs is some more properties and what values to set. There are a lot of properties we can set in CSS. Let's try some more properties:

In HTML mode, Type the following code into CodeRunner below
<body>

Here is <span style="background-color:blue; color:white; font-size:16pt; font-family:arial,helvetica,sans-serif;">some text</span>

</body>


We just added the font-size and font-family properties.

Notice that the font-size property value is 16pt. That stands for 16 point. You should try many different sizes right now. You can specify the font-size by point size (as we did), or percentage, or smaller or larger, or absolute expression (absolute expressions are xx-small,x-small,small,medium,large,x-large,xx-large).

Percentage, and smaller or larger are relative sizes to the parent element. For example if we put the whole sentence in a <font> tag and use 40% font-size like this:

In HTML mode, Type the following code into CodeRunner below
<body>

<font size=6>
Here is <span style="background-color:blue; color:white; font-size:40%; font-family:arial,helvetica,sans-serif;">some text</span>
</font>

</body>


Preview this and try some other percentages.

The font-family should be a font that you expect computers to have.

The most computers have the following fonts built in: Times,Arial or Helvetica, and Courier. Notice that we listed the fonts seperated by a comma. The browser looks for the fonts on the computer in the order that you have listed, if it doesn't have that font it looks for the next and so on. It is generally a good idea to list the Generic font family at the end after the specific examples. There are generally four types of generic fonts:
  • serif e.g. Times, New York, Garamond
  • sans-serif e.g. Arial,Helvetica, Geneva
  • cursive e.g. Zapf Chancery, Ribbon
  • fantasy Decorative fonts such as Western
  • monospace e.g. Courier, or Monaco

Using the STYLE tag

Suppose we add more SPAN tags that happen to have the same properties and values:

In HTML mode, Type the following code into CodeRunner below
<body>
Here is <span style="background-color:blue; color:white; font-size:12pt; font-family:arial,helvetica,sans-serif;">some text</span>

<p> Here is some <span style="background-color:blue; color:white; font-size:12pt; font-family:arial,helvetica,sans-serif;">more text</span>

<p>Here is <span style="background-color:blue; color:white; font-size:12pt; font-family:arial,helvetica,sans-serif;">even more text</span>

</body>

Preview the code if only to see that it works

Pretty redundant, eh? Too much typing! Isn't there a lazy way to do this? Would I mention it if there wasn't? ;o)
The STYLE tag, IDs and CLASSes with save the day! The following code will do exactly the same thing as the previous code we just did:

In HTML mode, Type the following code into CodeRunner below
<head>
<style type="text/css">

#billy {background-color:blue; color:white; font-size:12pt; font-family:arial,helvetica,sans-serif;}

</style>
</head>
<body>
Here is <span id=billy>some text</span>

<p> Here is some <span id=billy>more text</span>

<p>Here is <span id=billy>even more text</span>

</body>


Preview this to see that it is the same as the last one.

Much easier to type, eh? We define the properties for the id billy and then user the ID ATTRIBUTE to select the properties defined in #billy (the # sign is important, try taking it out and see what happens). All property definitions go between the <style type="text/css"> and </style> tags, and are blocked off with a pair of { and } after the id name.

Of course we can add individual properties using the style attribute even after we have we have used a ID selector. Observe this by trying the following code:

In HTML mode, Type the following code into CodeRunner below
<head>
<style type="text/css">

#billy {background-color:blue; color:white; font-size:12pt; font-family:arial,helvetica,sans-serif;}

</style>
</head>
<body>
Here is <span id=billy style="font-weight:bold; color:yellow;">some text</span>

<p> Here is some <span id=billy>more text</span>

<p>Here is <span id=billy>even more text</span>

</body>


Preview it of course.

Notice that STYLE ATTRIBUTES defined within a tag override defintions in the STYLE tag.

The ID actually serves two purposes, it selects the properties defined in the STYLE tag and it also IDENTIFIES the Block contained in the SPAN tag. When we use javascript and positioning it will become very important to be able to use the stylesheet ID to identify the Block so we can move it around. For this reason there is another property selector called CLASS. This way we can give each block of text a different name.

In HTML mode, Type the following code into CodeRunner below
<head>
<style type="text/css">

.friends {background-color:blue; color:white; font-size:12pt; font-family:arial,helvetica,sans-serif;}

</style>
</head>
<body>
Here is <span id=jerry class=friends>some text</span>

<p> Here is some <span id=bob class=friends>more text</span>

<p>Here is <span id=mike class=friends>even more text</span>


</body>


Notice the period before the word "friends", that is important. To define a class you put a period before the CLASS NAME followed by the definition enclosed by brackets.

You now pretty much know most of the syntax of CSS. In the next lab we find out that we can add and change properties of HTML tags that we are already familiar with, and later that the so called CSS-P (Cascading Style Sheets Positioning) is nothing more than some more properties. At the end of learning lab 4 we will point you to complete lists of CSS properties.

See you at the next learning lab!