Cascading Style Sheets ( CSS )

27/11/2011 20:49

What is Style Sheet?

Style Sheet was adopted by W3 in December 1996. It's the new way to get control of your page. But, writing the script and put it in your document without help from an authoring tool is hard work. For an updated list of Authoring Tools, check the page at W3C. [W3C is The World Wide Web Consortium, the organization that recommends the standards for using HTML.

Style Sheets can be created in many ways. The current Cascading Style Sheets (CSS) is what people talk about and it is a standard that is supported by Internet Explorer 3.0 and Netscape Navigator 4.0. Using Style Sheets you can get better control of your page. CSS properties are: Font, Color and Background, Text, Box, and Classification. As I have seen nowadays, Style Sheets are mostly used for control over text color and font. Check at cnet.com, for some good examples of using Style Sheets.

 

How to get it working?

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

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>

StyleSheets 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.

This page was first written in May 1997. We will have an update for this section soon!!

Tags:

Back