Feed on

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.

Sliding Doors of CSS

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

Hover Box Image Gallery

The Hover Box Image Gallery uses only CSS to create a cool mouse over image gallery. Ihover.png 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

Float Tutorial

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 ;-)

Vertical Menus

Apply graphical styles to your CSS menus, some very nice examples. navistyles.png

Free CSS Templates

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.

Forty CSS Layouts

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.

CSS Drop Shadows

Another essential technique you simply must have in your toolbox!

Style Sheet Switcher

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

Related Posts

  • Free CSS Tutorials on You Tube
  • Free Web Design Tutorials
  • Validate your XHTML and CSS Code
  • How to learn web design
  • RSS feed


    No comments yet.

    Sorry, the comment form is closed at this time.