Favourite web based CSS tools and resources

Cascading Style Sheets (CSS) is a style sheet language used to define the look and formatting of a website. Even the most experienced web designers don't remember all the CSS properties and how to use them by heart and using web based tools and resources while building a site helps and makes things faster. If you aren't familiar with CSS, but want to be able to make your website pretty the web is filled with help for you. Here's a short list of some of the tools I find very helpful when I'm building or tweaking the styles of a site.

CSS Tutorial - This tutorial of W3Schools is packed with information, examples and different ways to learn and test your CSS skills. I use the site as a reference to check the different CSS properties and to see how and where I can use them. The browser support of each property is also included. Very useful site for anyone who works with CSS or wants to learn how to use it to make a website pretty.

CSS Border Radius Generator - Wanna make rounded corners with CSS? It's easy with this tool which allows you to immediately view how different border radiuses would look. You can also create easily different radiuses for different corners. The correct CSS which works with different browsers is given right after you have entered the amount or amounts of radius.

Ultimate CSS Gradient Generator - I mostly use CSS gradient for buttons, but it can be used as a background of other elements as well. This tool has plenty of options for creating the gradients and it works brilliantly. The tool works kind of like Photoshop It spits out hefty amount of CSS which is compatible with various browsers.

Box Shadow Generator - One of my favourite properties of CSS, right after border-radius and background gradient, is box-shadow. It creates a nice shadow either outside an element or inside it. Most often I use it on buttons and form elements, but sometimes I add shadows to other elements too. This tool helps creating CSS shadows for your design. Just don't go overboard with them!

CSSmatic - This site has tools for creating border-radius, background gradients, box-shadows, plus creating noise textures for backgrounds. This site is newer for me, but it seems to nicely put together all the essential tools for web designers.

CSS3 Generator - As CSSmatic, this site also brings together different tools for creating CSS effects. The site is a bit more complicated and less easily visual than all the above, but it features a good amount of tools for more advanced work with CSS.

Webfont Generator - Sometimes you want to use a font that's not available or doesn't work correctly on Google Fonts or other webfont services. If you have a license for using the font on your website or want to use a free font that's not available otherwise you can add it by using @font-face. Font Squirrel allows you to turn the font into webfont kit that works on different browsers. The kit includes the files you will need to upload on your server and the CSS to be added to your style sheet.

Simple Styles for Horizontal Rules - The <hr> tag is highly undervalued amongst web designers. It's an efficient and semantic way to add a break between two sections of content. This list features a bunch of interesting and fancy CSS styles for horizontal rules (eg. <hr>).

• Get on blogging, chapter 1 – Where do I begin?
• Modifying the brand