© 2011 Delmar, Cengage Learning

Chapter 8

Using Styles and Design Style Sheets for Design

© 2011 Delmar Cengage Learning

1. Create and use embedded styles

2. Modify embedded styles

3. Work with external style sheets

4. Work with conflicting styles

Chapter 8 Lessons

© 2011 Delmar Cengage Learning

Using Styles and Style Sheets for Design

• Separate or external file sheets allow you to change the appearance of every page to which the style sheet is attached.

• A type of rule that affects all headings in a website is called a global CSS rule.

© 2011 Delmar Cengage Learning

Using Styles and Style Sheets for Design

• Embedded styles are internal styles whose code is located within the head section of the HTML code.

• Embedded styles are used in Dreamweaver CSS predesigned layouts to format the div tags on each page.

© 2011 Delmar Cengage Learning

Tools You’ll Use

Using Styles and Style Sheets for Design

© 2011 Delmar Cengage Learning

Create and Use Embedded Styles

• An embedded style is a style whose code is embedded in the code of an individual page.

• The inline style is part of the individual page code, but is written in the body section, rather than the head section.

© 2011 Delmar Cengage Learning

Create and Use Embedded Styles

To create an embedded style, you can use the New CSS Rule button in the CSS Styles panel to open the New CSS Rule dialog box.

© 2011 Delmar Cengage Learning

Create and Use Embedded Styles

• You can use the New CSS Rule dialog box to create a class style which contains formatting attributes for a web page.

• After you name the class style, you will define eight different category settings.

© 2011 Delmar Cengage Learning

Create and Use Embedded Styles

CSS Rule Definition for.contact_info style

© 2011 Delmar Cengage Learning

Modify Embedded Styles

• Any changes you make to a style are automatically reflected on the page.

• You can change the definition of an HTML tag by clicking the Tag selector type and redefining the formatting settings.

© 2011 Delmar Cengage Learning

Modify Embedded Styles

• The CSS Styles panel has two modes:– The All mode

1. In the All mode, the style sheet rules appear in the top half of the panel

2. When you click on of the rules, the Properties pane list that rule’s properties

© 2011 Delmar Cengage Learning

Modify Embedded Styles

CSS Styles panel in All Mode

Contact_inforule selected

Switch to All (Document) Mode button

All Rules pane

Properties pane showing properties for contact_info rule

© 2011 Delmar Cengage Learning

Modify Embedded Styles

– The Current mode

1. The top half of the panel is called the Summary for Selection pane

2. When an object with a style is selected, the Summary for Selection pane displays that style’s properties

© 2011 Delmar Cengage Learning

Modify Embedded Styles

CSS Styles panel in Current Mode

Switch to CurrentSelection Modebutton

Rules pane

Summary for Selection pane

Properties paneshowing propertiesFor contact_info rule

© 2011 Delmar Cengage Learning

Modify Embedded Styles

• The bottom half of the CSS Styles panel is called the Properties pane in either mode.

• The Rules pane displays the location of the current selected rule in the open document.

© 2011 Delmar Cengage Learning

Work with External Style Sheets

• To ensure consistent formatting across all elements of a website, you should use external style sheets.

• External style sheets can be attached to a page that you have already created.

© 2011 Delmar Cengage Learning

Work with External Style Sheets

Attach External Style Sheet dialog box

© 2011 Delmar Cengage Learning

Work with External Style Sheets

• You can use an external style sheet to create rules for all links in a website.

• You can also create rules for other types of tags using the Compound selector type.

© 2011 Delmar Cengage Learning

Work with External Style Sheets

New CSS Rule dialog box with Compound selector type displayed

© 2011 Delmar Cengage Learning

Work with External Style Sheets

• You can make changes to a style sheet by editing the code in the style sheet file rather than through the CSS Styles panel.

su_styles.css file after changing the color for the list_heading rule

© 2011 Delmar Cengage Learning

Work with Conflicting Styles

• Cascading refers to the way style sheets are ranked in order of precedence as they are applied to page elements.

• Style sheets originate from three sources: the author, the user, and the user agent.

© 2011 Delmar Cengage Learning

Work with Conflicting Styles

• The order of precedence for style sheets.– Find declarations that specify and

match the media type being used– Order of importance– Specificity of the selector– Order specified in the code

© 2011 Delmar Cengage Learning

Work with Conflicting Styles

• Pseudo class styles refer to styles that determine the appearance of a page element when a certain condition resulting from information external to the HTML source is met.

• The Browser Compatibility Check feature flags issues on a page.

© 2011 Delmar Cengage Learning

Using the Browser Compatibility Check

Click to add additional browsers for compatibility checking

Work with Conflicting Styles

© 2011 Delmar Cengage Learning

Work with Conflicting Styles

• The Inspect mode helps you to identify HTML elements and their associated styles.

• The Disable/Enable CSS feature allows you to disable a rule property and compare the effects of the affected page element without that property.