Top 10 CSS Tutorials

April 15th, 2006
90 Comments

There’s a lot of really cool things that can be done using CSS and I’ve found some of the following resources to be very helpful to inspire ideas and learn new techniques. There’s a lot of good CSS tutorials out there so it’s pretty hard to narrow it down to only the 10 best. So instead of taking this list as the top 10 consider it as a collection of 10 great tutorials. I recommend having a good working knowledge of CSS/HTML before trying any of these on your own site.

continue with the tutorials

1. Hoverbox Image Gallery - This is a very nice roll-over photo gallery that uses nothing but CSS, that’s right, no JavaScript. There is definitely a need for better photo galleries and it’s very simple to add a image gallery like this one. It’s also looks very nice, better than 99% of the image galleries out there. View the example.

HoverBox

2. CSS Bar Graphs - A very simple and great tutorial for creating both vertical and horizontal bar graphs. View the examples.

Bar Graphs

3. CSS Vertical Menus - Here’s bunch of very nice vertical menus that can be used any way you see fit. These are actually free menus that are available for download, awesome. Learn more.

Vertical Menu

4. Listamatic - This isn’t just one tutorial, there is actually hundreds of them. All for building lists in CSS. Any kind of list you can image there’s a tutorial for it here. This is a very awesome resource that has helped me a number of times.

5. Floatutorial - Like #4 this is a whole bunch of tutorials rolled into one page. Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. Anything you can imagine using floating elements for is covered here.

6. Rounded Corners - There are tons of ways to make rounded corners with CSS. What I like about this particular tool is that it’s done without the use of images or JavaScript. Why not just use images? So you can cut down and bandwidth and load time. This is a tool, not a tutorial. All you do is enter in the colors you want and the class name and it generates the code for you. Very nice.

Rounded Corners

7. 40 CSS Layouts - Here’s another one that isn’t a tutorial. It’s a collection of 40 valid CSS based layouts without using hacks or workarounds. Instead of just downloading a layout from here I would recommend looking at the code and figuring it out from there. Sure it’s a little harder but just remember the old saying about teaching a man to fish.

8. CSS Photo Gallery - Here’s another great tutorial for building very beautiful image galleries. This one is a little different though, it’s a multi page image gallery. Like the one above this one is done with pure CSS, no JavaScript. It validates and the author claims it works in IE, I haven’t verified that but I see no reason to believe otherwise.

Photo Gallery

9. CSS Drop Shadows - This is a great tutorial that will show you how to add a drop shadow effect to your images using CSS.

Drop Shadow

10. Style Sheet Switcher - Have you ever wondered how some websites offer you different choices so you can select a theme? Wonder no more. Follow this simple tutorial and you can offer your users control over the look of your website. You can break it down into individual preferences for fonts, colors, layout or orientation.

Style Switcher

What are some of your favorite CSS tutorials?

CSS, Web Design, Tutorials

Posted in: Web Design.
Trackback URL

90 Comments

  1. Paul Stamatiou on April 16th, 2006

    Very nice collection Cameron! I’ve visited your site several times before and there’s always a reason to come back for more. Keep it up.

  2. Derek Punsalan on April 16th, 2006

    I can’t argue with any of your Top 10 choices. Nice job collection a group of tutorials / tips that every CSS users would benefit from knowing.

  3. Jesse Jenken on April 16th, 2006

    Well done! I just had a chance to see CSS in action in an UNDERSTANDABLE way at my friend’s place the other day (www.tylercranston.com), and I must say it’s not as scary as it seems! I love the fact that dreamweaver makes it STUPID easy to code, and I’m planning on moving my blog off of blogger.com and over to my own server once I get my new place all in order. Your site will DEFINATELY be hit again by my box - I love the gallery - It’s exactly what I was looking for!

    Don’t stop. There’s too many poorly designed sites out there. Web 2.0 is on the come-up!

  4. stacman on April 16th, 2006

    Thanks for compiling this list, some very useful tools here.

  5. Ivan Minic on April 16th, 2006

    Bravo! :)

  6. Cameron on April 16th, 2006

    Thanks everyone, but the people that really deserve the thanks are the ones who actually wrote the tutorials. I’m just trying to give back a little by sharing the ones that have helped me along the way.

    Peace!

  7. meneame.net on April 16th, 2006

    Top 10 en tutoriales sobre CSS

    Hoy en digg y del.icio.us hacen referencia a "Top 10 CSS Tutorials", un post en el blog de Cameron Olthuis en el cual recomienda según el algunos de los mejores tutoriales sobre CSS.

  8. Greg-J on April 16th, 2006

    Hi Cameron,

    As the creator of SpiffyCorners, I just wanted to say thank you for including me in your list. It’s nice that so many people appreciate it. I caught a lot of flack from the higher ups in the design world, but the good far outweighed the bad.

    -Cheers on the list. Good stuff!

  9. DEFA.Labs » Blog Archive » 10 лучших инструкций по CSS on April 17th, 2006

    […] http://www.cameronolthuis.com/2006/04/top-10-css-tutorials/ Posted by ansk Filed in HTML+CSS […]

  10. Klian on April 17th, 2006

    Nice collection!! Very useful

  11. Proletarium — 10 buenos tutoriales de CSS on April 17th, 2006

    […] 10 buenos tutoriales de CSS En: CSS, Diseño, outbox — Abril 17, 2006 […]

  12. manu on April 17th, 2006

    Sorry but the spiffycorner technique, no matter how slick is a bad idea. I’m not surprised Greg mentionned flack. Css is not a new way to pretty things and not care ! It’s a new way to pretty things AND care about the underlying HTML code. That’s why we don’t want FONT tags, TABLES that aren’t, and empty B tags used to make corners !!!!! Use images for corners until browsers can handle CSS 3

  13. Claudio on April 17th, 2006

    Nice list! Good job.

  14. david knighton’s mytechbits.info / Top 10 CSS Tutorials - Cameron Olthuis on April 17th, 2006

    […] Top 10 CSS Tutorials - Cameron Olthuis […]

  15. Keith on April 17th, 2006

    Thanks for compiling this list of Top 10 CSS Tutorials. I have seen Hoverbox before, and other stuffs, such as theme changing. I may hope to try and implement some of these excellent CSS on my site. Nonetheless, I believe these are pretty good tutorial site.

    Good work!!

  16. TheMadAdmin » Blog Archive » List of CSS tutorials. on April 17th, 2006

    […] The List […]

  17. Vecindad Gráfica Diseño Gráfico on April 17th, 2006

    10 buenos ejemplos de interacción CSS

    Una coleccieon de 10 tutoriales de interacción en CSS. Top…

  18. FLOG on April 17th, 2006

    Top 10 CSS Tutorial Sites

    Found some great CSS references on Digg this morning. Should be useful in making the web worth watching!
    Top 10 CSS Tutorial Sites

  19. Espen Liland on April 17th, 2006

    Some great tutorials there, but I must agree with “manu”, that spiffy-rounded-corners-thing creates some rather horrible HTML. The whole point of CSS is to separate content and presentation. A bunch of empty b-elements is NOT content - that’s presentation, baby!

    The CSS is pretty awful aswell…

  20. Enjoados, com louvor! » Blog Archive » Top 10 CSS Tutorials on April 17th, 2006

    […] Top 10 CSS Tutorials […]

  21. Blase16 on April 17th, 2006

    Links des Tages

    Ich bin heute viel zu müde, um etwas sinnvolles zu schreiben, deswegen poste ich einfach ein Paar interessante Links.

    Dictionaraoke via: Nilzenburger Singende Sprachausgabeprogramme.
    By the way, wer ein Mac OS X hat, sollte folgendes ausprobieren: I

  22. Carlos Soler » Top 10 CSS Tutorials on April 17th, 2006

    […] A top 10 list of some great CSS tutorials. Complete with descriptions and images.read more | digg story […]

  23. sascha on April 17th, 2006

    thank cameron,
    this is the third time i saw your blog on blinklist for some search i did. this time i subscribed to your feed, although i knew almost all of the links and articles in this entry here. :)

    greetings from germany.
    sascha

  24. Christian on April 17th, 2006

    Thnks!

  25. maxima’s Blog » links for 2006-04-17 on April 17th, 2006

    […] Top 10 CSS Tutorials - Cameron Olthuis (tags: tutorial css top10) […]

  26. Top 10 CSS Tutorials at ListLearn on April 17th, 2006

    […] Cameron Olthuis has posted a great list (with images and descriptions) of the top 10 CSS tutorials. Most of these are newer techniques many of them pretty slick, check them out if you haven’t already. […]

  27. Nerdcore - A Blog about very cool Stuff. Und so. on April 17th, 2006

    […] Top 10 CSS Tutorials - Cameron Olthuis (tags: css webdesign tutorial) […]

  28. Cameron on April 17th, 2006

    Greg - NP. Like you say the good out weighs the bad.

    Manu - I understand where you’re coming from and I actually use images for all my rounded corners. But I still think the spiffy corners tool is useful for a lot of people.

  29. Intense and Widespread Opposition - Brokekid.net on April 17th, 2006

    […] 10 hip CSS tutorials […]

  30. Anonymous on April 18th, 2006

    Top 10 CSS Tutorials - Including Hover Box Image Gallery

    A list of ten of the best CSS tutorials on the net. Ranging from image galleries, navigation menus, drop shadows and creating CSS layouts.

  31. Birgit on April 18th, 2006

    really useful collection! just so little time *argh*
    thanks a lot!

  32. Shane on April 18th, 2006

    Thanks a lot for the collection of tutorials.

  33. T Orion on April 18th, 2006

    Found a couple new useful tutorials here, great list!

  34. Annette on April 18th, 2006

    Super helpful. A lot of stuff I have seen before, but a useful collection nonetheless…

  35. BlueSparc design, technology news » Blog Archive » 10 Top CSS Tutorials on April 18th, 2006

    […] For 10 neat CSS tricks, some which have already been featured on BlueSparc, you should check out this website. The website entitled Cameron Olthuis, presumably the author’s name, has this to say about the neat CSS tutorials featured within it’s pages. There’s a lot of really cool things that can be done using CSS and I’ve found some of the following resources to be very helpful to inspire ideas and learn new techniques. There’s a lot of good CSS tutorials out there so it’s pretty hard to narrow it down to only the 10 best. So instead of taking this list as the top 10 consider it as a collection of 10 great tutorials. I recommend having a good working knowledge of CSS/HTML before trying any of these on your own site. […]

  36. dotLife.org » Readable Type 0.2 on April 18th, 2006

    […] Top 10 CSS Tutorials (Cameron Olthuis) […]

  37. Mea Culpa » links for 2006-04-19 on April 18th, 2006

    […] Top 10 CSS Tutorials The Top 10 CSS Tutorials (well, links to them) including a CSS photogallery, rounded corners and horizontal lists. (tags: css lists tutorials) […]

  38. Lockergnome's Web Developers on April 18th, 2006

    Top 10 CSS Tutorials

    I have looked over a number of these tutorials and will have to admit, most of them are pretty darn helpful!…

  39. *.* of anything and everything else » Blog Archive » *.links 1 on April 19th, 2006

    […] Make your web better and more attractive using Top 10 CSS tutorials […]

  40. The Inveterate Observer » Blog Archive » Top 10 CSS Tutorials on April 19th, 2006

    […] A top 10 list of some great CSS tutorials. Complete with descriptions and images.read more | digg story […]

  41. Tips n tricks » Blog Archive » 10 useful css tutorial sites on April 19th, 2006

    […] http://www.cameronolthuis.com/2006/04/top-10-css-tutorials/ […]

  42. Die 10 besten CSS Tutorials » Webdesignblog on April 19th, 2006

    […] Argh, CSS kann einen schonmal frusten, vorallem in Kombination mit dem IE (in diesem Sinne will ich nochmal auf diesen Artikel hinweisen). Cameron Olthuis hat in seinem Blog 10 CSS Tutorials aufgelistet, die einem schon so manch graues Haar ersparen können. Sehr nützlich finde ich das Tutorial zum Stylesheet Switcher und das Floattutorial was, wie ich finde, jeder mal gesehen haben muss. Für CSS-Einsteiger empfiehlt es sich erstmal die Grundlagen zu erlernen und dann diese Liste komplett durchzugehen, das ein oder andere Problem, auf das man im Laufe seiner Arbeit mit CSS stößt, wird dort schon gelöst, also viel Spass! […]

  43. my weblog » Top 10 CSS Tutorials - Cameron Olthuis on April 19th, 2006

    […] Top 10 CSS Tutorials - Cameron Olthuis There’s a lot of really cool things that can be done using CSS and I’ve found some of the following resources to be very helpful to inspire ideas and learn new techniques. There’s a lot of good CSS tutorials out there so it’s pretty hard to narrow it down to only the 10 best. So instead of taking this list as the top 10 consider it as a collection of 10 great tutorials. I recommend having a good working knowledge of CSS/HTML before trying any of these on your own site.     […]

  44. Simple Man on April 20th, 2006

    […] A top 10 list of some great CSS tutorials. Complete with descriptions and images.read more | digg story No Comments so far Leave a comment RSS feed for comments on this post. TrackBack URI Leave a comment Line and paragraph breaks automatic, e-mail address never displayed, HTML allowed: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong> […]

  45. Homo Sum » Blog Archive » Some Software Links on April 20th, 2006

    […] Finally, of interest to all web designers, and to all bloggers who are into highly customized sites, is this list of 10 CSS Tutorials. Among other things there are two complete implementations of CSS-only (i.e. no Javascript) image galleries, and a nice example of using CSS to do drop shadows on your images. You can learn about CSS from these tutorials, but you can also grab some of these things as is and start using them on your sites. […]

  46. Marko on April 20th, 2006

    Nice collection. Good work collecting these. Thanks.

  47. Michel Leblanc, M.Sc. commerce électronique. Marketing Internet, consultant et conférencier » Ressources de développement Web on April 22nd, 2006

    […] Voici deux liens très utiles pour ceux qui développent des sites Internet. Le premier lien comporte plus de 75 ressources qui servent à concevoir des pages Web : 75 Helpful Web Design Resources. Le second lien présente 10 tutoriels Internet pour l’apprentissage des CSS : Top 10 CSS Tutorials . […]

  48. engin on April 23rd, 2006

    mr cameron
    it is perfect
    thanks a lot from turkey

  49. Terrorpilot Blogs » Archivio Blog » Surfing [7] on April 23rd, 2006

    […] Top 10 CSS Tutorial - Una bella e utile raccolta. Eh sì… […]

  50. Gerard Schaefers on April 24th, 2006

    Hi Cameron,
    Just put your Top 10 CSS Tutorials in my favourites.
    Excellent overview.
    Having the name of Olthuis means that your ancestors must be of Dutch origin. Right?
    Regards,
    Gerard Schaefers

  51. Cameron on April 24th, 2006

    Gerard,

    Thanks. From what I understand the name is infact dutch. However, my dad was adopted so I have no idea if there really is any dutch in me. I’ve heard that the name means old house, can you confirm/deny that? I also believe we pronouce it differently - Olth - e - us.

  52. Podcast Browser » Blog Archive » Top 10 CSS Tutorials on April 26th, 2006

    […] A top 10 list of some great CSS tutorials. Complete with descriptions and images.read more | digg story […]

  53. Hippy on April 27th, 2006

    Been using this cheatsheet quite alot - http://home.tampabay.rr.com/bmerkey/cheatsheet.htm

    pretty handy

  54. Smarking on April 27th, 2006

    Top 10 CSS Tutorials

    Someone at Smarking has bookmarked your post.

  55. Gerard Schaefers on April 30th, 2006

    Olthuis - It is possible that it means Oud Huis = Old House.
    But I cannot confirm that for certain.
    Because words like Olt can comes also from amother origin.
    To pronounce it in the English tongue is almost impossible.
    I cannot find a sound for UI in English. :-(

    If you have a Skype connection so I can give you the sound or send you a wav-file. My Skype name is: gerardschaefers

  56. BillyG on May 1st, 2006

    Thx bud, now I can trim some of my tages out of http://del.icio.us/BillyG/CSS.

  57. Stautzenberger Web Students » Blog Archive » Site of the Week 05-01-06 on May 1st, 2006

    […] http://www.cameronolthuis.com/2006/04/top-10-css-tutorials/ Back To Main Page […]

  58. sainathkm on May 5th, 2006

    Hi,
    Thanks for this really usefull article…
    Sainathkm

  59. aNieto2K | Lo que quiero, cuando quiero y como quiero » Popurri de enlaces(8/5/06) on May 8th, 2006

    […] El Top 10 del CSS, sin duda un gran lenguaje. […]

  60. Ok, It’s 10 Days Not 11 at Botsmack on May 8th, 2006

    […] Top 10 CSS Tutorials […]

  61. Mateus Neves on May 14th, 2006

    Tanks, is very usefull.

  62. ThatchSpace » Top 10 CSS Tutorials on May 15th, 2006

    […] There’s a ton of great CSS tutorials out there so I imagine that it’s pretty hard to narrow it down to a Lettermanesque Top 10, any way here’s Camerons Top 10 CSS Tutorials […]

  63. mrvgatus on May 27th, 2006

    NIce Post thnks

  64. Utilerias Css at .spacio de. on May 30th, 2006

    […] CssFill (inglés) - Web donde encontrarás layouts y plantillas en CSS / XHTML Dynamic Drive Css Library (inglés) - Códigos originales y prácticos en Css, para imágenes, menus, divs, forms, etc. Css Tools (inglés) - Su nombre lo dice todo. Los 10 mejores Tutoriales Css (inglés)- Su nombre lo dice todo. Generador de Css (español)- Web que te permite ir creando paso a paso tu archivo de estilos. Manual de Css (español) - Un pequeño manual básico para empezar a usar Css. Css Zen Garden (inglés)- A mi gusto, la web con las mejores plantillas css. Intensivstation- Plantillas y How To’s […]

  65. Peter's Webmaster Blog on June 5th, 2006

    Die 10 besten CSS Tutorials

    Cameron Olthuis hat in seinem Blog die “Top 10 CSS Tutorials” aufgelistet - eine äusserst nützliche Kollektion! Darunter sind wohl so ziemlich alle CSS Hacks, Tricks und Kniffe, die es gibt: Roll-over images, bar graphs, vertikale Menüs,…

  66. Siang Chuen on June 16th, 2006

    Nice collection. Now I have something to start from for my website. Thanks man!

  67. Mirko on June 22nd, 2006

    ottimo veramente :P

  68. LifeSlate » Blog Archive » Top 10 CSS Tutorials on June 28th, 2006

    […] Source […]

  69. (>_<) Doliaku | el blog on July 14th, 2006

    Top 10 de tutoriales CSS

    Cameron Olthuis en su blog hace un top 10 de tutoriales CSS. Coincido casi al 100%. Por supuesto, por ahi uno haría algunos cambios de orden o aparecerían otros sitios, pero quería respetar la decisión del autor y dej&eacute…

  70. PCMasters on August 18th, 2006

    Damn great. Thanks for the Tutorials List.

  71. toadward » Blog Archive » Top 10 CSS Tutorials on August 30th, 2006

    […] Cameron Olthuis hat schon im April die Top 10 CSS Tutorials gepostet. http://www.cameronolthuis.com/2006/04/top-10-css-tutorials/ Einige tolle Sachen dabei. […]

  72. Designs » Top 10 CSS Tutorials on August 31st, 2006

    […] A top 10 list of some great CSS tutorials. Complete with descriptions and images.read more | digg story […]

  73. wears » Blog Archive » Css web and other sweet stuff on September 27th, 2006

    […] CSS Tutorial […]

  74. The Web 2.0 Toolbar - The Best of Web 2.0, Right in Your Browser on October 1st, 2006

    […] Top 10 CSS Tutorials - Cameron Olthuis save this to css tutorial webdesign tutorials design … saved by 2454 people […]

  75. Interacción CSS « NoteBook DG on November 3rd, 2006

    […] Top 10 CSS Tutorials - Cameron Olthuis […]

  76. Fatih HayrioÄŸlu’nun not defteri » 15 Kasım 2006 Web’den haberler on November 15th, 2006

    […] En güzel CSS derslerini bir araya toplamışlar. Link […]

  77. posizionamento motori di ricerca on December 16th, 2006

    great post. any other informations about css on offline media (books etc.) can you suggest?
    thanks

  78. Bejeweled on December 21st, 2006

    great, waiting for new css tutorials! thanks

  79. fast uk secured loan on January 5th, 2007

    Nice collection. Now I have something to start from for my website. Thanks a lot its verry much apreciated

    your a star!!!

  80. Simon Hirl on January 23rd, 2007

    Hi, visit http://csscontainer.com

    Thanks!!.

  81. Hjalti on January 27th, 2007

    This is brillance, very useful thx.

  82. Murtuza on January 30th, 2007

    i have to create css menus
    Home | Products | Profile | Contact

    and now produc has sublinks that too horzontal

    Product1 | Product 2 | Product 3 | Product 4

    i have script but they change their position on different browers.
    so plz suggest me some solution.

  83. Yalli Oliveira on April 16th, 2007

    Very good!

  84. scott on April 27th, 2007

    I have reed css vertical menu and it help me a lot.Thanks

  85. Gingium on May 6th, 2007

    great, waiting for the next and new new css tutorial!!! thanks a lot!

  86. nikotynizm on June 23rd, 2007

    I like The Listamatic. It shows the power of CSS when applied to one simple list.

  87. sysprofile on July 9th, 2007

    hello from germany & thanx for your helpful posting… bookarked… =)

  88. mana on October 8th, 2007

    I´m needing some help with text in my web. I´ve decided to use the DIN familly, after creating my styles and aplling them to my text, i realised that on some computers, people were browsing any other web tg… what can i do? I´m using mac and this is my very first time with dremweaver…
    Thank you!
    mana

  89. Perfume Girl on November 28th, 2007

    I have a online perfume store and i thinking about using some of this information. I need to get rid of the background images and go more with CSS styles. Thanks for all the info.

  90. kopfkribbeln » Webworld » Die Liste der Listen on March 29th, 2008

    […] Javascript-Snippets you can’t live without 53 CSS Techniques you couldn’t live without 10 CSS Tutorials 71 CSS Menus Navigation […]

Leave a Reply

9rules