Advertise here with BSA

CSS can be compared to the sculptor’s tool set when crafting a sculpture. We as web designers utilize all the assets CSS brings forth to create structured layouts for our websites. Over the years this design process has become more organized and fitted. Rules have been put in place for best-practice procedures when coding.

We’ll have a look at some ideas you can apply to your stylesheets to help speed up your code in future projects. Efficient CSS is easy to manage and easy to read while also supplying a resource to the web designer. Keeping everything organized is a big step forward, but things get a bit more complicated than that.

Throughout the article keep your personal idiosyncrasies in the back of your mind and try to absorb as much information as possible. The best advice you can get from any developer is to find your own way of working. Try combining a few of these techniques with your own workflow to see how you can benefit the greatest as a CSS developer.

Why Bother to Streamline CSS?

Many web designers get lost in the comparison of frontend to backend languages when talking about parsing code. CSS and HTML are frontend design languages used to format and style elements on your website. Files are downloaded and parsed by the web browser your visitor is using.

This means frontend code still has a quantitative load time. Code developed and parsed by a browser still takes time to be read and computed, just like backend languages such as PHP or Ruby. This is where streamlined CSS can provide a huge benefit to your site in seeing shorter load times and quicker structuring of page elements.

This may not be so obvious with much of today’s high-speed connections and advanced Operating Systems. You may want to try viewing your site through a mobile browser to compare not only load times, but how the website is loaded.

When CSS is coded efficiently you should see elements form and style as they are processed. This can change browser to browser but it’s a common occurrence you’ll see the more you test your website’s code.

You’ll also want to keep your code standardized and simple. When you’re updating your blog or personal website a few months after initial development it’ll be a lot simpler to churn through CSS styles you’re already familiar with. Adapting to a set structure for best industry practices will help in the long run.

How to Work with Efficient Code

To begin coding with ultimate efficiency in your styles you’ll have to adopt some fresh new ideas. These are some basic CSS techniques being used even today by high-tier Internet websites and app developers.

Keep your Code Simple

This seems like an easy one that many will overlook. When mapping out a set of data for how your styles will develop keep it all simple – create data sets in a column stack if you need to.

Start by creating a list of the different sections you will work on in your styles. These can include text, forms, layout boxes, headers, footers, anything you may need. If you’d like to really get organized you can even break things down into a few known styles you will need, such as an ID or class for navigation links.

Afterwards this makes things much simpler when you go sit down to code. Having your resource list in front of you will almost create super-human coding powers to be pouring out code so quickly. This first step helps create a blueprint of your website mockup using “plain words” before going into any style language.

Keep Blocks of Code Delineated and Sparse

There has been an ongoing debate for a while between how CSS code should be written. When I first started I used block notation since it was all I had seen before. However single-line notation is much, much quicker when it comes to parsing and being able to read from a human eye.

This isn’t to say I’m making a case to ignore block-style CSS, far from it. When you are dealing with a key element or ID holding 6 or 7 major properties it will be easier to keep it in blocked form. You’ll be isolating the important pieces and elements out of your style so they’re quicker to find at a glance.

It’s also much simpler to read longer styles in block notation. This is because most text editors will wrap longer lines and reading property:value pairs can get very confusing when you’ve got 10+ to go through. As the web designer it’s your call how you space your CSS code. Just keep the efficiency issue in mind while doing so and always use your best judgement.

Working with Other Developers

This can be an annoyance or a blessing depending on the team. However the fact stands that if you’re currently or aspire to be a professional web designer, chances are you’ll be working with a team at some point.

As designers we can be especially difficult with making major changes to our works. With CSS code it’s a bit different since you’re trying to portray a beautiful layout using only property values. This can get messy when files pass between a few hands so be sure to keep things organized.

Comments can be a major help here. Adding comments to lines or blocks of code which may be confusing or misleading to some will save hours of working time. You want to communicate all of the work you’ve put into a stylesheet in the most elegant way possible.

Ensure while you work there aren’t any duplicate styles or appended styles being overwritten. For example imagine a website’s page headings h1-h4 are styled earlier in a CSS document but some code changes the fonts deeper in. This could be imminently confusing for somebody who didn’t even write the code and now has to go through and fix this bug.

Communication is also very important in web development teams. You can write some of the most efficient code around, but lack of communication is what kills projects. Keep your mental processes focused on the task at hand and work within the boundaries of your team, not just your own creative ideas.

Keep Track of Separate CSS Documents

Another way to keep code clean and organized is to separate the many types of styles you may be applying. This works much better on larger websites which require so many styles that a single document holding them all is an unrealistic sight.

One example of such a site could be Facebook. They would have so many different pages for styles to load on – profile, search, registration, photos. I wouldn’t want to be the guy sorting through all that code to apply a simple bug fix if it were in one consolidated file.

Granted Facebook may be garnering a lot more traffic than you would expect but the principles are the same. If organization is an issue separate stylesheets can go a long way. Commonly today you’ll see web designers keeping code organized based on how it structures the document. For example you may have layout.css, text.css, and forms.css.

The benefit here is not all of these style documents need to be loaded on every page. This allows for greater customization when it comes to building your website. You’ll cut down on parsing time tremendously just by creating separate views and styles for each one.

Testing Support for IE

Internet Explorer has always portrayed the evil bandit for web developers, CSS coding especially. Luckily Conditional Comments can be applied to your HTML which look like regular comments to most browsers. In Internet Explorer they can be used to implement new styles based on the browser your running.

This has always been an issue and with the release of Internet Explorer 9 beta we’re getting just a bit closer to a more solidified Internet experience. Only problem is how many people are still running browsers as old as IE6 or IE7. These have serious processing bugs and sometimes require external styles to fix them, appearing only based on their flawed rendering engines.

Thankfully support has gotten better and Microsoft seems to be turning things around. Keep an eye out for conditional comments if you haven’t worked with them yet. They can prove to be invaluable in many cases where CSS properties just won’t work right and you need an alternative.

Adding a Table of Contents

This is an optional step which I have found to work wonders in my stylesheets. You can keep a table outside of the CSS document itself, but I have found this to be a bit counter-productive. Especially when it’s so easy to add comments in-line.

The main purpose of placing a Table of Contents into your styles would be ease of access and streamlining the editing process. Place markers in the beginning of your document to separate your code into easily-dividable sections.

A good way to approach this would be to create your own table key. For example, if you were splitting your table into each main area of the document (layout, font, header, navigation etc.) you could key them with a set of unique characters.

=!layout and =!font could be used to delineate the layout and font sections, respectively. Since you probably won’t run into those exact pairs of characters anywhere in your code it’s easy to add them both in your table and at the start of each section in comments. Then using the Search or Find feature of your text editor you can skip down the sections of your CSS styles with ease.

This is also a great way to approach a teamwork project where many people will be looking at the same code. It keeps things organized and easier to find in the mess of styles we see today.

Conclusion

Although there are many ways to approach optimizing the efficiency of your code these examples are a great way to get started. CSS is an ever-changing subset of the design industry and has a lot of new ideas being built around it.

Passion and dedication are required to make it in the design industry. If you can hold onto your passion for digital design it shouldn’t be difficult to keep up with the curve on CSS practices. Reaching out to the community of web designers found all over the web is a leap forward. The experts of industry are more than happy to share their techniques for streamlined CSS which evoke bouts of innovation into others.

Advertise here with BSA

While both languages for HTML5 and CSS3 aren’t fully complete yet, taking the time time to familiarize yourself with some of the pointers in this post can really help you achieve that clean look and feel for your site. Let’s take a deeper look at them.

HTML5

HTML5 is the latest version of HTML or Hypertext Markup Language. It is currently only fully supported by a handful of browsers but the next year should see a large increase in usage. It isn’t expected to be completed until 2014, but the features that are available now are a great way to become acquainted with HTML5 and add some cool elements to your website.

Steve Jobs famously refuses to allow Flash on the iOS due to the many bugs and crashes it experiences, therefore, learning how to use the more intricate features of HTML5 is going to be a must for those who want to develop apps and iOS-friendly websites. With Google rolling out an HTML5-friendly version of YouTube, many developers are starting to see how important this system will become in the near future. However, with Firefox resisting some of the advent of HTML5, developers and designers are still feeling the need to cover all of their bases when implementing new features on a website.

The idea behind HTML5 is that it’s not one large entity, but rather made up of smaller parts that work together to create something innovative and advanced. Each browser may support different features of HTML5, which makes it important for those interested in coding to figure out which features they need and which will be supported by different browsers.

HTML5 simply builds upon the widespread success of HTML4. That means a coder doesn’t have to throw away the existing markup, but rather build upon and improve the old one. For example, forms can be updated to allow for new features such as a better email input for those using a mobile device. However, viewers stuck in IE6 will simply see it as a text field and still be able to use it.

Here are some examples of HTML5 in use:

Features

• Any HTML5 syntax requires a doctype to be specified so that the browser can render the page in standards mode. The good news though is that the doctype declaration has also been simplified from previous HTML. It is now just: <!DOCTYPE html>
• The audio and visual support in HTML5 is outstanding. As soon as it’s fully running and all browsers support HTML5, you will find it easy to add audio and video to websites without the need for outside plugins.
• Editing the content of your website is simplified with HTML5. Using the contenteditable attribute, you can quickly and painlessly change your text by adding contenteditable=“true” to any element.
• The canvas element makes it possible for you to bypass Photoshop to make your 2D images and directly place them in your code.
• The application cache enables you to navigate web applications while you are offline.

Why Use It

• HTML5 will load much quicker than its older brother because it implements WebSockets.
• Mobile phone applications will be much more accessible if written in HTML5 because you will not have to write applications for a specific brand of phone but rather can create universal applications for all phones.
• You have more flexibility in creating your website.
• Video, audio and images are all easily written right into the code, eliminating the need for any third party software.
• This language is growing and will only result in more, new, better and faster features that will leave old websites looking outdated.
• HTML5 simply builds on HTML4, so the old markup can stay in place as you develop the new features.
• HTML5 and CSS3 together will give you some serious designer credibility.

CSS 3

Cascading Style Sheets (CSS) offer increased flexibility in the presentation of website content. In essence, it just makes everything prettier. Although CSS3 isn’t supported by all browsers yet, it’s becoming increasingly popular because it makes these changes so much easier than trying to get the same effect using something like a Javascript plugin or creating slightly different versions of the exact same image.

One drawback to using CSS is the requirement to implement filters to change how something will appear onscreen using different browsers. Although Internet Explorer is known for bugs, CSS can still be incorrectly interpreted by Firefox or Chrome. As such, some web designers have created different CSS codes to be sent to different browsers, or use filters to cut off CSS delivery completely.

CSS3 offers some exciting new features to enhance the appearance of a website. Although these features might not be absolutely necessary to the functionality of a website, users are coming to expect a website to look awesome as well as operate cleanly. CSS3 makes it easier for designs that will make visitors “ooh and aah” over them to be implemented.

Some features, such as menus, are necessary in almost any website. But with CSS3, the functionality and aesthetic appeal increases exponentially. Submenus upon hovering, horizontal menus, menus with rounded edges, submenus with tabs, submenus with descriptions, and menus with submenus with rounded edges with descriptions on hover are now all possible with some tweaking. Users will appreciate the ability to see a little more of what that page is about before potentially wasting loading time.

Cool New Tricks

Box-shadows – This could allow the main content to slide beneath another area, such as a footer, or cause the area to look as if it’s coming out of or sinking into the website. CSS3 makes this happen without requiring the coder to create a new image or use a Javascript plugin. Another technique is to cause the shadow to appear upon hover.

Text shadows – Sounds exactly like what it is: provide a drop shadow underneath HTML text elements.

h1 {
     text-shadow: 0px 1px 1px rgba(0,0,0,.2);
}

Easier font additions – To add a new font, simply upload the file to your server, link to the CSS file and create a font family.

Multiple backgrounds – Overlaying multiple backgrounds to a page is possible with this code:

body {
     background:
     url(../images/bottom-left.png) top right fixed no-repeat,
     url(../images/bottom-right.png) top left fixed no-repeat,
     url(../images/top-left.png) bottom left fixed no-repeat,
     url(../images/top-right.png) bottom right fixed no-repeat;
     background-color:#ffffff;
}

Border images – Rather than simply using a stodgy old plain border, CSS3 allows you to upload an image to use as a border.

Opacity levels – Before, you had to create a new image or use a CSS filter. Now, simply input “opacity: 0.5;” or another desired number to get the effect.

RGBA coloring – Rather than using hex colors and memorizing them or referring to a cheat sheet, this technique allows you to choose the amount of red, green, blue and opacity in your design and doesn’t require any browser extensions.

Transform – This code allows you to choose how big you want an area to become during hover.

Rounded corners – Prior to CSS3, these used to be tricky, but now you can get rid of those sharp corners without using images..

div {
     border: 2px solid #434343;
     padding: 10px;
     background: #e3e3e3;
     -moz-border-radius: 10px;
     -webkit-border-radius: 10px;
     width: 500px;
}

Note: Moz stands for Mozilla, while webkit is for Safari and Chrome.

Resizing elements – This code works in Safari to provide a small resizing triangle that allows users to…resize.

div {
     resize: both;
}

Advertise here with BSA

Even though HTML5 is relatively new and it’s not supported yet by all major browsers, it is being used now by a lot of web designers and developers. Without a doubt, HTML5 is going to play a big part in the way we develop on the web, for many years to come. As I just mentioned, many people are using it now, but there are also many of you out there that hasn’t touched it yet. Now is a good time to start learning it. So, in order to give you a helping hand with that task, we’ve rounded up 7 Useful Resources to Help you Learn HTML5.

A Web Developer’s Guide to HTML 5

This document illustrates how to write HTML 5 documents, focussing on simplicity and practical applications for beginners while also providing in depth information for more advanced web developers.

The WHATWG Blog

The WHATWG Blog is the blog of The Web Hypertext Application Technology Working Group, which are the people responsible for the HTML 5 spec.

Dive Into HTML 5

Dive Into HTML 5 is a book that seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards.

HTML5 Doctor

HTML5 Doctor publishes articles relating to HTML5, its semantics, and how to use it right now. They also invite questions via Ask the Doctor, and post answers in future articles so that everyone can benefit.

When can I use…

This is a one-pager that acts as a cheat sheet of compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies.

HTML5 Visual Cheat Sheet

This cheat sheet is essentially a simple visual grid that contains a list of all HTML tags and of their related attributes supported by HTML 5.

HTML5 Gallery

HTML5 gallery has two primary aims, the first is to showcase sites that use HTML5 for markup, so that we can see how people have interpreted the specification and how they’ve implemented it. The second is to help people learn about html5 and how it should be used and how to implement it.

Advertise here with BSA

You’ve probably been hearing a lot lately about how Flash is a dying technology and how it’ll soon be replaced by HTML5. Personally, I think that it will slowly replace Flash for some things, but Flash will always have a place, especially for developing complex games and rich internet applications. If you’ve yet to see what HTML5 can do, I’ve rounded up 10 demos that show off some of its capabilities.

So what do you think – will HTML5 replace Flash?

Canvas Minimal Particle Animation

CanvasMol

Flickr and Canvas in 3D

Cloth Simulation

etchaPhysics

Google Images Gift Box – CSS 3D example

Liquid Particles

HTML5 Canvas Nebula

Ball Pool

Bomomo

Advertise here with BSA

We all know that JavaScript allows us to do great things when it comes to user interfaces, but with a little imagination and creativity, the same types of effects can be created with only CSS. Here are 13 tutorials that teach you how to push the limits of CSS and make it do things that we’re not accustomed to it doing. You’ll notice that some of these techniques can be very useful, while others are simple for proving it can be done.

How To Create a Pure CSS Polaroid Photo Gallery

Creating a Bubble Coda Style with CSS3

Accordion using only CSS

How to Create a Fancy Image Gallery with CSS3

CSS3 Hover Tabs without JavaScript

Create a JQuery Content Slider Using Pure CSS

How to Create a Valid Non-Javascript Lightbox

Pure Css Data Chart

Bubble Effect with CSS

CSS Image Switcher

Pure Css Line Graph

CSS Image Switcher

Pure CSS Timeline

Advertise here with BSA

HTML5 is giving web designers and developers new capabilities that were things of fantasy with previous versions of HTML. Web pages will now be more semantic with the use of structure specific tags. Visual elements like rounded corners are now built in, and so is the ability to create drag and drop interactivity. Even though HTML5 is not fully supported in major browsers, there are those that are pushing forward and experimenting with its new features. In an effort to encourage you to do the same and to prepare you for the future, we’ve rounded up 15 useful HTML5 tutorials and cheat sheets.

Tutorials

How to Make an HTML5 iPhone App

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

Design & Code a Cool iPhone App Website in HTML5

Coding A HTML 5 Layout From Scratch

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

Have a Field Day with HTML5 Forms

Designing a blog with html5

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

Structural Tags in HTML5

Coding a CSS3 & HTML5 One-Page Website Template

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6

Cheat Sheets

HTML 5 Cheat Sheet

HTML 5 Visual Cheat Sheet

HTML5 Canvas Cheat Sheet

HTML 5 Pocket Book

Advertise here with BSA

CSS3 is changing how we build websites. Even though many of us are still reluctant to start using CSS3 due to the lack of support in some browsers, there are those out there that are moving forward and doing some amazing stuff with its cool new features. No longer will we have to rely on so much JavaScript and images to create nice looking website elements such as buttons and menu navigations. So, in order to encourage you to start experimenting with CSS3, we’ve rounded up 12 excellent CSS3 button and menu techniques.

Roll Your Own Google Buttons

CSS3-Only Tabbed Area

Radioactive Buttons

Apple’s Navigation bar using only CSS

How to Build a Simple Button with CSS Image Sprites

Creating Dynamic Buttons With CSS3

How To Create Depth And Nice 3D Ribbons Only Using CSS3

CSS3 Chunky Menu

CSS3 Dropdown Menu

Pretty CSS3 Buttons

jQuery style menu with CSS3

CSS3-only horizontal drop line tab menu

Advertise here with BSA

Beginners through advanced coders make mistakes in their HTML and CSS files, either through carelessness or lack of experience. Clean code is very important though and will help further your skills as a developer, as well as save you time in editing later on! It never hurts to review if you’re a skilled developer, many mistakes are caused by going too quickly and not practicing good coding skills from the beginning. Here’s a helpful list of common mistakes and missteps that I’ve encountered through my own work, as well as working with others.

HTML Mistakes

Forgetting to Close a Tag

This is very common, especially in beginners. Several tags require closing tags such as divs, strong tags, and links to name a few. Other tags require a closing slash to end the line such as an img tag.

<div>Text inside the div.</div>

<img src="images/imagename.jpg" />

Incorrect DOCTYPE

HTML requires that you start out the document with the correct DOCTYPE declaration. It needs to be before anything else in the code, starting the document by declaring what type of HTML you’re using. Here’s the DOCTYPE for XHTML 1.0 Transitional.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Improperly nesting tags

It’s very important to open and close tags in the proper order. Once something (for example a div) has opened, it must close before anything above it can close. The following is incorrect.

<div><strong>text</div></strong>

Capitalizing tags

This is just considered bad practice, but won’t result in your code not being validated. You should always use lowercase for tags like divs, links, and images. The following is incorrect.

<DIV></DIV>

Forgetting to open or close quotes

I’ve seen this a lot in beginners and will result in broken code and things not functioning properly. HTML requires double quotes that open and close correctly. Here’s an example of correct usage.

<img src="images/headerimage.jpg" />

Using Inline Styles

This is another one that is considered bad practice. Inline styles do work but will result in headaches later on! Items should be styled globally through an external stylesheet. It will be much easier to edit and add styles to in the future. An example of inline styles:

<a href="link.html" style="color: #000; text-decoration: none;">link name</a>

Not Encoding Special Characters

Characters like “©” and “&” should be shown with the proper HTML code for the character. Here’s a great list of characters and their HTML counterparts that you should use.

Confusing Classes and Ids

Classes are for items that are used more than once on one page. This can be a link style that you’ll call in multiple times on one page but doesn’t follow the global link styling. Ids are items that are called in just once, like the header div. Classes and ids are often overused and used in unnecessary places as well. Stick to the minimum amount of classifications that you need.

CSS

Forgetting to Close Things Properly

Each div or item called in starts with the opening curly bracket and ends with the closing curly bracket. Each style called in needs to end with a semicolon. The last declaration within an item doesn’t need a semicolon, but it’s best to use it in case you plan on adding more items later on, you may forget to add it back in. An example of proper use:

#divname {
width: 40px;
height: 30px;
}

Condensing your stylesheet and putting all declarations for a div on one line is up for debate. I prefer to put each declaration on its own line, I think it’s easier to edit that way, but some may say that it just produces longer code.

Not Using Global Styles

Many things should be styled globally like paragraph and heading styles for text as well as link styles. This will reduce the risk of mistakes and will also cut down on the amount of code in your stylesheet.

Not Using Unique Names for Ids and Classes

It’s very important to choose names that are unique so that it’s easy to edit later on, and easy to identify in your stylesheet. Name your divs specific things like #home-left-column which is better than just #left.

Not Using Shorthand Code

Shorthand code is another way to condense your stylesheet, which is helpful for speeding up user load times as well as finding things when you’re editing later on. Instead of calling in padding-top, -left, -bottom, and -right you can just use:

padding: 5px 10px 0 10px;

Shorthand code can be used for many declarations including: padding, margin, border, and font.

Not Using Shortened Color Declarations

Hex numbers that repeat like #ffffff and #000000 can be condensed to #fff and #000. This is another way to condense your code and keep things short and easy to look at.

Incorrectly Using Positioning

Positioning is tough to understand when you’re first starting out with CSS. Your choices are static, relative, absolute, and fixed. Static is the default option and is positioned according to the normal page flow. A relative item is positioned relative to itself, meaning you can move it up, down, left or right, based on where it would normally sit. Absolute allows you to place an item anywhere on the page, and is the most misused positioning statement. The values you set for it will be relative to the last parent item with relative or absolute, and if there aren’t any, it defaults back to the html tag, allowing you to position it anywhere by declaring top left right or bottom values. Fixed is positioned relative to the browser window, so an item will stay in place if a user has to scroll. Learning how to use positioning correctly is important, but shouldn’t be used excessively. I rarely use these at all in my stylesheets.

Validate

Validating your HTML and CSS files will help in reducing errors and figuring out where a problem might be coming from. Your website may function correctly with some of the common HTML and CSS mistakes, but it doesn’t make it good practice or valid code. The validator will help identify these problems and you’ll be able to adjust the way you code for the future.

More Resources

• 12 Common HTML Mistakes
• 10 HTML Mistakes that Should be Avoided
• Ten Common CSS Mistakes
• CSS Shorthand Guide
• CSS Beginner Mistakes
• CSS Cheat Sheet

Many of us are guilty of these HTML and CSS errors, myself included! We can only strive to learn from our mistakes and practice better coding in the future. Cleaning up your code will help you further your coding skills and allow you to create better sites with more functionality for your users.

Advertise here with BSA

For web developers and designers, it can be difficult to memorize the syntax for multiple programming languages and frameworks, especially since they are always evolving and growing. This is where cheat sheets come in handy. Most cheat sheets are designed to be printer friendly, so you can have them laying around on your desk as quick reference cards. Here is a collection of useful cheat sheets specifically for front end web development that will help you with HTML, JavaScript, and CSS.

HTML

HTML 5 Cheat Sheet

HTML 5 Visual Cheat Sheet

(X)HTML Elements and Attributes

HTML Cheat Sheet

HTML5 Canvas Cheat Sheet

CSS

CSS Level 2 Visual Cheat Sheet

CSS 3 Cheat Sheet

CSS Cheat Sheet (V2)

CSS Cheat Sheet

JavaScript

jQuery 1.4 API Cheat Sheet

jQuery 1.4 Cheat Sheet

jQuery 1.4 Cheat Sheet

mootools 1.2 cheat sheet

JavaScript Cheat Sheet

Advertise here with BSA

Whether you’re a CSS pro or just learning, it’s important to have a good set of tools to speed up and simplify your development. What makes the web so great now, is that many valuable tools can be found online and used inside your browser. Here are 11 online CSS tools that should be a huge help to your CSS development.

Grid Designer

Grid Designer is an easy to use tool that lets you quickly create complex grid layouts.

Drawter

Drawter Beta 2 is a tool written in JavaScript and based on jQuery library. It provides you the possibility to literally draw your website’s code. It runs on every single web-browser which makes it really useful and helpful. Each tag is presented as a layer you have drawn.

YAML Builder

The YAML Builder is a tool for visually creating YAML-based CSS layouts. It allows for the setting of basic layout characteristics like the number and positioning of the content columns, as well as the dynamic creation of grid-based layouts by dragging and dropping subtemplates.

Blueprint Grid CSS Generator

This tool will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

Format CSS

This tool lets you paste your css into a field and returns a formatted version based on various settings that you specify.

CSS Type Set

CSS Type Set allows you to enter text and then experiment with various settings such as font, font size, color and more to see what your css text will look like.

Clean CSS

CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise.

YUI CSS Grid Builder

CSS Grid Builder is part of Yahoo!’s YUI Library. It’s a simple interface for Grids customization.

Typetester

Typetester gives you lots of settings to create side-by-side comparisons of on screen text, and then grab the CSS for the one you like.

CSS Frame Generator

CSS Frame Generator allows you to paste your XHTML code into a text area and it converts it into a CSS Frame layout.

W3C CSS Validation Service

If you haven’t heard of the W3C CSS Validation Service, you should start using it. It is a great and easy way to make sure your CSS and XHTML is valid.