Applying Styles Throughout Your Pages


So far, so good...right? Now you know that creating style sheets and style rules in Dreamweaver is a pretty easy process. Just about the only thing easier than creating the styles, however, is applying them. In most cases, you can simply attach your style sheet to the HTML page, select the object to which you want to apply the style, and then select the style you want from either the Property inspector or the CSS Styles panel.

Attaching a Style Sheet to a Page

Attaching a style sheet to a page is done by clicking the Attach Style Sheet button at the bottom of the CSS Styles panel. When you click the button, the Attach External Style Sheet dialog box, shown in Figure 25.7, enables you to specify the location of the file, whether you want to link to the file or import the style rules into the current document, and to what type of media the style sheet is to be applied.

Figure 25.7. The Attach External Style Sheet dialog box enables you to link to or import an existing style sheet.


Although the file location and URL property is relatively straightforward, the link versus import option and the media type might be a little confusing. If you choose to link to the style sheet, a line of code is added to the header of your page, instructing the page to include the contents of the external style sheet. This ensures that when the page is rendered, the style rules are included so that they can be applied. Importing the style sheet, on the other hand, makes the style rules a permanent part of the code for the page. This option is generally used when you want to combine two style sheets into a single sheet. It is not recommended that you import styles on a regular basis because the capability to make updates to a style and have it applied site-wide is lost when the style is imported.

The capability to select a target media type is new within Dreamweaver 8. It enables you to specify to what types of media the styles should be applied. For instance, you can create two different style sheets and specify that one set of style rules should be applied when the page is rendered on the screen and another set of rules applies when the page is sent to a printer.

When you complete the information about the external style sheet, click OK and the rules located within the style sheet become available to you in the All category of the CSS Styles panel.

Using Styles to Set Page Properties

Using style rules to control the page properties is generally done through the application of style rules to the <body> tag. After attaching or embedding your style sheet, click the <body> tag in the tag selector and click the Current button in the CSS Styles panel. As shown in Figure 25.8, the panel displays a summary of the styles currently applied to the tag and enables you to adjust the existing properties or add a new property to the page.

Figure 25.8. The CSS Styles panel displays the summary and properties for the selected <body> tag.


Modifying the page properties is as simple as clicking in the Value column (the right column) in the Properties section of the panel and selecting or typing a new value. When the value is a color, Dreamweaver provides access to a color picker. When the value is one that can be selected from a list of available options (such as font-family or font-size), the list is made available. If you want to add a new property, click the Add Property icon and choose from the list of available properties. You can then select from the available values for that property in the right column. To delete a property, right-click or Ctrl-click on it and choose Delete from the context menu.

Note

Whenever you make changes to any of the properties, the actual style rule is changed. This means that if you make a change to a rule that is in a linked style sheet, the actual style sheet is updated. If you make a mistake and change a color in the properties, you need to switch to the style sheet document that opens automatically when you edit properties and select Edit, Undo to undo the change.


To apply the changes to the page properties, save the style sheet. Note that the changes are applied to every page that links to the style sheet.

Tip

If you want to override a setting such as the background color in a linked style sheet, open the Page Properties dialog box by choosing Modify, Page Properties. All settings that you specify in this dialog box generate embedded styles in the document that override the styles in the linked style sheet.


Applying Styles to Text

Modifying the style of text can be done in a couple of ways. If the style that you want to apply already exists, select the text that you want to modify and then select the desired style from the Style drop-down menu in the Property Inspector. As shown in Figure 25.9, all styles that are embedded in the page or exist in any linked style sheets are visible in the Style drop-down.

Figure 25.9. The Style drop-down menu provides easy access to the styles embedded in your page or linked to in an external style sheet.


If you want to create a new text style, you can either follow the process outlined in the previous section to add a new style to your style sheet or just highlight the text and apply font, size, and formatting changes. If Dreamweaver does not recognize the combination as one that exists in a style, it generates a new style and embeds it in your page. This style is then reusable throughout the page. It is not, however, accessible to any other pages, which is good justification for adding it to your style sheet.

Tip

It's worth mentioning again that the cascade of styles dictates that the style that will be rendered is the style applied on the most specific level, so a style applied to a specific word overrides a style applied to a paragraph of text. If you run into problems with a style not displaying as you expected, the best place to start figuring it out is by selecting the text or the object and removing the style applied at that level.


Applying Styles to Tables

Just as you can apply styles to the page and to text, you can also format tables with styles. The style can adjust more than just the text contained within the cells. Using properties such as background-color and background-image, you can specify the presentation of table rows and columns.

To apply a style to a table, insert the table into your page by choosing Insert, Table from the menu bar. In the Table dialog box, shown in Figure 25.10, select the desired number of columns and rows and then choose a table width, border thickness, cell padding value, and cell spacing value. Click OK to create the table.

Figure 25.10. Add a table to your page so you can apply styles to it.


With your table in place, you can apply styles on the row, column, cell, or cell contents level. To apply a style to a row, click on the leftmost border of the row or place your cursor in any cell within the row and click the rightmost <tr> tag in the Tag Selector. With the row selected, choose the appropriate style from the Style drop-down in the Property inspector.

Applying a style to a column is done in exactly the same manner, with the exception that you select the column by clicking on the topmost border of the desired column and then apply the style.

If you want to apply a style to a specific cell, place your cursor inside the cell and click the rightmost <td> tag in the Tag Selector. With the cell selected, apply the style.

Finally, you can apply a style to specific text within a cell by selecting the text and applying the style via the Property inspector.

Applying Styles to Forms

HTML forms tend to be one of the more boring aspects of web design because they tend to look like every other form out there. Luckily, using styles, you can get rid of those generic gray buttons, blah text fields, and dull drop-down menus by applying custom styles to them. You can even get rid of that annoying extra space that occurs after a </form> tag is used in HTML by using the margin-bottom style property to set the margin to zero. Table 25.3 highlights some popular style options that can be applied to form elements.

Table 25.3. Form Properties That Can Be Controlled by Styles

Style Property

How It Can Be Applied

background-color

Can be applied to form buttons, text fields, text areas, and drop-down lists to change the background color.

font-family

Can be applied to text fields, text areas, buttons, and drop-down lists to change the font displayed.

font-size

Can be applied to text fields, text areas, buttons, and drop-down lists to change the font size.

background-image

Can be applied to text fields and text areas to insert a background image.

margin-top

Can be applied to the form to control the number of pixels in the top margin.

margin-bottom

Can be applied to the form to control the number of pixels in the bottom margin.

margin-left

Can be applied to the form to control the number of pixels in the left margin.

margin-right

Can be applied to the form to control the number of pixels in the right margin.


Applying Styles to Other Objects

As you have seen, it is relatively easy to apply styles to popular page elements such as the background color, text, tables, and forms. The great thing is that the power of CSS doesn't stop there. Styles can be applied to just about any other visual object that you can place in a web page. Want to set the margins of an image or adjust the way text wraps around the image? CSS can do that. Want to ensure that all images displayed in a certain area are scaled to the appropriate size? CSS can do that, too. The process of applying styles to objects is the same as applying them to text, forms, or tables. Simply create the style, choose the attributes you would like to adjust, set values for them, and apply the style to the object. Just as it does with text or forms, Dreamweaver makes applying styles to any object a snap.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net