Despite the ability to search the forums, the same questions have a tendency to be asked again and again. This resource has been compiled to give you a base point for your CSS questions. It will be added to as and when required.
Two books I highly recommend are by the CSS Guru, Eric Meyer:
Eric Meyer on CSS - ISBN: 0-73571-246-X
More Eric Meyer on CSS - ISBN: 0-7357-1425-8
Published by New Riders
Software:
Whilst you can code your CSS in any text editor, I personally use and recommend TopStyle. It is available in both a free and a Pro version.
For Mac users, skEdit has been recommended though it has a cost od $25.
Two tutorials are available:
This one explains how to create a CSS driven menu system - both vertical and horizontal.
It will tell you everything you need to know with one or two bits left for you to work out but the answers are in the work already covered.
Then it becomes a question of personal styling.
http://1ontheweb.net/downloads/Creat...enu_system.pdf
This one gives you the basic templates, with full details of what's where and why, for laying out your web sites. Remove unwanted bits and add others as required. Fixed and fluid layouts are catered for.
http://1ontheweb.net/downloads/Templates.zip
Starting from zero:
Different browsers apply different levels of padding and margin on various elements by default. To be sure you know where you are starting from, always include this code at the start of your css file.
- Code: Select all
* {padding: 0; margin: 0;}
Font sizing:
The best method, in my opinion, for sizing fonts is to use the 'em'. This gives the end user the greatest flexibility to adjust the font size to their needs. However you need to be aware of certain things.
To allow for a weird bug in IE, set a base point on the the <body> tag - font-size: 100.01% - nominally 1.
You can set individual sizes to be above and below this.
Remember that em is a relative size and relative to the next size above it in the container hiearchy.
Take the following example:
- Code: Select all
<div id='outer' style='font-size: 0.8em'>
<div id='inner' style='font-size: 0.8em>
...
</div>
</div>
The font size in the outer div will be 0.8 of whatever the user has set as their base font size. The font size in the inner div will be 0.8 of 0.8.
So if the base font size is 12px, allowing for rounding up, the outer div will be 10px and the inner div will be 8px.
Note that in browsers like Firefox and Opera, the user can also set a minimum font size so how ever the sums work out, it will never display fonts smaller than this.
Style code location:
Always keep your CSS code in a seperate file(s) and use the <link... tag to link the file into yor html pages.
Keep code that makes tweaks to your CSS to accomodate browsers like IE6 and below in a seperate file and load it after your default file using the technique shown below:
- Code: Select all
<!--[if lte IE 6]>
<link rel="StyleSheet" type="text/css" href="ieonly.css" />
<![endif]-->
Sign your work:
What this means is giving your pages an identity that browsers can recognise.
Why you might ask? The answer is increased accessibility.
A lot of people do not realise that the <html> tag can have an id just like any other tag.
Lets assume that you have coded the following:
<html id='mysiteid'>
It's usual to use the site's actual domain name, but without the hyphens, dots, etc.
Now if an end-user is going to be a regular visitor to your site but need to adjust font, colour, etc., because of accessibility needs, they can create, or have created for them, a local style sheet which is coded up as follows:
#mysiteid h1{
...
}
#mysiteid p {
...
}
and so on.
Now every time they visit your site, the pages are automatically adjusted to meet that user's requirements.
The cost to you, the developer, to include this is trivial. You can explain its availability in the section on your site about accessibility.
Just as it's good practice to use em's rather than px's to specify font sizes. It gives the end user options.
Remember also that a users local css file takes priority over other style sheets unless you have used the !important override.
I don't think we give people with accessibility needs enough credit. If you have a need and there are ways you can improve the situation, you will learn how to make the tools work for you.
Other references:
http://www.w3schools.com/css/default.asp
Login
Contact Us
Advertise
Page Info
