raw CSS examples

Frequently Asked Questions

(Jump straight to the tips) Note the tutorials are being updated and are currently unavailable.

With the W3C recommending long ago that using tables for layout should be avoided and that CSS should be used to separate presentation from content, Web Designers are now faced with the problems of how to present their layout and also how to adhere to the W3C guidelines.

CSS should be approached differently to table design and designers need to get away from the old table based way of design and the inherrent characteristics that tables provide. There's no denying that the equalising columns and vertical alignment behaviours that tables have are hard to duplicate with css in a cross browser environment so the easiest option is not to try and duplicate these behaviours. Work with the strengths of CSS (and there are many) and not with the weaknesses.

This may require a new way of thinking about how you design, which is not a bad thing and usually results in a much better thought out, accessible and usable website.

However, I should also add that if a design cannot be fully coded in css then I have no problem with using a hybrid table/css layout to fulfill the objective required. Of course this doesn't mean that nested tables are ok and the table should just be used for the main structure and css for everything else. In the last few years I have coded many, many sites and only needed to use a table once or twice to construct something for which the css would have been too involved..

The benefits of CSS are many. Your pages become much lighter as all the presentation is kept in a separate stylesheet. Once this stylesheet has loaded the browser can access it immediately from cache for the rest of the site. Changes to layout sitewide can be performed by merely updating one document.

CSS can be used to change the look and feel of nearly all the elements on your page. There are a few exceptions and these are mostly related to form controls (which some accessibility experts would say should not be changed anyway).

Additional stylesheets can also be added to give the site a variety of looks or uses. This is great for accessibility where one style sheet could have large text that is easy to see for the partially sighted.

The power of of CSS is that it puts more power into the hands of the visitor. A visitor can decide what size screen they want, what size text they want and even what stylesheet they want.

Irrespective of all the above, there are of course some obstacles to overcome when using CSS. The first and most obvious is the varying browser support and browser interpretations. This is nothing new as Microsoft and Netscape have been inventing their own proprietary tags for some years now. So this is really no excuse not to use CSS.

The modern browsers (version 6+ etc.) have good support and although there are differences these can be overcome. Of course the first thing you should do when designing a site is to decide what browsers you should support and this comes down to a decision based on your audience or your personal experience. Obviously it would be nice to fully support all browsers but this is rarely possible for older browers. You can however, still leave accessible content for these browsers by supplying them with unstyled content.

The other obstacle to overcome with CSS is learning its commands. I find the best way to learn is to jump right in and get coding. Make as many mistakes as you can and try to fix them. Keep trying out the commands until you understand what they are doing. Start with the simpler basics and then move on to the more advanced techniques once you know what's going on.

Here are a few tips to help you on your way..

First a quick explanation of where to place your CSS.

If you are placing the stylesheet in the same page as the mark up (internal (embedded) Stylesheet) then you must place the style rules between the head tags of your document as follows.

E.G. a real example

If you are placing the stylesheet in an external document (external stylesheet (this is the recommended option)) you must reference the document as follows (where mainstyles.css is the name of your CSS file).

You can also use @import to import the css file but we'll save that explanation for another day.

Styles can be set inline (inline style) by placing the style rule directly in a tag as follows:

Note that inline styles should be avoided at all cost as they go against the premise of separating presentation from content. They are only shown here for completeness.

Now on to the tips:

Frequently Asked Questions

1) To remove the border on all linked images in a page.

Images that have been turned into links get a blue border added to them by default. This was never a welcome behaviour and the way to get rid of it is simply to set all images within an anchor to have border:none.

Add this to your stylesheet:

If you want to add a border to all images use:

Or to add a border to a single image use the following (inline styles for example only).

Obviously you can set the colour and the size of the border as desired. There are also a number of alternatives to the solid border and they are as follows:

Here is an example of a solid green border that has been given a margin of 5px and has the border set to 2 px dashed (not the most pleasing combination of colours!).

[Back to Top][Back to Faq]

2) Why aren't my link colours working?

If your link colours aren't working and you have them defined in your stylesheet then you may have inserted them in the wrong order.

Due to the Cascading nature of style sheets, if the link properties are not stated in the following order in your style sheet then the result may not be what you expect.

This is the correct order:

1 a:link
2 a:visited
3 a:hover
4 a:active

e.g. Define your stylesheet like this:

There may be other factors to take into condsideration of course and it may be that you have given more weight to an anchor previously by including the full path.

For example if you have defined an anchor state like this (or any element not just anchors):
#outer a {color:red}
And then you try to define a separate class for an anchor within that section as follows:
a.another {color:green}
And then you call it like this: <p id="outer">[<a href="#">Test 1</a>] [<a class="another" href="#">Test 2</a>]</p>

You may be surprised to know that both anchors are still red and not one red and one green. The reason for this is that for the first anchor you have supplied an id (which carries more weight than a simple class) to precede the anchor definition. Without getting into the specific details of weight and specifity just remember that when you set a style and want to over-ride it then follow the same format that you used for the original style and include the full path plus the new class.

The old and new style should look like this:

#outer a {color:red}
#outer a.another {color:green}

Now we can be certain that our .another class will show because it is preceded by #outer as per the original statement and an extra class added at the end.

Another way to ensure a style over-rides all others is to add !important to it as follows.

a.another{color:green!important}

The above will over-ride all other styles unless of course they have !important added. As a rule of thumb its not a good idea to litter your pages with !important as simply keeping the weights even as shown above is good enough. However !important can be used in those occasions where you need to make sure that something is implemented and perhaps where you are working with multiple stylesheets and do not have time to track back and check everything.

[Back to Top][Back to Faq]

3) How do I apply a border to a table?

As the bordercolor attribute has been deprecated, it is necessary to apply the border colour via CSS.

Set up a class that you can apply to certain tables as required.

e.g.

If you wish to colour individual cells you can set the border for the table data tag (td) instead. First you will need to collapse the borders into one using border:collapse collapse on the table tag.

e.g.

[Back to Top][Back to Faq]

4) Why isn't the <div> centred?

To centre a block level element (e.g. <div>) in CSS all you need to do is set the left and right margins to auto and the <div> will centre itself as long as it has a width defined.

e.g.

 

However IE5 doesn't quite manage it correctly and the following hack needs to be applied. You need to surround the div you want centred with another div. The outer div will have the style "text-align:center" and the inner div will be set as in the example above with the left and right margins to auto. In doing this IE5 will now centre the div and it will also not make any difference to other browsers. The only thing that you need to do is to set the inner divs text-align property to whatever it should be i.e. "text-align:left" as the hack for the outer div will make the text centred.

(Also note that there is a major bug in IE6, in that if you use the xml declaration <?xml version="1.0" encoding="iso-8859-1"?>. This will make IE6 behave in quirks mode similar to IE5.+ and use the broken box model among other things. The answer is just to leave the xml decalation out altogether as it is optional anyway unless you are actually using xml of course. Just remember to enter the character encoding in your meta tags instead.)

example:

A lot of times you will be able to use text-align:center in the body tag instead for ie5 to center and the just set the text-align:left on the nested block level elements. IE5.+ are nearing the end of their useful life anyway so you can soon forget about them anyway.

[Back to Top][Back to Faq]

5) How can I have sets of different colour links?

So you've managed to colour your links, but now you want to have some other links coloured differently. How is this achieved?

There are a number of different ways but first lets recap on how to set all link colours on your page first. You use the Pseudo Class (classes for intangible characteristics you can't mark manually) and colour the links in the correct order as below. (See faq2 for more information on why order is important.)

The above code will automatically colour all your links and there is no need to set up a class around the links as in previous examples.

Now if you have a set of links that you want a different colour you can add a class to the style definition for the links. Therefore the links that are within the class that you define will behave differently to the links on the rest of the page.

e.g.

and then in the body:

You must set the class in each <a> anchor for this to take effect. However there is a more efficient way to code the above example and that relies on using the class in the <div> tag and not in the <a> tag. Also the format is slightly different as follows.

e.g.

The point being that in the second version there is a lot less code especially if there are a lot of links as you can just set the class in the div. You just have to make sure that all anchors (<a tags>) are inside the block that has a class of rightlink.

In the first version the class has to be put in every anchor tag, which makes the page heavier and requires more coding if you have a lot of links.

There is a shorter way of defining links as long as you are not using named anchors in your mark-up. You can simply define the 'a' state (e.g. a:{color:red}) and that will define all states of the anchor in one go (i.e. link, visited, hover, active). You then just define the differences you want in the other states.

There are other anchor states such as :focus and things like visited:hover but I will leave you to investigate these further.

[Back to Top][Back to Faq]

6) Can I change the cursors appearance?

You can change the cursors appearance as follows (although this is not supported in some browsers):

Cursor styles:

The property cursor may have values of [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help | inherit] ]

e.g.

[Back to Top][Back to Faq]

7) How can I turn off scrolling?

To turn off the scrollbars all you have to do is this:

However turnng off the scrollbar is rarely a good idea unless you have a perfect reason for doing so.

By default IE puts a vertical scrollbar on every page even when it doesn't need it. If you want to get rid of it the you can use the following without ill effect.

Now the scrollbar will only pop in when needed. Of course this means that the page width will need to shrink a bit when this happens and the content will shift to the left slightly. This is exactly what happens in Mozilla anyway as the vertical scrollbar is removed by default and of course some users don't like this effect and would prefer mozilla to behave more like ie's default state

One way of doing this is just to set the height to greater than 100% and then the scrollbar will click into view.

The height needs to be hidden from IE5 mac with the mac hiding hack above but if you are not worried about ie5mac then you can remove the comment hack.

[Back to Top][Back to Faq]

8) Can the horizontal rule <hr> be changed by CSS?

To change the lifeless standard horizontal rule you can use the following styles:

 

Note when using the hr that mozilla uses background colour and IE uses foreground colour which means it's best to use both to be sure of the right result. Also note that in IE there is no way to collapse the default margins on the hr and if you want pixel precision then use a div instead as shown above, or use existing elements for your borders without adding extra mark up.

[Back to Top][Back to Faq]

9) How do I get rid of the margins around the page?

In order to get rid of the margins around the page you also need to get rid of the padding that some browsers use instead of margin.

The simple code to achieve this is as follows:

That's all you need to do.

In fact we could take this a step further and apply the technique to all elements and thus equalise all the browers defaults in one go.

The above uses the universal selector (asterisk - i.e. *) which is basically like a "wild card" and will represent any or all elements that match its position. This allows us to set all the padding and margins of all elements to zero in one go. A lot of beginners do not realise that the default padding and margins are applied by the browser and therefore vary greatly between browsers. With the above method we avoid a lot of discrepancies but of course we do need to set the padding and margins that we want on those elements as we go otherwise there will be no spacing between elements at all.

I usually start a basic stylesheet like this:

This allows some basic defaults to get on with. Note that when re-setting padding and margin to zero you will lose the bullets on lists because some browsers use a default left padding in order to show the bullet and some use a default left margin instead. Therefore I always include a 16px left margin for the ul so that the bullet will show and browsers will be consistent.

There are some views around that using the universal selector to address all elements will slow the browser down, however I have used the technique on nearly all the sites I have done and never noticed any problems at all. However that does not mean that the statement isn't true but just that I have never encountered a problem with it.

There is one more side effect and that is in mozilla browers where input buttons lose their depressed effect when pushed once you reduce the padding an margins. It's a small issue but one you should be aware of.

[Back to Top][Back to Faq]

10) Why are my div's a different size in IE?

IE5, IE5.5 and (IE6 in quirks mode) have a completely broken Box model.

The width of a box (i.e. a containing area)in CSS is made up of the width + border +padding (+margin). So according to correct standards a box width of 300px with a padding of 10px and a border of 5px requires an area of 5+10+300+10+5=330px. However IE5.+ has misinterpreted these rules and when a width of 300 is declared IE5 works backwards and subtracts the padding and border from the specific width. i.e. +300-10-5-5-10=270px.

So now compliant browsers have a usable width of 300 but IE5.+ has a usable width of 270.

This is a major problem when dealing with pixel precision and the solutions are not pretty. The most obvious solution is not to use borders and widths and the problem goes away. The other solution is to allow your design to be flexible enough not to matter about the pixel differences.

There are some hacks that can solve the problem completely and they are described below.

Hack 1 - DIV within that DIV: Create a containing (outer) div that has no borders or padding and then inside this containing div place the original div that you wanted to create, but do not assign it a width (it will fill up its parent DIV). In this way the inner div will be contained within the outer div and the size will remain consistent throughout browsers. You can assign a border and padding to the nested DIV but still be able to keep the size the same as the outer div.

Note that margins are handled ok so you can leave them out of the equation.

Although the above is a hackless solution I still consider it a hack because you are adding unnecessary html to accomplish it. In fact I think its a greater hack than using a css hack instead because once you add html to your page you are unlikely ever to change it, whereas the css can easily be adjusted later on when the hack is no longer required. Keep your hacks in the stylesheet and not in the html - that's just my opinion and there are many other differing opinions about so make your own mind up.

Hack 2 - Parsing Bug: The second hack is to make use of a parsing bug so that two different sets of values can be passed to the different browser implementations.

As this is already well documented on the web I will merely point you in the right direction.

Simplified Box Model Hack (SBMH)

[Back to Top][Back to Faq]

11) Where do I place my styles?

If you are placing the stylesheet in the same page as the mark up (internal Stylesheet) then you must place the style rules between the head tags of your document as follows.

e.g. a real example

You can also set a style inline (inline style) by placing the style rule directly in a tag as follows:

The span style only applies to inline elements. .

Style rules can be placed in most tags such as anchors and images and the rules that apply will be the same as for the original tag. i.e. If you place a style rule in a block level tag then the style will affect all the elements contained within that block unless it meets an inline style,such as span, where the inline style will take over for the duration of the span only.

Note that inline styles should be avoided at all cost as they go against the premise of separating presentation from content. They are only shown here for completeness.

[Back to Top][Back to Faq]

12) How do I link to an external Stylesheet

If you are placing the stylesheet in an external document (external stylesheet) you must reference the document as follows (where mainstyles.css is the name of your CSS file).

If you want older browsers such as Netscape 4 not to see your stylesheet at all you can use the import rule to import your stylesheet as Netscape 4 doesn't understand it.

Which means that you can put your advanced CSS in this file and Netscape will ignore it. You could then make another stylesheet that Netscape 4 can use with simple formatting that it understands and place a link to this before the import rule.

e.g.

This means that netscape only gets the first stylesheet and compliant browsers get both.

[Back to Top][Back to Faq]

13) What do I put in the meta tag for css reference?

Although this is rarely used these days I have included it for completeness and you should ensure that the following is placed between the <head> tags in your documents that use CSS. This helps the browser identify the content.

[Back to Top][Back to Faq]

14) How do I draw a box with CSS

To draw a box of a fixed shape all you need to do is specify the width and height of the area. You can then add padding and border to your box which will surround your content. Padding is the distance between the content and the border. The margins you specify will place the box (not the content) at the specified distance form its neighbours. You can the set the margin on all four sides of the box and they can all be different sizes to suit.

e.g.

If you don't know the size of the content you can always set the width and height to auto so that the box expands and shrinks as required. However the default width of auto on a static container is effectively 100% and will not shrink-wrap the content in the same way that floats and absolutely positioned elements will. height:auto on the other hand will do just what it says and track the content as required.

Note that you could use the shorthand for the margins which will shorten the code down considerably. The shorthand is like this:

margin:5px auto 5px auto

That would effectively refer to the margins in this order:margin:top right bottom left

In fact it can be shortened even further by using just two measurements.

margin:5px auto

When you use just two measurements the the first one refers to the top and bottom margins and the second one refers to the left and right margins.

There is on fact another shorthand option and that would involve using three measurements e.g. margin: 5px auto 5px. When supplied in that order the first measurement applies to the top margin and the econd measurement applies to left and right margins and the third measurement applies to bottom margin. (The shorthand for padding is the same as above.)

One thing to note when using shorthand is that any properties you don't specify revert back to their default values which may over-ride styles you have already set.

[Back to Top][Back to Faq]

15) What size text should I use in my stylesheet?

CSS is very handy when it comes to specifying the size of your text. You can specify it in a number of formats depending on the application you want it for.

On the surface font sizing seems quite simple but it is actually quite a complicated topic and whatever method you choose you will certainly run the risk of upsetting somebody. Sometimes its safer just to do nothing and let the visitor see the site at their own default settings.

However things aren't always as straight forward as that and text often has to fit in with the design and be controlled in some way.

One of the first things to remember though is that ultimately the size of the text should be left up to the visitor to decide as we all have different eyesight requirements. Most modern browsers will allow you to change the size of the text from the main menu. In IE this would be from the View menu and then select Text and the options are as follows:

These sizes are sizes that the visitor can use irrespective of the size that you have set in your mark up. Well that's the way it should be but unfortunately if you specify your size in pixels IE6 and under will not allow the above user menu to work and the text will remain exactly the same size. (Mozilla however will size the text as required.)

So what do we use if we want the visitor to be able to specify their own size?

Here is the list of available font sizes:

pixels
points
in
cm
mm
Picas
ems
exs
%

and we can also use

xxsmall
x-small
small
medium
large
x-large
xx-large
smaller
larger

Which relates similarly to the sizes that you can specify from the browser in IE6.

e.g.

The user will then be able to change the size of text as required. However ie5.+ get this wrong and willrender the keywords at one size difference to ie6 which means you need to add a hack to support ie5.+

We shouldn't use Points either unless the output is to the printer. Points are a fixed size that will not scale and are ideal for printed output. The same goes for in cm and mm as these are sizes that won't scale but are ideal for printing or for fixed size content.

Therefore we are left with % (percentage) and ems. Percentages as explained by the W3C are as follows:

"A percentage value specifies an absolute font size relative to the parent element's font size. Use of percentage values, or values in 'em's, leads to more robust and cascadable style sheets."

An em is the equivalent to the letter M in the parentfont-size and ex's are equivalent to the small letter x of the default font size. Both of these can be used to set size that is relative to the standard. Em and Ex sizes are based on a size defined with the CSS body style. For instance, you'll see in the style sheet for this page body { font-size: small}. That means that 1 em is equal to the size "small."

So if a normal size is 1 em or 100% we can set text that is twice the size by specifying 2em or 200%. In this way the size will be relative to the screen size and font size that is used and therefore should be consistent among compliant browsers.

e.g.

As already mentioned above it seems that whatever method you use there will always be someone who disagrees, so with that in mind I urge you to make up your own mind and search out alternative advice as well.

Here are some links to get you started:

• Dive into accessibility
• The Noodle Incident
• Big Baer

[Back to Top][Back to Faq]

I have also compiled a number of FAQ at Sitepoint which go into further details on the above issues and issues like "haslayout" and is well worth a visit.

• Home
• 3 column examples
• Tutorials/faq
• Contact