Posted February 11, 2011 by Spyros in Cascading Style Sheets (CSS)

20 FREE Online CSS Resources to Quickly Enhance Your Website Design Abilities


One of the biggest obstacles that webmasters face in their quest to creating a website is that of CSS design. Indeed, Cascading Style Sheets can be pretty frustrating to work with. Luckily for us, there are lots of online resources that provide already created and thoroughly tested code that does anything we could ask for. In this post i will be presenting you to various such resources that will hopefully help you a lot. I know that they have in my case :)

1. Listamatic – Ready Made Horizontal and Vertical CSS Lists

Would you like to create horizontal or vertical css lists and navigation menus for your website ? Search nowhere else. Listamatic is a great resource contains great examples of very stylized lists. The css is fully presented for each example and you can freely use it.

2. CSS Round Corners : Boxes With Curves

Ever wanted to create a box that is not rectangular in shape ? CSS can help you do that and this resource makes it a breeze for you. Round corners for boxes are quite a bit stylish and tend to be used a lot nowadays, so it really pays to visit this if you want to reproduce something like that.

3. CSS Layouts on Max Design

I can guarantee that you will absolutely love this. Want to create a liquid design ? Maybe want to have a 3 columned design ? Or even a middle sized right column ? This is a great and very important resource !

4. CSS Borders

Making a CSS border is something that you will most probably face when creating a website. w3schools provides you with the important information to create simple borders for your website needs.

5. CSS Image Gallery

An absolutely great and very easy to implement image gallery solely created in CSS. Great one to use if you would like to include photos as a gallery in your webpages.

6. CSS Image Maps

Have you seen those images that when you hover over an element you get some extra focus to it and maybe some information about it ? It could be a map of a United States that when you hover over a state, you get a popup describing you more about that state. These are called Image Maps and they are quiet easy to create, at least if you follow this tutorial.

7. CSS Bar Graphs

Want to create your own bar graphics ? Maybe wanting to present some percentage poll information or such? If so, this is the resource for you !

8. CSS Calendar With Notes Taking

Use this code to create your own calendar. You can also use the calendar to present some information about a certain day, like dates, things to do and such.

9. Create A “Print This Page” Version

Do you have posts that you want to create a “print this page” version too ? Luckily, this is pretty trivial using CSS and you can find all the information you need at this resource.

10. CSS Ratings Selector

Adding a rating system is very useful for very many webmasters. This Star Matrix is very easy to implement and looks pretty nice too. I’ve also happened to have used it many times in the past and it really is very stable and good looking.

11. Float Images Around Text

This is a very basic CSS technique that you can see at use at this page here. Notice that the image of this post floats at the left of the text you read at the beginning. If you want to learn more about this technique and be able to float whatever you want left or right, you should really take a look at this awesome website.

12. CSS Images With Captions

Want to create images that feature captions below them too ? It’s very easy to do as you can see !

13. LightBox Effect Using CSS Only

Have you seen those images that when you click on the whole browser gets gray and the image is presented to you closer to the screen, like popping out of the page ? This is called lightbox effect and is mostly creating using javascript techniques but this webpage explains how to do it properly using CSS only.

14. CSS Modern Forms

Smashingmagazine.com presents you to these great modern css forms to use. Most of them look really nice and are also very easy to implement.

15. Stylized CSS Blockquotes and Pullquotes

A really great and artistic way to create blockquotes and pullquotes to quote something or draw the visitor attention towards some text.

16. Advanced CSS Menu

If you are interested in creating a very fine and very eye pleasing CSS menu, you may want to take a closer look at this tutorial. You will find the full source code to creating a great CSS menu as the one described but you will need to read this through to do it. I can assure you, though, that it is really worth it.

17. Sticky CSS Footer

A simple but effective CSS footer that you can easily change to reflect your ideas. You can find the source code there and change it to whatever you feel is appropriate for you.

18. Style Tables Using CSS

Do you want to add some style to your HTML tables ? Well, i guess you do :)

19. Hyperlink Cues with CSS

These are the little icons that are shown right before a link. For instance, a link to an email address could appear a mail envelope icon. Very nice technique to use in order to add small chunks of style to your website.

20. CSS Drop Down Menus

Sometimes a drop down menu is a very nice addition to a website. This resource is incredible for such a creation. You will certainly find it very useful and it is very eye pleasurable too. Hope that you go about using those techniques in your own websites. I have used many of them at times and found them very useful and earned me lots of time. Wish the same for you too !