Formatting CSS Code

This tutorial illustrates formatting CSS code in Dreamweaver CS5.

For this final section on CSS we're going to look at formatting CSS code.

To a large extent the formatting is irrelevant as far as functionality is concerned, but it can be quite useful to you as a web designer or developer to be able to interpret the code quickly and accurately, and for that the formatting of the code can make a big difference. It's also quite a subjective issue, so you will probably want to choose the formatting that suits you best.

First of all, open the Preferences dialog (it's on the Edit menu, remember?) and select the Code Format page.

Press the CSS... button and the CSS Source Format Options dialog appears.

This dialog enables you to change indentation, insert separator lines, etc to make your CSS code easier to work with. As you change the settings in the dialog, the Preview box shows you the effect.

Try changing a few of the options. Here I've specified that Dreamweaver should place the opening brace on a separate line.

When you've finished with your changes, press OK.

Once you've saved the changes, they will apply to any new CSS code. To apply it to existing code, Dreamweaver provides some specific commands.

Open the CSS style sheet oneColFixCtrHdr.css. Note that the opening braces are still on the same line as the name of the class, etc.

Select the Commands menu and then Apply Source Formatting.

The changed formatting is applied.

Note that the opening braces are now on separate lines.

The same procedure applies for internal CSS code (i.e. not in an external CSS style sheet). Open the page, enter Code view then use Apply Source Formatting on the Command menu.

More Dreamweaver Tutorials

All Dreamweaver CS5 Tutorials - Will be complete by Januay 2011.
Buy Dreamweaver CS5

Find this website useful?

To link to this page from your website, simply cut and paste the following code to your web page.

It will appear on your page as: Formatting CSS Code in Dreamweaver CS5

Share this Webpage

This site proudly build with Site Build It!