Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

6 CSS tools to help you build a better website

Nathan Segal | March 22, 2013
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.

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.

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.

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.

 

1  2  3  Next Page 

Sign up for CIO Asia eNewsletters.