6 CSS Tools to Help You Build a Better Website

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.

There is also improved support for the HTML5-based user interface system jQuery 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.

TopStyle 5

The HTML5 and CSS3 editor TopStyle 5 includes several helpful features:

• While CSS3 offers a wide range of possibilities, it doesn’t display properly in all browsers. Plus, since it hasn’t reached the final release stage, you need to use CSS vendor prefixes to make sure there aren’t any conflicts among browsers. There are many settings, though, and it’s difficult to remember them. Luckily, TopStyle 5 ensures cross-browser compatibility through its Prefixr, which adds those vendor prefixes to your code.
• The iWebKit 5 framework lets you create website or app compatible with the iPhone, iPod Touch and iPad.
• Image Maps let you create “hotspots” that, when clicked, take the user to another Web page.
• Finally, the CSS Gradient Generator (shown below) lets you create vertical, horizontal and diagonal gradients with pure CSS3, without having to create images. The Reverse button will reverse the gradient—from top to bottom, for example, to bottom to top. Note that you can see the code in a preview box at the bottom of the dialog box.

TopStyle 5 is available as a single-user download for $79.95. Existing Topstyle 4 users can upgrade for $29.95.

Rapid CSS Editor

The Rapid CSS Editor lets you write website code manually or use a wizard. When it comes to creating CSS or HTML layouts, using the wizard is a snap, and it includes tutorials for the CSS beginner. Choose a font, font size and link color, then click “OK” and you’ll get the CSS code shown at the right.

The New Form Template option, meanwhile, lets you choose from several pre-defined layouts or create and save your own. As you create a new template, as seen below, it’s easy to preview the results.

Rapid CSS Editor is available for $39.95 for general use and $29.95 for personal use.

Firebug for Firefox

The open source Firebug for Firefox add-on editor lets you inspect the code on a Web page without making any changes to that code. You can experiment with turning items off or adding code, for example, then copy your settings for use with other projects. Among other things, Firebug offers a great way to learn HTML code and use non-destructive editing to change the style and layout of a page.

Here’s a screen shot example of Firebug in action:

Let’s say you’ve built a layout, but you’re not satisfied with how it looks in the browser. To see what’s going on, click on the “Inspect” button, then hover your mouse over different elements on your page. When you do this, that section will open in Firebug and you’ll see what’s going on with your code.

Additional Firebug features include the capability to use a JavaScript debugger and a robust set of extensions that add more power to the program.

CSS Menu 3.3

One task that can eat up a lot of time when building a new site is menu creation. To address this, CSS Menu 3.3 lets you create both horizontal and vertical navigations.

As you’ll see when you look at the default interface for CSS3 Menu 3.3, everything you need is on this one screen. This makes the program simple to use.

At the top left are the controls for opening, saving, publishing adding and subtracting menu items. Directly below that is the menu where you can choose to create either a horizontal or vertical menu, both complete with flyouts and multiple levels. Below the menu section, you’ll find the item properties that let you to set the text, link, target and alt text, as well as add an icon to your menu items if you wish.

Related: 3 Web Tools to Get Any SMB Online Quickly

At the top right, meanwhile, are the templates and icons section. Templates give you horizontal and vertical options for building menus, while the icons tab gives you various icons to display alongside menu items.

Finally, at the bottom right are the font, color, hover and box controls. These give you a lot of flexibility for styling the menu and the text. For example, you can choose from up to 15 different fonts, including different fonts for the main menu and sub-menu.

CSS Menu 3.3 has two pricing models. A single website license for both Windows and Mac users is $59, while and an unlimited website license is $79.

CSS3 Button Generator

Another time-consuming task when building a website is creating buttons. The Web-based CSS3 Button Generator offers you a solution by letting you create custom buttons for your layouts. (Be aware, though, that these buttons will work only with browsers that support CSS3; otherwise, the buttons might not render correctly.)

The CSS3 Button Generator consists of several sections: Font/Text, Box, Border, Background, Hover and CSS Code. When you visit this site you’ll see a button in place at the top of the screen; meanwhile, several settings are already enabled.

When setting the font, you’ll encounter some limitations, as your only choices are Arial, Georgia and Courier New. Also, there aren’t any controls such as underline, left, right, center, italic or bold, though you can control the position of the text by adjusting the box properties.

Here’s an example button—with admittedly exaggerated effects—to give you an idea of what this software can do:

When you’re satisfied with the look and feel of your button, copy the CSS code and Web kit settings and use them in your designs.

CSS3 Button Generator is free, though you can make a donation to its creators, the CSS Portal. The minimum default donation is $20.

Nathan Segal has been working as a freelance writer, photographer and artist for 14 years. He is based in British Columbia, Canada. Reach him via email or visit his website. Follow everything from CIO.com on Twitter @CIOonline, Facebook, Google + and LinkedIn.