When you are just starting out, it can be hard to learn CSS, what everything does, what each piece of code means, and the different methods for getting the results that you want when styling your website. A great way to learn CSS is to see how different styles can make your site look completely different. Also, even if you are a veteran, a few of the following sources will help you save time, because you can simply input your settings and it will spit out cross-browser compatible CSS code. It can be hard to remember to add in different prefixes for different styles, so that they appear in most browsers.

Border-Radius

This is a great site that allows you to create rounded corners in your site. A great aspect to this site is that in each parameter box, you can indicate how round you would like for each corner to be. In other words, each corner can be different! It also gives you the different prefixes for Mozilla and webkit, so that it looks the same across different browsers.

CSS3 Please

CSS3 Please is a great site that will save you time, and you can quickly tryout different CSS3 settings and see them quickly in real time. The site has some of the most interesting CSS3 styles for you to play around with. This is an excellent site to play around with, practice and try different things, making it easy to pick up and learn what each parameter does. Another great aspect of CSS3 Please is that you can quickly toggle rules on and off, so you can try different combinations. You can also instantly copy the code that you want to your clipboard, so that you can use it on your site quickly and easily. You can learn what prefixes control each effect and what browsers support each rule.

Primer CSS

Primer CSS is extremely useful for setting up your stylesheet. You simply create your html document, and when you are done, you copy and paste it into the designated area. Then, CSS Primer takes all of your classes and Id’s and creates a beginner stylesheet for you. This is a major time saver; because you have all of your Id’s and classes together, and you can style the ones that you need to, and disregard the ones you don’t. To cut down on size, you can even delete the ones that you don’t need to style.

CSS3 Generator

CSS3 Generator is a great tool for Implementing different CSS3 styles. You click the drop down box, and choose a style. Once it is chosen, a corresponding dialog box comes up, where you choose your settings. You get to preview how it looks as you go, and it spits out the code. It even tells you which browsers support each effect.

CSS Layout Generator

This is a great tool for creating different layouts using CSS. With it, you can set different parameters, specify height for the header and footer, and set up multiple columns. A nice feature is that it previews what the page will look like, so that you can make minor adjustments before you download the code.

These are some great tools to really help you get started. They will help you to see how different settings can dramatically change the look of your site.