Create Simple Style Sheets

In this exercise you will create a simple page with different types of styles. You will create the page you see by clicking here .

The Process

The BODY Tag - a tag selector

Create a new HTML document in Red Edit.

BODY {
color: #FFFFFF;
background: #000000;
font-family: sans-serif;
font-weight: bold;
font-size: 14pt;
}

This is a simple paragraph in the standard colors for this body. Next you will see an unordered list with two deep nesting.

Does this look like the text in the target document?

Nested Tags Selector-unordered lists

<UL>
<LI>First List item at top
<UL >
<LI>First Item in the second layer
<LI>Second Item in the second layer
</UL>
<LI>Second Item in the first layer.
</UL>

To get the nested list items to look the way they do in the target file, you might think you can use a nested tag style (UL LI UL LI). Try this style

UL LI UL LI {
color: #FFFF00;
list-style-type: circle;
}

Does this give the desired results in both Internet Explorer and Netscape?

For best results don't create nested styles deeper than one level.

How can you create the effect found in the target file?

An alternate way to look at this problem is as a nested unordered list. This is a simple one deep nest.

4. Change the nesting of your style to read

UL UL {
color: #FFFF00;
list-style-type: circle;
}

Now try the page in both browsers. You see that it works the way you want in both browsers.

5.Add some text in a paragraph directly below this list. (You can add the sentence: "This is outside of any special style section"). Then place the list you have just created totally within a paragraph. (Select the whole list (including all of its tabs) and select paragraph from the Format menu or use the keystrokes <alt>o p. Now view the text in Netscape. What happened to it?

Do not nest lists within paragraphs. Netscape will ignor BODY style text color after such nesting.

Class Selector

To change all of the text in a paragraph to a different style, you can specify a class selector.

6. Create a paragraph with this text:

This is the lavender style with a spot of bold with id= id1

7. Now add the following class style to your existing style.

.lavender {
color: #E3A0F1;
font-family: serif;
font-weight: bold;
font-size: 16pt;
text-align: left;
}
The paragraph will now look like this.
 
<P CLASS = "lavender">This is the lavender style with a 
           spot of bold with id= id1</P> 
 
In both browsers you should see all the type in this paragraph has a light lavender color. Use this class style declaration for most of the styles that you will associate with blocks at different places in your document.
 
ID Selector
 
You can assign an Id to any block tag if you want this block tag will have unique properties.

8. Create this style as an id selector. 
 

9. Select the reversed text in the paragraph enclose it in a bold tag. Then in the first bold tag add the id, id1. The paragraph will now look like this.

<P CLASS = "lavender">This is the lavender style with a 
           <B ID = "id1" >spot of bold with id= id1</B> </P>