CSS

 

You have to put the style definition in the <head> section. 
<HEAD>
<STYLE TYPE="TEXT/CSS">
<!--
.headline   {font-family: Courier New;
             font-size: 24pt;
             font-weight: bold;
             text-decoration: underline}
.topic      {font-family: Arial;
             font-size: 14pt;
             font-weight: bold}
.text       {font-family: Arial;
             font-size: 10pt}
.example    {font-family: courier new;
             font-size: 10pt;
             line-height: 120%;
             color: red}
-->
</style>
</HEAD>

.headline is the name I use to represent 16pt bold Courier New underline text. When I want to apply this rule to my text such as the headline of this page, I just simply put <span> tag in front of my text -- e.g. I have put <span class="headline"> in front of headline text on this page. This rule also applies to other definitions that I have set (e.g. topic, text, example). Now, it isn't hard to guess that I use </span> as an ending tag.

Still not clear? Here is what I did to the above paragraph:
<p><span class="text"><font size="2" face="Arial"> .headline is the name I use ............. an ending tag.</font></span>

In order to deal with browsers that do not support Style Sheets, I have put the font face attribute tag before my text. So, now my page can display in both Style Sheets supported and non Style Sheets supported browsers, and it still looks the same.

Remember to put <span class="--"> in front of font face attribute because IE 3.0 will read Style Sheets tag. Other browsers can't read Style Sheets tag and will read your next tag such as <b> or whatever. If you still aren't clear on the use of Style Sheets, you can view HTML source for this page.

The SPAN Element is a Text-level element. That means it has to be placed around text. As you have seen from my example it resided in <p> tag

<span> tag is just one way to link Style Sheets definitions to the sections of your pages. You can also use CLASS Attribute, ID Attribute, and DIV Element to reference Style Sheets definitions to HTML.

Example:

1. Using the CLASS Attribute
    <p class=text>hello

2. Using the ID Attribute
Specify the ID attribute in the <head> section such as #abc12 {font-style: italic}. Then, specify it to HTML
    <p ID=abc12>hello

3. The DIV Element is a block-level element. Unlike the SPAN Element, the DIV Element can contain heading, paragraph, and even tables.
    <div class=example>
<H1>Although this is surrounded with header element, it will appear as an example style -- courier 10pt red</H1>
<p>This sentence will also appear as an example style.</p>
   </div>

 

Style Sheets can be used in a wide variety of other circumstances. I recommend you to stop by at W3C Style page. There is a ton of information there. You can also find details of Cascading Style Sheets at WDG site.

 

 

Hosted by www.Geocities.ws

1