Here is a list of some of my favourite CSS tutorials:
World Wide Web Consortium CSS Tutorials
W3C offer the best free tutorials for beginners I have found anywhere. Whether you want to learn (X)HTML, CSS, PHP or a host of other technologies this site should always be your starting point.
I use this technique a lot, it allows you to render tabs using graphics in CSS. The fact that it uses CSS makes it very easy to add more tabs, you simply add more code in your (X)HTML and a new tab is rendered. This makes it a particularly useful technique for use in dynamic sites as the menu’s can easily be generated programatically
The Hover Box Image Gallery uses only CSS to create a cool mouse over image gallery. I
am not sure how practical this is for most sites, but its a nice technique. More information on Hoverbox CSS can be found here.
Spiffy CornersSpiffy Corners is a very popular technique for creating rounded corners on a box without using JavaScript. If and when CSS3 is released / supported in browsers then this technique will change, as CSS3 has better support for adding images to corners. However, with CSS3 some way off, and the fact that a lot of people will continue using older browsers this (famous) technique will remain in use for some time
I should have put this at the top of the list, floating is an indispensable CSS technique, essential if you want to create multi column CSS layouts.
A long list of CSS tutorials on creating lists!! Lots of useful information on CSS lists to be found, too much in fact
Apply graphical styles to your CSS menus, some very nice examples. ![]()
OK, this is not a tutorial, however this site lists basic CSS layouts, i.e. they are not complete sites, just the bare bones. This makes them very useful as a learning aid as it is easier to see how they work. Using these CSS templates you can more easily build your own design. If you want complete fully featured templates visit the Open Source Web Directory, however, these will be more confusing to a beginner.
Again, not a tutorial but a list of templates. As with the link above the fact that these are basic templates makes them suitable as a learning aid.
Another essential technique you simply must have in your toolbox!
Allows you to switch the style / theme / skin of your site at the click of a button, very nice technique but really for an advanced user who has taken the time to develop multiple skins for a site


No comments yet.