Well actually, it gets harder but it’s worth taking a look, since you can customize everything from your blog to your Google Docs documents with a tiny bit of CSS knowledge.  Let’s take a look at where you learn css online free and get CSS tutorials for beginners.

W3Schools

W3Schools is a great site. They have lots of tutorials from HTML to PHP and you can be sure that everything you read is up to standards since the site is maintained by the W3C, responsible for the web standards of today.

The CSS lessons are pretty detailed and will take you through most of what you need to know, but since this is more of a technical page you will see less examples than elsewhere and the examples they do have are a bit constrained.

If you already know some CSS though this is a great reference source.

Tizag

I come across this website a lot when looking up things and I had a look at their CSS tutorials, which I found slightly better structured than W3School’s. The basic information is the same, but if you are an absolute beginner you might want to start here.

Tizag in my eyes is a bit less formal. It seems to me that their examples are closer to real life and the tone is friendlier. There are also helpful tutorials on many other languages like HTML and MySQL, so if you liked the CSS bit you can stay on for the same quality in other languages.

CSS Zen Garden

This site is very different from the tutorial sites I mentioned before. On CSS Zen Garden you can put your knowledge to the test or learn from the code written by others. The whole idea is that there is one static and unchangeable HTML file and you have to create a separate look for it using only CSS.

You can upload your work and it will be showcased, and you can download others’ files to take a look at how they did this and that. This is really useful because I myself learned way more by example than by actually learning. The same goes for WordPress templates – if you like one, download it and take a peek in style.css to see how things are done.

CSS Play

CSS Play is a website in between Zen Garden and the tutorial sites because it shows off specific functionalities in CSS and allows you to view the source code.

Instead of having a whole page or a whole site, you can take a look at examples of flyout menus, opacity examples, IE specific workarounds and so on.

If you need a specific functionality and want to get in the know, this website might be the best place to start. It has a fair share of ads which can be a bit distracting, but the info there is solid, and a lot of times the code, or at least the method is very thoroughly explained.

Google

That’s right, plain old Google Search can be a great companion to learning CSS online and finding CSS tutorials for beginners. Aside from obviously being able to research things you need, you can also look at how specific CSS properties work. Don’t know what values “overflow” can have? Just type “css overflow” or “css overflow property” and the first result will tell you what you need to know.

The same goes for actually all programming languages, I use this for PHP and MySQL as well, and I don’t think the first result has ever failed me yet.

So there you are, no more excuses, it’s time to learn some CSS! You can add your own Google Docs templates, modify your WordPress templates, and do such a lot more, happy CSS-ing!

In the event that your articles hit the Digg frontpage, this could also be one of the few deciding factors (there are many more) whether your server will crash or not.

Some of the most common methods used to minimize/ optimize a CSS stylesheet involves eliminating unused selectors, unwanted whitespace, tabs, comments and change the longhand declaration to shorthand notations.

I know that some of you here are not tech-savvy enough to edit your own CSS code, so here I will provide you with some of the useful tools that you can use to optimize your CSS code, even if you have completely no knowledge of CSS coding.

Check your CSS code

W3C CSS Validator

The W3C CSS validator is a tool that you can use to validate your CSS. You can either download the Java validator to your computer and use it offline, or use the online form to check your CSS code.

CSS Validator Firefox Add-On

To make it easier for you to validate your CSS code, there is this Firefox extension – CSS Validator – that you can install on your browser. Once installed, you can easily and quickly check your code with a right click of the mouse.

CSSCheck

Even though your CSS code is validated, it does not mean that it is free from error. The validation only means that it complies with the CSS standards set by the W3C. If you want to validate as well as looking into a few browser compatibility issues with your stylesheet, then CSSCheck is a good tool for you.

CSS Analyzer

CSS Analyzer is an useful tool that allows you to validate your stylesheet against the W3C’s standard, perform a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.

In case you are wondering, the color contrast test is to check that the foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits, or when viewed on a black and white screen.

Clean up your CSS code

Dust-Me Selectors

Dust-Me Selectors is a Firefox extension that finds unused CSS selectors on the page that you are viewing. As you test subsequent pages of the same domain, the result is cross-checked with the previous data and any selectors encountered are crossed off from the list. You can use it to test individual pages or get it to spider the whole site.

In the end, you will get a report on the selectors that are not used anywhere in the site. You can then remove those selectors from your stylesheet (lesser code means smaller filesize).

CSS Redundancy Checker

Similar to Dust-Me Selectors, this tool checks your site for unused and redundant CSS selectors. The only thing that is different is that you need to manually enter the URI for each page that you want to test.

Optimize and Compress your CSS code

Once you have completed checking the validity of your CSS and cleaned up unnecessary code, it’s time to optimize CSS file and reduce it to the smallest possible size.

CSS Tidy

CSS Tidy is an open source software that you can use to optimize and compress your CSS file. It is available in .exe format (Windows only) and a zipped php script format (all platforms, for Web developers). What CSS Tidy does is mainly remove the comment, unnecessary whitespace and change some of the code to shorthand. During compression, you can choose between code readability or maximum compression. Depending on the length of your code, you can easily achieve a compression ratio of up to 30% or more.

Since CSS Tidy is an open source project, there have been several websites that use the code and turned it into an online tool for people to use. Here are some of them:

• CLEAN CSS
• Code Beautifier
• CSS Formatter and Optimizer from CSS Portal
• CSS Formatter and Optimizer from Flyspray

Other CSS Optimizers

FlumpCakes CSS Optimizer

A simple optimizer that comes with several options for you to choose from.

Robson CSS Compressor

While it may look the same as others, I have found the compression rate for Robson CSS Compressor to be the highest among them all. Although it comes with several options for you to tweak the setting, leaving all the options untouched (all options checked) always produces the best result.

CSS Drive CSS Compressor

The CSS Compressor offered by CSS Drive comes in two modes that you can use: Regular and Advanced. In the Regular mode, you only need to select which level of compression you want (Light, Normal or Super Compact) and the CSS Compressor will do the rest. In the Advanced mode, you are given more options and a greater say on how you want your stylesheet to be optimized.

CSS Optimizer

The CSS Optimizer from mabblog.com is a command line application for Mac and Linux. It is meant for those who are more comfortable with the terminal rather than an online interface. There is also a simple online version available for those who want to quickly get it over and done with.

Hopefully the tools listed here are enough for you to tweak and optimize your CSS stylesheet. If you have used any other tools that are more useful than those mentioned above, share them with us in the comments.