Planning Your Stylesheet – The Definitive Guide

Mark — Wed, 05 Nov 2008 08:06:07 +0000

The more we rely upon CSS, the larger and more complex stylesheet files become. Planning and organising your stylesheet is essential to creating a lean, manageable website. There are many ways of organising CSS code but the following are best practice…

Comment your stylesheet

Commenting your stylesheet makes it much easier to find the information or the commands you’re looking for.

Meaningful comments include:

Last updated – This information can quickly let developers know about recent changes made to the file:
/* WEBCREDIBLE Updated: Thu 1 Jan 2008 Author: John Doe Updates: Add new section 'Forum' ––––––––––––––––––––––––––––––––––––––––––––––––*/
References – Comments can also be used as a quick reference for the main style guides applied throughout the site:
/* COLORS Body Background: #FFFFFF; Main Text: #000000; Link: #F0F0F0; etc ... */
Organisation – Use comments to identify the different sections of the stylesheet:
/* =HEADER ––––––––––––––––––––––––––––––––––––––––––––––––*/

/* =FOOTER ––––––––––––––––––––––––––––––––––––––––––––––––*/
Reminders and notes – Leaving reminders and notes for yourself and other developers can help avoid confusion later:
/* The width is overwritten for IE 6 in: cssIE.css */ div {width: 150px;}

Define general rules and main classes at the top of the stylesheet

Set the styles of generic HTML elements, for example:
body { background: #FFF; font: Arial, sans-serif 75%; } h1 { font-size: 1.2em; color: #000; } h2 { font-size: 1em; color: #F0F0F0; } img {border: 0;}

Then, list the classes that will be most commonly used across the site, for example:
.hide { position: absolute; left: -9000px; } .required { background: url(#) no-repeat 100% 0; } .fl { float: left; } .fr { float: right; }

Order the CSS in the same order as the HTML

The order of the HTML should be used to determine the order of the CSS sections. CSS files can sometimes be large and commands difficult to find. Having some correlation between the HTML and CSS file makes it easier to locate how an element is being styled.

Know when to use elements, ids and classes

Using the correct selector type means your CSS file can be significantly reduced in size:

Elements – Elements such as body, (), paragraphs, (
) and headings, (
,
etc.) should be used to define general rules
IDs – These are unique identifiers and should only be used once within a document. IDs should be used to style major structural sections of a web page such as the header or the footer.
Classes – These can be used on any type of HTML element.

Too many ids or classes can overload the HTML and the CSS files unnecessarily. Try and define as many rules as possible by referencing elements and/or ids by nesting the selectors.

Imagine the following HTML code:



Item 1

Because each of the list items has a common parent, descendant selectors can simplify the CSS markup as follow:

#nav { properties listed here } #nav li { properties listed here } #nav li a { properties listed here }

Name classes and ids logically

Don’t name classes and ids based on their color or position as these may change in time. Try and give them a name that’s likely to remain relevant over time. Also, use hyphens ahead of underscores as certain old browsers have a hard time understanding the latter.

Use a common naming system for your classes and ids. It will save a lot of time and confusion when developing, debugging and updating documents.

Nest CSS selectors

By nesting CSS selectors (i.e. using more than one CSS selector in one command) we can apply styles by navigating the HTML document tree. For example, to apply a colour of red to all paragraphs within a div, we can use the following rule:
div p {color: red;}

Take advantage of inheritance

Some CSS commands inherit from their parents whereas others don’t. The use of nesting means you don’t have to declare the same properties over and over again.

Generally speaking, text-related CSS commands (e.g. font-size, color) are inherited by descendant elements, whereas layout-related commands (e.g. float, width) aren’t inherited .

Group selectors with common CSS declarations

You can avoid specifying the same set of properties several times by grouping the selectors that share the same CSS declarations together. For example:
h1, h2, h3 { color: black; padding: .2em; }

This article was written by Brigitte Simard. Brigitte’s crazy about accessibility and CSS – so crazy that she works for Webcredible, an industry leading user experience consultancy, helping to make the Internet a better place for everyone. She spends much of her time working on the world’s most accessible CMS and is very good at CSS training.

Note: There is a rating embedded within this post, please visit this post to rate it.

7 Tips To Make Your Website Super Accessible

Mark — Wed, 01 Oct 2008 02:57:24 +0000

Accessibility is a crucial factor in website designing. Investing thoughts and elements on how the website looks is all well but what is more important is how accessible the it is to visitors and prospective customers.

An ideal website design focuses on letting the visitors attain a higher level of accessibility into the website. Here are some tips that can help you create a website design that allows visitors to come through with minimal troubles:

ALT Text

Do make sure to include meaningful ALT text in your website design. Visually impaired users are able to browse through the site when their screen readers read aloud the ALT text. With the ALT text missing from your website design, your website will potentially be unusable for your blind visitors and you could end up losing out on potential customers.

Correct Spelling

Screen readers are not able to pronounce words that are misspelled. So, if the content of your website has any spelling errors the screen readers will completely ignore the word and the sentence will make no sense to the user. Visually impaired users have a sense of your web design through what the screen readers portray. And if they have a bad impression, you stand to lose business. Avoid abbreviations as much as you can. Just like screen readers don’t recognize spelling errors, the same way it fails to know abbreviated words. They try to spell it out and end up pronouncing some undecipherable word. For example you might be able to know that ‘eg’ is example but the screen reader may pronounce it as ‘egg.’ Thus, it is always better to use good website design practices to make life easier for your users.

Contrasting Colors for Text

Dark text on a light or white background is the tried and tested best for most people as it increases readability. Even if you are using other colors make sure to keep the text color in dark contrast to the background.

Readable Text

Make your text resizable so that people with poor eyesight are able to resize the content matter to suit them.

Colors and CSS

Adjust the colors of your website using web design solutions such as CSS. Thus, if by chance visitors find your default stylesheet hard to use, they can turn it off and use their own stylesheet.

Sensible Links

Make sure that all the links on your website make sense even out of context. Visually impaired people often skip through the links on a page. Links like ‘Click here’ does not make any sense to them. rather try framing ‘Click here for more information about website design.’ This would tell them what exactly are they for.

Maneet Puri is the Director of LeXolution IT Services, a leading web design firm in India that specializes in web designing and development, website maintenance and internet promotion. With 10 years of industry experience to boast of Maneet advises his clients on hiring offshore web designing services

Premier Web Templates» stylesheets