Web Centre

Advanced CSS

Organising your CSS

One really useful thing you can do is organise your CSS files. Doing this is of benefit to you and anyone else who tries to understand what you've done. Using the comment function you can add organising notes into your CSS. For example:

This helps you split your styles up into logical groupings. Then if you want to change something you can go straight into the bit you want to edit. The groupings you choose don't have to be based around the actual sections on the page - they can be based on something else. You might for example want to put all the link styles together in one section. It's up to you, but you should always do it as if someone else might see it later, so use common sense.

Tricks and workarounds for browsers

One thing that people who use CSS a lot have come to realise is that not all CSS is supported by all browsers and that trying to make a Web Site that displays exactly the same on all browsers can be a nightmare, especially if it is quite a complex design. Over the last few years members of the CSS community have invented various clever ways of beating or exploiting the inadequacies of various browsers to achieve their desired effect. New methods come out all the time and old ones get updated - so often the information you find on sites differs but there are a few core ones that remain consistent.

There's also a further hack that involves putting an underscore before a style element that means that only IE on the PC will see it. In the following example you can see both these hacks at work - meaning that one style will display on IE on the Mac, one will display on other browsers and one will only display on IE on the PC...

Here are a few sites that outline some of the commonly used work-arounds or 'hacks' as they are often called.

http://centricle.com/ref/css/filters

www.stylegala.com/resources/css_hacks.htm

DIV vs table - 'to Div or not to Div'

For years Web developers have been using tables as a simple and reliable means of applying structure to their sites. Tables help you divide the page into columns and rows, and can give you space for your headers and footers. The table as a structure can be made invisible and as such has no impact on the outward appearance of your site. The only major problem with tables is that they are not great from an accessibility point of view. Tables are really meant for tabulated data and as such the information in them is often read in a very uniform way i.e. via columns or rows, and if you are blind and using a screen reader the order in which it reads a Web page done with tables may be confusing.

So then along came the DIV - a HTML tag which stands for 'division' and which can be used to define an area on the page. With further CSS classes applied the DIV can be given shape, colour and size and starts to become a means to control and divide content on the page. DIVs are always read by screen readers in the order that they appear in the HTML and knowing this developers can arrange their content in a way which make sense no matter what the method used to access the page and whether or not the CSS is working.

Since DIVs have started being used in this way there has been a lot of talk about tableless sites. The only problem with this stance is that at the moment (summer 2005) not all browsers support all the features of DIVs and as such it is hard to build a site that looks sensible on all browsers. The current position then is that site developers are in limbo - stuck between accessibility friendly tableless designs that don't quite work properly on all browsers, and reliable table based designs that do, but are not as accessibility friendly.

Lists of links

The basic way of doing a list of navigation links is to have a series of <p> tags arranged either horizontally or vertically. For example:

or...

But a better way of tackling navigation lists is to use the actual list tags <ul> and <li>. For example:

You can use your CSS to control the look of the links including removing the bullets and the indent. Whilst both methods are valid, by using a list you create an association between the links that remains obvious despite what you do with the CSS. The links will be bulleted together as a list even if the CSS wasn't working at all. It is also the case that screen readers have an easier team interpreting lists than they do a bunch of separate links.

Background images

It is possible to create a style that has a background image associated with it. This is useful if you want to create some kind of more interesting background for some element on your page. There are two typical uses of such a technique - one being to create a purely decorative background for an area of your page, the other being to create some kind of specific background for a button or link. In the first of these two instances its not really necessary to provide any kind of ALT text for the image as the user would not be missing much if they couldn't see it, but in the second instance where the image is associated with a link or button then it is helpful to provide ALT text. This is not done in the usual manner as the image is in the background, instead you give the link or button a TITLE. For example:

Print CSS

It is possible to do a second style sheet for your site that is only activated if someone chooses to print your site. Often people use this technique to make sure that a quite complex site prints ok. The print.css sheet might have more simplified styling and might lay the text out in a way which is more helpful for printing. The way you make sure that your print.css is used when you print is by means of the 'media' attribute which you have in addition to your normal CSS reference line.

Why create a separate "printer-friendly" version of a page when, in most cases, you can simply restyle the original?

CSS expert Eric Meyer on the care and feeding of print style sheets.

One of the interesting 'retro' features of print.css is that you can if you wish specify fonts, widths and heights in the old way i.e. using pts and pixel widths. You would think that this flies in the face of Accessibility but it doesn't. Web accessibility legislation is relevant for the Web not for printed documents. With a printed document you can revert to using the techniques that are more appropriate for printed materials.

You can get a better understanding of how having a separate style sheet for printing can help users of your Web Site by having a look at the following examples. The first image in the example below demonstrates how a page might look when it is printed without a print style sheet and the second image shows the much cleaner looking printout which does use a print style sheet. In the second image in the example we have set the header image in the top right corner, the bottom navigation, side navigation and top navigation to not display. We've also added the University logo on a white background, made the text a serif font in point sizes and all the links are now displayed in the default colour of blue.

Download normal CSS ZIP 1KB

Download print CSS ZIP 1KB