Top 10 CSS Tutorials
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.
Great selection of Halloween Costumes and more at Halloween Mart.
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.
2. CSS Bar Graphs - A very simple and great tutorial for creating both vertical and horizontal bar graphs. View the examples.
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.
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.
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.
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.
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.
What are some of your favorite CSS tutorials?
If you love CSS tutorials, you’ll enjoy more excellent articles on web hosting, SEO and computers.
Cameron Olthuis is the Founder of
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.
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.
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!
Thanks for compiling this list, some very useful tools here.
Bravo!
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!
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.
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!
[…] http://www.cameronolthuis.com/2006/04/top-10-css-tutorials/ Posted by ansk Filed in HTML+CSS […]
Nice collection!! Very useful
[…] 10 buenos tutoriales de CSS En: CSS, Diseño, outbox — Abril 17, 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
Nice list! Good job.
[…] Top 10 CSS Tutorials - Cameron Olthuis […]
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!!
[…] The List […]
10 buenos ejemplos de interacción CSS
Una coleccieon de 10 tutoriales de interacción en CSS. Top…
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
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…
[…] Top 10 CSS Tutorials […]
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
[…] A top 10 list of some great CSS tutorials. Complete with descriptions and images.read more | digg story […]
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
Thnks!
[…] Top 10 CSS Tutorials - Cameron Olthuis (tags: tutorial css top10) […]
[…] 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. […]
[…] Top 10 CSS Tutorials - Cameron Olthuis (tags: css webdesign tutorial) […]
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.
[…] 10 hip CSS tutorials […]
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.
really useful collection! just so little time *argh*
thanks a lot!
Thanks a lot for the collection of tutorials.
Found a couple new useful tutorials here, great list!
Super helpful. A lot of stuff I have seen before, but a useful collection nonetheless…
[…] 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. […]
[…] Top 10 CSS Tutorials (Cameron Olthuis) […]
[…] 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) […]
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!…
[…] Make your web better and more attractive using Top 10 CSS tutorials […]
[…] A top 10 list of some great CSS tutorials. Complete with descriptions and images.read more | digg story […]
[…] http://www.cameronolthuis.com/2006/04/top-10-css-tutorials/ […]
[…] 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! […]
[…] 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. […]
[…] 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> […]
[…] 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. […]
Nice collection. Good work collecting these. Thanks.
[…] 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 . […]
mr cameron
it is perfect
thanks a lot from turkey
[…] Top 10 CSS Tutorial - Una bella e utile raccolta. Eh sì… […]
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
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.
[…] A top 10 list of some great CSS tutorials. Complete with descriptions and images.read more | digg story […]
Been using this cheatsheet quite alot - http://home.tampabay.rr.com/bmerkey/cheatsheet.htm
pretty handy
Top 10 CSS Tutorials
Someone at Smarking has bookmarked your post.
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
Thx bud, now I can trim some of my tages out of http://del.icio.us/BillyG/CSS.
[…] http://www.cameronolthuis.com/2006/04/top-10-css-tutorials/ Back To Main Page […]
Hi,
Thanks for this really usefull article…
Sainathkm
[…] El Top 10 del CSS, sin duda un gran lenguaje. […]
[…] Top 10 CSS Tutorials […]
Tanks, is very usefull.
[…] 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 […]
NIce Post thnks
[…] 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 […]
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,…
Nice collection. Now I have something to start from for my website. Thanks man!
ottimo veramente
[…] Source […]
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é…
Damn great. Thanks for the Tutorials List.
[…] 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. […]
[…] A top 10 list of some great CSS tutorials. Complete with descriptions and images.read more | digg story […]
[…] CSS Tutorial […]
[…] Top 10 CSS Tutorials - Cameron Olthuis save this to css tutorial webdesign tutorials design … saved by 2454 people […]
[…] Top 10 CSS Tutorials - Cameron Olthuis […]
[…] En güzel CSS derslerini bir araya toplamışlar. Link […]
great post. any other informations about css on offline media (books etc.) can you suggest?
thanks
great, waiting for new css tutorials! thanks
Nice collection. Now I have something to start from for my website. Thanks a lot its verry much apreciated
your a star!!!
Hi, visit http://csscontainer.com
Thanks!!.
This is brillance, very useful thx.
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.
Very good!
I have reed css vertical menu and it help me a lot.Thanks
great, waiting for the next and new new css tutorial!!! thanks a lot!
I like The Listamatic. It shows the power of CSS when applied to one simple list.
hello from germany & thanx for your helpful posting… bookarked… =)
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
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.
[…] Javascript-Snippets you can’t live without 53 CSS Techniques you couldn’t live without 10 CSS Tutorials 71 CSS Menus Navigation […]
re 10 - that ala style sheet switcher
Frankly, the article spouts high end scripting expertise far beyond the grasp of 99.99999% of CSS web designers. Also, forget playing with the ALA cheesecloth script dust unless you have your own server. That’s right, it is 100% server-side. I truly wish that a humane and unsnobby CSS expert would share for the mass of us how to let visitors switch styles with simple CSS and XHTML (no php, c++, oracle, gnu, gumbo, peachtree, or any other twitter-bug brainless excuse for trying NOT to be like the rest of us.) Thank you!
thanks to giving such a good idea
thanks again
thanks alot for the tutorials they were a lot of help check out this site too for xml products. Stock Flash Creators
Very very great collection. Thanks for it. Now with them i can learn more and more abous CSS.
Great list of tutorials that have gone straight into my del.icio.us bookmarks. I will find this page very useful. Well done
Wow! Those were really cool tutorials. I have been looking for some of those to be used in my designs. Thanks a lot for sharing them. More power to you!
Thanks for this css-collection - get up and relaunch my website.
Great css collection!
Thank you fot that one…
Hi Cameron,
Great work! I love this collection. I was searching for image gallary to create with css only and I find yours. Great and marvlous collection.
I am coverting my site with pure css (No tables).
I will use multi page image gallry in my.
Regards,
Ravi
[…] Top 10 CSS Tutorials 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… […]
Thanks so much. Great piece of information.
Hi Cameron
I have just found your site and it looks like it could come in very handy for me as I am a COMPLETE novice to CSS and have been looking for something I can understand.
Do you know, by chance, how to do a rotating header in css please. I am at a loss to find something I can get to grips with
thx in anticipation
fran davies
Thanks a lot for the collection of tutorials.
Thank you! Great tutorials!
These tutorials are a great help for many people interested in entering the world of css site construction. Thank you.
Hi, since you asked “What are some of your favorite CSS tutorials? ” here’s my contribution.
A couple of my colleagues have created this CSS Quick Reference Manual.
If printed out (at both sides of the paper) you can nicely fold it for quick reference. I use it a lot, now you can too!
Enjoy!
[…] Top 10 CSS Tutorials – Cameron Olthuis: April 15th, 2006…anyone know of a more current top css tutorial site? […]
[…] Top 10 CSS Tutorials – Cameron Olthuis: April 15th, 2006…anyone know of a more current top css tutorial site? […]
nice site d00d
heres mine