XHTML Reference

go to previous section go to next section 

Style sheets

Stylesheets are used to provide the page formatting that used to be provided by the font and other similar tags. By using stylesheets you can change the font that all of your paragraphs use by changing only one line instead of having to amend every paragraph in your document.

Stylesheets commands can be added to your page in one of three different ways. You can embed the individual stylesheet commands directly into the individual tags in your page by adding a style= parameter to the tag and there are one or two stylesheet options that must be added this way. With these exceptions adding the stylesheet options in this way kind of defeats the purpose of using stylesheets so you will probably use one or both of the other options for the bulk of your stylesheet commands.

The second way to add stylesheet commands is to place then within a <style> block at the top of the page. This is the ideal spot to place stylesheet commands that you want to apply to the whole page.

The third and final way of adding stylesheets is to create a separate CSS file containing the stylesheet commands and link it into all of the pages of your site. This will provide you with a single point where you can make changes to the appearance of your entire site.

A stylesheet command defined in either of these latter two ways will assigns attributes either to all occurrences of a given tag or to all occurrences having a specific class or id. To define stylesheet attributes using either of these methods requires that you specify the tag (or tags separated by commas) to which the attributes are to be applied at the start of a line. The stylesheet attributes are then enclosed within { } to group them together.

To specify that the attributes are to apply to a specific class place a dot(.) immediately after the tag name and follow it by the name to be used for the class. You can also define classes that can be used on any tag by omitting the tag name before the dot.

ids are usually only added to one tag on a page. The attributes to apply to a specific id tag are defined in the same way as normal tag attributes except that the id is preceded by a # character.

The individual stylesheet attributes whether specified within a stylesheet or individually within a tag consist of an attribute name followed by a colon (:) then the value (or comma separated values) assigned to the attribute and finally a semi-colon (;) to terminate the attribute definition. Some attributes can have more than one aspect of the attribute assigned within the one statement and in this case the values for each need to be specified in the correct order separated by spaces. Because of this any values that contain spaces need to be enclosed within quotes.

Stylesheets are a relatively new addition to HTML so earlier browsers may not recognise them. The easiest way to avoid this problem is to use a transitional DTD that supports <font> tags etc. You can then use the old tag method of defining attributes where you absolutely must have the attribute applied in all browsers while using the new stylesheet method where the attributes are nice to have but not essential to the page.

The following is an example of a stylesheet definition that can either be contained in an external file or within a <style> group in the head section of the page:

 h1{font-family:verdana,arial,sans-serif;font-size:26pt;color:#666666;}
a.nav:link,a.nav:visited,a.nav:active{color:#666666;font-weight:normal;}
#pos1 {position:absolute;top:10px;}

go to previous section go to next section 

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate