Cascading Style Sheets are a great tool for web designers. They should be used far more than is currently the case, as they give designers much more control over how a website looks to users, but have suffered from a lack of support from the major browsers. This situation is now much improved, and will continue to improve as new versions of the major browsers are released. Learning how to develop a Cascading Style Sheet isn't difficult and there are now tools available which will actually do most of the work for you.
Commonly abbreviated to CSS, this new layout and positioning grammar is a recommendation from the World Wide Web Consortium (W3C). The major advantage for using CSS is that it allows web creators to develop a look and feel for a site that is applied consistently to all pages in the site, by altering a single template file, changing all of your pages dynamically.
The really important thing to stress here is that this is achieved without having to go into each page and hard code each and every occurrence of a particular HTML command.
As an example, using CSS the web creator can specify that the STRONG tag will be displayed at a particular size, using a specific font or font family, be a certain colour, underlined, and also be bold. The same applies to all other tags. H1 tags could be displayed in Arial, with a font size of 16 points, and be green, while H2 could also use Arial, but with a font size of 14 points, and be red.
All this information could be added to each tag individually, or a .css template could be created and then each HTML page simply points to the template in order to use all the formatting information contained in it. The .css template is a text file which ends in .css, such as example.css.
To use this stylesheet the web creator inserts this text between the <HEAD> and </HEAD> tags:
<LINK rel="stylesheet" HREF="example.css">
The HREF can be either a relative or absolute URL, so .css template s can be used from other computers elsewhere in the world.
Styles can also be developed and inserted at the beginning of individual pages. This can be useful in situations where the general .css template isn't quite adequate, though as a rule I suggest that you try and avoid doing this. Both the .css template and styles inside the HTML document will apply to the document when it is being displayed, with the styles included in the HTML document taking precedence. This is part of what is meant when the Style Sheet is described as Cascading - it can apply across an entire site, with modifications being developed within certain parts of the site.
Unfortunately, CSS only works well in the latest version of Netscape Navigator and Internet Explorer, and even these two browsers don't fully support all aspects of CSS. Probably only half the people visiting your website will be able to make good use of the CSS information, but this proportion of users is increasing and implementation is also improving, so I recommend using at least a basic style sheet on your site. At worst, your styles will be ignored and the user's browser will display the pages using the user's default preferences. At best, you will have much more say over how the your pages are displayed on the user's computer.
Here is an example of a CSS statement:
BODY {font-family: "Times New Roman", Times, Serif; font-size: 12pt; color: red}
This statement applies to the Body of the document. The information inside {} specifies that text should use Times New Roman by default, and that if it isn’t available to use Times. If this isn't available on the user's computer either then the text is displayed using the default Serif font. In all cases the text will be displayed at 12 points and will be red. Times New Roman needs to be inside quotation marks as it is a phrase rather than a single word. alternatives are indicated by listing the alternatives, separated by commas.
In standard HTML font size is specified as a number between 1 (largest) and 6 (smallest). CSS allows the creator of the page to specify the font size in points, making it much more like a conventional word processor.
By creating a statement for BODY the web designer ensures that all HTML tags in the body of the HTML document (between <BODY> and </BODY>) inherits all the traits listed above. CSS doesn't end there though. We can also create alternate or extra statements for certain tags if it is appropriate.
H1 {font-family: Chicago, Arial; font-size: 16pt; color: green}
By including the H1 statement in the .css template and specifying other style information for the font family, size and color, the new default set within the BODY statement will be replaced with the new information, though only for H1.
H2 {color: green}
The H2 statement only specifies that the color should now be green, so the other attributes specified in BODY will still apply.
Why bother learning how to develop Cascading Style Sheets? Well, imagine a situation where you decide that you want to change the layout of your pages, so that each paragraph which is also a Heading is moved 15 pixels to the right and the font changed to Arial. On a large site this will take quite a long time to do manually, even if your HTML editing software allows you to do a global find and replace. With CSS this will be the work of perhaps two minutes. To change it back to the way it was before you started meddling will take even less time.
How do you learn to create Cascading Style Sheets?
The W3C CSS website (http://www.w3.org/Style/Activity) contains information about the recommendation, links to tutorials and to authoring packages.
Western Civilization (http://www.westciv.com/) has an excellent tutorial as well as a beta version of a CSS creator for Macintosh.
Coffee Cup Software (http://www.coffeecup.com) also has a very good tutorial and a brilliant piece of software for PCs.
Dreamweaver (available from Macromedia - http://www.macromedia.com) supports CSS and can be used to create CSS statements for inclusion in individual HTML documents or in a ...css template . The Dreamweaver help files have lots of information about style sheets. The animation included will take you through the creation of a style sheet step by step.
CSS also allows for the introduction of layers to HTML pages, so that additional information can be added to a web page which has already been displayed. Images which have been positioned using the layer statement can be moved elsewhere on the page by the user, and menus can be developed as part of the page which drop down when they are clicked on. I hope to write another article about this aspect of CSS in the near future.
The JCSAV stylesheet is listed below. Notice that different commands within each statement is are separated by semi-colons, attributes for a particular command are preceded by a colon, and that all the commands are surrounded by {}
I have specified colours by their hexadecimal number, but for the 16 standard colours I could have used the following names instead;
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, or yellow.
Using the 16 colours specified in the Windows palette is somewhat limiting, so you might like to try experimenting with the hexadecimal values, or using the Red Green Blue (RGB) values. Most graphics packages let you see the RGB values of a colour. They can replace the hexadecimal value which follows a "color" statement.
color: white, color: #FFFFFF, and color: rgb(255, 255, 255) are all the same and may be substituted in the stylesheet.
The BODY statement will make all text inside the body of our HTML documents a dark blue. It will display in Verdana, if it is available, Helvetica if Verdana isn't, Arial if Hevetica isn't on the computer, and then, if all else fails, I tell it to display in the default San-serif font. All text will display at 12 points.
The subsequent statements inherit all the commands specified in BODY. If subsequent statements include a variation of a command contained in BODY it will use the new statement, if a statement isn't included it will use the default specified in BODY.
The only exception to this is TD - information contained inside a table isn't considered as part of the BODY and so I have had to specify the all the defaults I want for tables.
For the various Headings, I have specified a particular font size, measured in either pixels or points, and for some of them I have also added a margin.
Some statements also include information about Text Decoration. CSS allows web creators to give text a background colour, as I have used for email addresses, no underlining, which this stylesheet tells to apply to all hypertext links and email addresses (A), and underlining, which has been used for external links. Other decorations are also available.
I have also specified that hypertext links which go to other sites are of a slightly different colour, to assist in making decisions about what links to follow. To do this I created a "class" for inclusion in the stylesheet- A.offsite, which is used throughout the JCSAV website (used across the site as A class="offsite" HREF=). I have done the same sort of thing for email addresses by creating the class A.email, (used in our website as A class="email" HREF="mailto).
BODY {background-color: #FFFFFF; color: #000080; font-family: verdana, helvetica, arial, sans-serif; font-size: 12pt}
H1 {font-size: 18px}
H2 {font-size: 16px; margin-left: 5px}
H3 {font-size: 12px; margin-left: 5px}
H4 {font-size: 12px; margin-left: 5px}
H5 {font-size: 10px; margin-left: 5px; text-decoration: underline}
H6 {font-size: 10px; margin-left: 5px; text-decoration: underline}
A {text-decoration: none}
A.offsite {color: #3366FF; text-decoration: underline}
A.email {color: #009900; text-decoration: none; background-color: #ccffff}
TD {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12pt; background-color: #FFFFFF; color: # 000080}
blink {COLOR: #FF0000}
Packages like Dreamweaver, Coffee Cup and Style Master will all create stylesheets for you, or you can read through the tutorial sites listed above and create a stylesheet as a Word document and save it as text only. Either way works well.
Now when I want to make a dramatic change to my website it is simply a matter of editing a single document. Try it! It takes a little while to change your thought processes and to separate style from content, but I think that you will find it well worth the effort!