Dreamweaver & CSS Shortcuts

There are many great uses of CSS and one of the assets is having the power to reduce the load time of your web page, this is easily handled right from within a stylesheet.

One thing I will mention is to be careful not to use unnecessary code. When you are implementing for example, a three column ‘XHTML Strict’ layout, you may only need to define basic properties such as margin, padding, floats and positions to get the desired effects. I will go in more detail later. For now, code trimming.

The code block below shows how a browser will determine the background of this mainContent id declaration (please note, I am not showing every attribute because this tutorial is to show the concept).

In Dreamweaver, the above is the default code entered when using the CSS dialog box, you can change your preferences to use shortcut code by selecting edit from the menu and then choosing preferences near the bottom of the list. Please be aware of cross browser compatibility, if you have any concerns you can ask a question from the contact page.

Back to creating css shortcuts... you’ll notice the four lines of code above within the mainContent ID are associated with the background. We can easily reduce the code by declaring the background shortcut first and then include the styles after like so:

By using code in this way, your page load time will be happily reduced. This type of shortcut can be used with many CSS rules, update coming soon...

Correctly declaring an attribute within an XHTML tag >>>