March 2004
CSS design: The basics
What is CSS design & why is it important?
CSS design represents a new, much more powerful way to lay out websites. Traditionally, cumbersome tables have been used to present web pages. In the future this practice will gradually fade out to be replaced by CSS design. To witness its true power have a look at the CSS Zen Garden
Using CSS design allows your pages to download more quickly, makes your website much easier to manage, and has numerous web usability, accessibility and search engine optimisation benefits. Basically, CSS design is a really good thing.
If you're completely new to CSS then you can find an excellent beginner's tutorial at Webmonkey.
Positioning with CSS
Advert: User experience consultant job vacancy
Webcredible currently has a job vacancy for a user experience consultant!
We're looking for someone to work on a variety of challenging usability, IA & design projects for household name clients.
If this sounds interesting then read about our user experience consultant job vacancy and send over your CV!
There are two main types of CSS positioning: relative and absolute. Absolute CSS positioning places an object in a specified part of the screen. Relative CSS positioning moves an object in relation to where it's supposed to be.
So, to position something 100px from the top and 200px from the left of the screen, you would use this CSS command:
{
position: absolute;
top: 100px;
left: 200px
}
To move an object 2em down and 50px to the left, use this CSS command:
{
position: relative;
top: 2em;
left: 50px
}
You can also use the margin attribute to move objects relatively:
{
margin-top: 2em;
margin-left: 50px
}
Page items not enclosed within the position:relative CSS command will not be affected in any way by it. Page elements featured after the margin CSS command, on the other hand, will have their position adjusted as a result of it.
Making navigation items with CSS
Long gone are the days where you have to use gif images to make fancy navigation items. CSS has opened up a whole new realm of opportunities.
The most important CSS tags here are probably the background and border tags. You could make a basic button with these CSS commands:
a
{
color: #fff;
background: #f90;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #99f #008 #008 #99f
}
a:hover
{
background: #fa1;
border-color: #008 #99f #99f #008
}
This would create a link like this:
Go on, put your mouse over it!
Please note, this article barely scratches the surface of CSS design. To find out more please check out the rest of our CSS resources area.
This article was written by Trenton Moss. Trenton's crazy about web usability and accessibility - so crazy that he founded Webcredible, an industry-leading user experience consultancy, helping to make the Internet a better place for everyone. He's very good at running CSS training and spends much of his time working on the world's most accessible CMS.
What next?
- Read more CSS articles on this website
- Get a highly accessible CSS website through our accessible web design expertise
- Optimise the accessibility of your website with our accessibility consulting services
- Get our accessible and usable CMS so your site offers outstanding accessibility
- Attend our interactive intermediate CSS training and advanced CSS training courses
Republish our CSS articles
All our CSS articles are available for republishing, provided the author bio and links in the bio remain intact. You can also use our RSS news feed to republish all of our CSS articles.
Bookmark or recommend this article
Add this article to:
You can also tell a friend about this article right now!