Cascading Style Sheets are not very difficult to write and use -- the notation is straightforward and the rules easy to follow. Even so, writing them from scratch, like writing HTML from scratch, can be time-consuming and frustrating, especially if you are prone to making keyboard mistakes, as I am. Forgetting to use semi-colons or curly braces, which renders the style sheet unusable, is a common omission.
November 29, 1999
CSS editors are nothing new, appearing soon after browser implementation of style sheets. In the beginning, these were simple stand alone applications that generated the text for a style sheet and allowed you to export a text file and then integrate it into your HTML document. Most of the major HTML editors now allow you create and attach CSS to your HTML document. Macromedia Dreamweaver was one of the first to offer this functionality. Dreamweaver's approach is fairly intuitive -- a basic style sheet can be created and attached, either in the <HEAD> tag or as an external .css document, by clicking through a series of dialogs. Drop down menus provide quick access to most CSS1 properties.
The easiest way to get at style sheets in Dreamweaver is through the Launcher. When you click the Styles button on the Launcher, the Styles palette opens. You can also get at this palette by going Window>Styles or pressing the F7 key. The Styles palette looks like this:
At the top of the palette is the tag selector menu. This allows you to apply the style sheet to a selection in your Dreamweaver document (say, for instance, bolded text) or apply it to the <BODY> tag. Existing styles appear in the list box in the center of the palette. The Style Sheet button, at the bottom of the palette, opens the Edit Style Sheet dialog box where you choose properties for tags and selectors.
This can be opened from the Document window menu bar as well by selecting Text>Custom Style>Edit Style or pressing Ctrl+Shift+E (Command+Shift+E on the Mac). The Edit Style Sheet dialog is where all the action begins. In the example above, we have two CSS class selectors, indicated by their dot flag characters, and three anchor pseudo classes. The highlighted selector at the top of the list has its declarations visible in Style definition, near the bottom of the dialog box. You edit, link, duplicate, remove, and create new style rules with the buttons at the right. When you click New the New Style dialog opens.
This is where you choose the kind of style you want. You can choose to use an existing HTML tag, or define new class selectors. In the example above, an existing HTML tag is being redefined. Once you have decided on a tag or class, you move on to the next dialog where the properties are set.
Okay, the Style definition dialog allows you to get at the meat and potatoes of selector declaration, individual properties. In the example above, the <DIV> tag has font, font size, weight, style, color, and other properties and values attached to it. This is a very basic set of rules applied to the tag. As you can see, a full range of CSS rules -- from controlling block level elements to applying transition filters -- are available through drop-downs and checkboxes. In the Category list at the left, a full range of CSS style attributes are presented.
After you have set up your style sheet, and you have clicked either the Apply or OK button, the style is added to your document in the appropriate place, within the <HEAD> tag. If you want to create an external style sheet, a separate text file with an extension of .css, which is referenced within the <LINK> tag, simply choose Link from the Edit Style Sheet dialog, mentioned above. You will be presented with the Add Remote Style Sheet dialog where you can type in the pathname to your new style sheet.
Dreamweaver makes it easy to create CSS1 with the correct syntax. The dialogs are straightforward, although you will, of course, need to brush up on your CSS if anything between the <STYLE> tag or in the external .css file is going to make any sense to you. The Style palette saves time and effort for people like me who are all thumbs when it comes down to keyboard entry.
Kurt Nimmo is a Web developer, HTML educator, and design consultant in Chicago.
