CSS takes a huge role when I design web-sites. As I code CSS by hand in Dreamweaver, the layout of the CSS is very important to me. The standard CSS layout puts each property of a rule on a separate line. By the time I’ve finished my CSS I get a scroll-bar the size of a Tic-Tac and a thin column of CSS that stretches forever downwards.
After seeing the CSS laid out in a different format on another web site, I found the setting in Dreamweaver to display CSS horizontally when you apply ‘Source Formatting’ to your CSS. Take a look at the CSS of this page to see this technique in action.
To view and change these settings in Adobe Dreamweaver CS4, Click on: Dreamweaver > Preferences > Code Format.
When this page of the preferences has loaded, you should see a button called ‘CSS’ under ‘advanced formatting’ at the bottom. Click on it, to load the following pop-up fig 1:
 Fig 1 |
 Fig 2 |
Fig 1. sould be fairly similar to the default setting if you haven’t already customized it. In Fig 1, you can see the standard method of laying out CSS rules on the page. If however you un-tick the second box titled ‘Each Property on separate line’ you can source format your CSS in lines. See Fig 2.
Obviously this layout may not be to every-one’s taste however I prefer this CSS layout as the page becomes shorter, and you can see more information without having to scroll up and down as much.
You can also tweak some of the other settings on that pop-up to further customise the layout that best suits you.
