Cascading Style Sheets

A style sheet is used to describe the layout and appearrance of a web document. They allow the spearation of document presentation from document content. The most commonly used style sheet language is Cascading Style Sheets (CSS). Like HTML and XHTML, the specifications for CSS are maintained by the World Wide Web Consortium (W3C).

CSS1 (first version of CSS) was introduced in 1996. It introduced styles for fonts, text, color, backgrounds, and block-level elements.

CSS2 was introduced in 1998, and covered positioning, visual formatting, media types, and interfaces. CSS2.1 was introduced April 2002, not adding anay new features but debugging some of the problems of the earlier CSS2. W3C is working on CSS3.

Web browsers are still not all CSS2 compliant.

Style sheets work in three possible ways:

Possible attributes:
color (named or hex); font-size (in points); font-family (named font); text-align (left, right, center, justify); text-indent (inches or cm); margin-left also right, top, bottom (in, cm, pixels); background-color (changes color of an element);background-image(places named file as background of element)

For an inline style change to the H1 tag so it will appear in the sans serif font, the code would be:

If the H1 tag was to be changed to sans serif for the entire page (embedded style), the following code could be placed in the document:

If you do not wish to change every H1 but also do not wish to do an inline style for each time you want to change the H1 to a special form, you can 'create' a special H1 with the following code:

And whenever you wish to use the special H1, use the code:

To use an external file, you create a text file containing all the code that would appear between the <style> and </style> tags, saving it with the extension .css (to show it is Cascading Style Sheet). To link the external style file to the web page, the following code is placed in the <head> section without the <style> tags:

You would then be able to utilize any of the CSS from the external file as if it was contained in the head section of the web page.

If you wish to create your own special style 'tag', you can use the span class/tag.

And whenever you wish to use the special H1, use the code:

To use CSS to place a color (or an image file) as background of an element (for example, in conjunction with a bold tag):
<b style=background-color:red> will yield A bolded and red background line or
<b style=background-image:url(limesilk.jpg)>

JavaScript and other languages

JavaScript is a client-side scripting language: meaning, it is downloaded with the HTML code when a client requests to view a web page. The JavaScript code is part of the web page file itself, or else is a linked external file (similar to the external CSS file).

JavaScript can be inserted in either the head or body section of the web page.

As CSS uses the <style> tag to designate the enclosed code as other than HTML, JavaScript is a script language and uses the <script> tag to so define itself. A typical JavaScript inclusion would look like:

<script language = JavaScript>
<!--

var name;
name = prompt("Please enter your name","");
document.write(name);
document.write(", stay out of trouble.");

//-->
</script>

ISPs and web hosts often will provide JavaScript for inclusion into web pages, allowing webmasters to add counters and other useful interactive features to a site. Instructions are given by the ISP or web host as to where these inclusions are best placed.

JavaScript is a separate language, and is covered in the BUAI 350 class.

Other languages that are also used in connection to web pages are PHP, ASP, VB.net, and Flash. As with JavaScript, they are separate languages with their own special syntax and quirks.



Good Web site Design

Return to main page