Visually generating CSS code for your web site

These days it is best practice to style web page elements using as much CSS (Cascading Style Sheets) as possible in place of inefficient graphics. Cool new CSS3 features like gradients and drop shadows are now well supported by browsers, however, it can be quite a daunting, time-consuming, trial and error process unless you can visually interpret code and know all the vender specific code by heart.

There is a secret tool lurking within the Adobe Creative Suite package that helps to make CSS much easier to implement. Few web designers realise they have it in their toolkit or have long abandoned it in preference of the infamous Photoshop which could always do just about everything they needed and was more familiar to use, especially for those migrating from print design to web. Fireworks CS6 is that tool.

If there is a single reason why you should take a second look at Fireworks CS6, it is the new CSS Properties panel. It will automatically generate CSS code for you to use in your web pages. How it works is you first create and style an element visually using Fireworks’ vector drawing tools and then you can simply select the object and CSS properties will be generated in the CSS Properties panel. From there you can copy and paste the properties into your web page’s CSS to apply to an HTML element such as a div or a list item element.

Fireworks can ensure your implementation of graphics are more efficient than ever before using a new feature called CSS Sprite Sheets. This will take your sliced graphics and rollover states and place them together in a single combined file. Along with that file will be CSS positioning information that you copy and paste into your web page’s CSS which tells the browser what portion of the larger graphic to display for each element. For a large website with heavy traffic, the efficiency of CSS can really help to reduce the server workload and increase the website’s speed.

For a step-by-step guide to using Fireworks CS6 check out Yoobee Publishing’s Introduction to Fireworks CS6 software training guide. If you are completely new to web design and don’t quite know what all this “CSS stuff” means, or need to up skill, consider enrolling in one of Yoobee School of Design’s web design related short courses or diploma programmes.