Section 55. Applying CSS to Markup Elements

#55. Applying CSS to Markup Elements

When designing with Web standards in mind, it's always best to use semantically correct HTML tags before you start creating a bunch of unnecessary classes or ID selectors. This means that, among other things, you should wrap paragraph text in P tags and use H1 tags (or other header tags) for header text. You can then define a style that reformats the default appearance of the markup elements however you want. Not only does this result in cleaner, leaner code, but it makes your pages more accessible to viewer's who can't use your stylesheets for one reason or another.

Get Up and Running

When applying CSS to markup elements, there are usually a handful of elements you find yourself styling again and again. The improved New dialog (File > New) offers a basic CSS file with many of these elements in it. In the New dialog, click the Web side tab and then select the CSS section to find this basic CSS file along with a slew of other CSS sample files. New sites include this basic CSS file by default.

Follow these steps to apply CSS to a markup element:

1.	Open the CSS Editor (see #54) for your Web page or open your external CSS file.
2.	Click and hold the New Markup Element Style button . Select an element from the menu that appears (Figure 55a). For example, you could select the P tag for paragraph text. The new element style is added to your list of style definitions on the left, and the property section tabs appear on the right. Figure 55a. GoLive offers a great starter set of markup elements that you'll more than likely want to use and reformat. Note If you don't see the element you want to apply CSS to in the element style examples menu, release the menu, click the New Markup Element Style button, and enter the element's name once it's created.
3.	Now assign any properties to your element style by clicking through the property section tabs and finding the properties you'd like to add. For instance, you could click the Font Properties tab and assign a different color, size, and font family set to your element style (Figure 55b). Click the Show/Hide Style Preview button to see your edits in action. Figure 55b. You can reformat any markup element you choose and then use the markup elements on your pages. This prevents you from creating an undue number of class styles.
4.	Switch back to your Web page and try out your new element style. Add the HTML element for which you've created an element style. You can apply paragraph and header tags to selected text by using the Paragraph Format menu located on the far left of the Main toolbar. Once you add the element to your page, it should assume the appearance you've defined in its style.