CSS Resources

Top 5 Resources

1. Topstyle Lite - This is my number 1 CSS resource, it is free and very powerful, it even has intellisense like dreamweaver. dont leave home without it :) There is a commercial version but the free version should serve you well, especially if youre a beginner.

2. HTML Kit - not exactly a CSS tool (though you can edit CSS with it) but I use it to edit the HTML pages that I design so I can check if my CSS are correct. This is also a Freeware.

3. Firefox with Web Developer extension - No web designer should be without it, its the swiss knife of web design packaged in Firefox

4. Multiple IE, Opera and Safari for Windows - a good web designer test their designs in other browsers, this is called cross browser testing, making sure your designs also looks good in other browsers

5. CSS Cheat Sheet - These are lists of available selectors and values in one or two pages, which is very handy when you are coding CSS. See also other CSS Cheat Sheet

Do you want to see the power of CSS?

• 1. CSS Zen Garden is the pioneer in proving CSS is both powerful and beautiful, visit the site and click on the sidebar links to see the design change but maintain the same HTML structure.

1. All other similar sites just followed the footsteps of CSS Zen Garden like CSS Beauty

CSS Tools and Online Resources

1. More often than not, seeing others code is one of the best way to learn CSS, OSWD - Open Source Web Design lets you download pre-made CSS web templates and use and edit it to your liking, and the available code will teach you a lot

2. Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.

3. CSS Text wrapper - The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website.

4. The Box Office - almost the same as CSS text wrapper, lets you wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.

5. Layout-o-Matic a tool which allows to select a layout type, width, and other options to the left, and then click Download or View and pick up your multi-column CSS layout starter kit (turning it into something unique and beautiful not included). You’re welcome to use the resulting generated layouts for any purpose, personal or commercial.

6. JotForm is a great Web based WYSIWYG form builder. You can select a form type(Contact Us, Satisfaction Survey, Job Application, Suggest Website , Membership Registration, Party RSVP , Wedding Attendance, Reservation, Submit Product, and others). Your new form will be created with the default fields on the selected form.

7. Typetester is an online application for comparison of the fonts for the screen. It