Styling Your Page

XHTML is designed to define what the content of your web page is and not how the page is supposed to look. The appearance of your XHTML page is determined by the Cascading StyleSheet commands that you use with the page. There are three ways that you can attach these styles to your web page.

The simplest and best way of attaching styles to the elements in your web page is to apply id and class attributes to the elements in your page to allow them to be referenced from the stylesheet. The difference between these two is that each id must be unique and so can only occur once in a page. This makes the id useful for when you want to apply styles that will position the element on the page. Classes can be repeated multiple times in the same page and you can even apply multiple classes tothe same element by entering the class names as a space separated list. This makes classes useful for defining the colours, fonts and other appearance related information not specific to a single element the way that positioning information is specific. Styles can also be applied to specific types of elements and elements in specific relationships to other elements and so you may not need to actually apply very many id and class attributes in order to be able to style your content. Just identifying a container is sufficient to be able to apply specific styles to all of the content of that container.

With the elements to be styled identified you then just need a single tag in the head of your web page to identify the separately defined stylesheet that is to be used to apply the styles to these elements. The code to do this is:

<link rel="stylesheet" type="text/css" src="stylesheetname.css" />

If you want different styles to be applied for different media types, screen, print, handhelds, web readers etc then you simply add a media attribute to the link tag specifying which media the stylesheet is to apply to as a comma separated list. You then simply repeat the statement to reference additional stylesheet files for the other media.

The second way of applying styles is to include them directly in the head of the page instead of in a separate file. You do this using the following code:

<style type="text/css">
/* your stylesheet goes here */

This allows you to test the application of your styles without having to constantly swap backwards and forwards between the XHTML and stylesheet files. Once you have everything working the way that you want it to then you would copy the stylesheet content into its own file and replace the style tag and all of its content with an appropriate link tag before uploading the files to your site.

Note that this only works exactly like this if you actually process the page as XHTML. If you process the page as HTML instead then some browsers may not recognise the CDATA tag correctly. To cater for those browsers you can enclose the start and end parts of that tag inside stylesheet comments.

The third way of attaching styles into an XHTML web page is to use a style attribute within the opening tag of the element itself. This is the least useful of the three methods since it results in the styleshheet code being mixed in with the XHTML where it is much more difficult to maintain. This way of attaching styles is probably most useful for the very early stages of testing when you are trying to work out how to apply an effect to an element. Once you have worked out the correct properties to use you would then move them into the stylesheet and replace the style attribute with an id or class.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow