6 CSS Tools to Help You Build a Better Website

Version 3 of Cascading Style Sheets give website designers more control over page layout and page elements. If you plan to build (or rebuild) your small business website using CSS, these six applications are worth a look.

By Nathan Segal
Thu, March 21, 2013

CIO — Cascading Style Sheets are an essential element of Web pages, since they control page layout, fonts, positioning and so much more. While CSS does offer a great deal of page control, some aspects can be cumbersome. This in part is why CSS is going through another revision, currently version CSS3.

CSS3 gives designers more control over page layout and the behavior of different page elements. With its new coding options, CSS3 now has the capability to create image effects with code, giving more control over the look and feel of layouts. These effects—which include gradients, text and box shadows and border-radius, for rounded corners on boxes—let you create image effects on the fly, without building each effect using image-creation programs. It's also worth noting that CSS3 is backwards compatible and will work with pages designed with CSS2.

News: CSS Working Group Expands Palette with Variables

Here are six programs that will make your life easier when designing pages with CSS. Some will help you accomplish a single CSS programming task, while others are more robust and will help you go a long way toward building a fully functioning small business website.

Adobe Dreamweaver CS6

When working with CSS—and, in fact, when doing all types of Web design—the program of choice for many is Adobe Dreamweaver CS6.

One particularly useful feature is Fluid Grid Layouts (shown below), which is a must for creating multiple layouts for desktop, tablet and mobile versions of a site at the same time. Note that the document type defaults to HTML5. As a result, Dreamweaver CS6 lets you build a mobile site quickly, then output the layout using the mobile development framework PhoneGap.

Adobe Dreamweaver Fluid Grid Layouts

There is also improved support for the HTML5-based user interface system jQuery Mobile.

Adobe Dreamweaver Mobile

Additional Dreamweaver CS6 features include an updated Multiscreen Preview panel, which lets you see how HTML5 content renders, as well as integration with the Adobe Business Catalyst website hosting platform and a wider range of Web fonts that you can incorporate into your projects.

Analysis: 6 Things You Need to Know About jQuery

Adobe offers several pricing models based on its Creative Cloud package, which offers software components to businesses beginning at $19.95 per month.

Continue Reading

Our Commenting Policies