Top 10 CSS Resources For Beginners (Mini Series Part 3)


Cascading Style Sheets (more commonly known as CSS) is one of the most commonly used ways to design and produce websites. Originally they were used as a way to clean up HTML code, they removed the need to explicitly describe every background style, font, colour size alignment etc. The result was (hopefully) a lot cleaner and simpler code. The result is some of the amazing designs which grace our very internet.

I becoming more and more interested in how CSS works and how websites are built. As a novice "coder" i've built up a small resource of the best internet sites that help me with CSS. For any expert reader these may cut your mustard, but every one has to learn from some where.

If you want to suggest any of your own CSS resources I will try to add them in as soon as possible. This list is in no particular order, just numbered in the order I did them. You can click any of the images for the full sized versions.

1) CSS Box templates

One of the "features" of CSS is the use of styles to design and make elements of the page. For example this blog has an outer wrapper, and then two inner wrappers is to make up the sidebar and main content of the page. As a new person to CSS finding out how to do this was difficult. Therefore in at number one is the box templates. Many sites have a variation on the theme. You can visit MyCelly (shown above, my favourite out of the sites) intensivstation, CSSeasy and Little boxes. There is a fi

2) W3Schools

Probably one of my favourite resource for finding basic CSS tips tricks. Mostly filled with basics on how to use each of the properties in a basic way. I find it very useful. You could alternatively visit the world wide web consortium or W3C, for the basics on CSS.

3) Templates

There are hundreds of template sites on the internet. A quick search on Google will turn up millions. Sites, obviously, vary in quality but there are some that provide some good templates for a novice user to start out with. People with experience will of course find these sites pointless and badly designed.
Some of may favorites include, Template World, FreeCSSTemplates and CSSHeaven.

Extra Time? Zen Garden is worth a look. Its not the traditional here is a thumbnail here is the files, but is offers the results (with the same base text) for use by anybody. It takes a bit of working out but the results are really interesting and very will presented and all are valid CSS.

4) CSS Validation

One of the major problems that seems to be apparent on the internet today is the problem of valid CSS, although I don't particularly understand the problem in great detail there seems to be a problem about the CSS being valid and as a result rendering properly on the screen. As a result, if any one does create CSS it is always a good idea to check it. The best tool for doing this is the W3c CSS Validation Service. Offered by the W3c (who are in charge of how the code is defined etc) the tool checks through a website to see of any CSS errors. You can if you chose to change these errors to help make your code valid and hopefully run perfectly in any browser.

Extras Time? If you do have a bit of extra time and you want to look into more detail into how the CSS words and responds on different page checking Quirksmode is a good idea. It offers lots of colourful tables showing you which bits of CSS work and which bits don't. Internet Explorer seems to be lacking on a lot of fronts.

5) Cheat Sheets

Even as an advance user not every one will no every single CSS function (unless your are some kind of robot). Usually the answer to this it to go searching through the internet guessing what function you need or how to use it. Cheat sheets here come to your rescue. Listing all of the CSS functions you can easily read off how to use each one and as a result save some time. The best one I have found is from ILoveJackDaniels, well presented they offer a great help. There is even a widget for anyone running on Mac (i've got mine installed).

6) Tutorials

Leaning a new programming language is hard, no matter how easy the language might be. This is where CSS tutorials step in. Doing a simple search on the internet brings up millions of results. My personal favorites are HTMLDog (show in the image above), a very simple but effective CSS and Photoshop tutorial (image shown below). Other good websites include and HTMLGoodies.

7) Menus

A website menu is the core navigation of any site. They offer the major links all parts of a site. A menu should be fully functional and as a result a lot of time should be used when designing them. The best resources i've found include DynamicDrive, Listamatic and 13Styles. They like all these sites give the basics, you can then easily change and modify any parts of them to suit your own needs.

8) CSS Compression

Usually when I code CSS or in any other language there are small snippets or code that have either become redundant or are not needed anymore. As a result you get extra code which takes up extra bandwidth, which over time is a waste of money (assuming you are paying). To counter this there are special sites that analyse your code, looping through and changing snippets to either be more efficient or removed all together. These sites vary in quality and the results they output but the ones I have found the best include CleanCSS and CSSCompressor. But as a tool for beginners they are great for cutting down unneeded code.

9) CSS Creator

Another tool which you could use is the online CSSCreator. You input values press the button, it fizzes whizzes and bangs and hopfully at the end of it you have a useful CSS sheet which you can use. The results vary but it is useful when you are starting out.

10) Type Testing

A major part of CSS is the font and type you use. You can, with CSS, change all of these values. But as a new designer (and experience) it is a lot easier to see CSS changes on the fly. As a result there is a couple of tools that specialize in working with fonts and there styles. These tools have hundreds of options (shown below) which you can change to get the perfect look for you website. My favorites are Typetester and Fonttester.

Notable Extras

These websites included are the extra ones that I use occasionally and I think they are worth a mention. I've not included them because they either don't fit into a section or they just have one amazing tutorial with CSS. Most of these sites move on from the basic CSS and go a bit more complex. But they are still cool.

KatGals tutorial is worth a mention. She offers a very easy to read tutorial on how to use both javascript and CSS together to get a time sensitive page style. It is a really awesome effect. I'm going to be using it on one of my new sites later in the future.

Another site that is worth a mention is N.Design Studio. He has two great tutorials on creating a CSS dock and a CSS menu. I think the results are really good and are simply worth a mention.

A the final website that is very interesting is BluePrintCSS. Its a different way of creating CSS. I'm not 100% what it does as I have never used it. But there was a lot of buzz about it. I would suggest checking it out if you have a spare 5 minutes.

This list is by no means complete. Please leave a comment with links to the websites which you think show off the best resources for CSS. I enjoy using the ones here and I hope you do to.


Andres said...

I love the layout site. I thought you might find this interesting too...