© 2010 Delmar, Cengage Learning Chapter 7 Using Styles and Style Sheets for Design

© 2010 Delmar, Cengage Learning

Chapter 7

Using Styles and Style Sheets for Design

© 2009 Delmar Cengage Learning

Chapter 7 Lessons

1. Create and use embedded styles

2. Modify embedded styles

3. Work with external CSS style sheets

4. Work with conflicting styles

5. Use coding tools to view and edit styles


Using Cascading Style Sheets

• Most powerful method to ensure that all elements in a website are formatted consistently

• Two types of style sheets:– External– Embedded


Using Styles and Style Sheets

• External CSS style sheets– Formatting rules are kept in a separate or

external style sheet file• Embedded CSS styles

– Styles whose code is located in the head section of the HTML code of a Web page

– An embedded style overrides an external style


Understanding Embedded Styles• An inline style is part of the individual page

code, but is written in the body section, rather than the head section

• Refers to a specific instance of a tag, rather than a global tag style on a page


Creating and Applying a Custom Style• A Custom style (or class style) contains a

combination of formatting attributes that can be applied to a block of text or other page elements

• To create a new custom style, use the New CSS Rule dialog box

• Name begins with a period (.)


Fig. 1: New CSS Rule Dialog Box


Fig. 2: CSS Rule Definition for .heading in su_styles.css

Choose a category to see property options for that category


Fig. 3: Drag the Striped Umbrella Folder to Create a Folder with Revised Files

Where you store your completed files

In Step 2, delete your previous striped_umbrella folder

Where you store your Data Files

In Step 3, copy this folder to where you store your site files


Fig. 5: Site Definition for Striped Umbrella

Your paths will be different depending on the location you chose for the striped_umbrella folder and will probably be the same locations you chose for the original files


Fig. 8: New CSS Rule Dialog Box with Settings for contact_info Style

Click to specify an embedded style

New rule name

Click to select the Class Selector Type


Fig. 9: CSS Rule Definition for contact_info with Type Category


Fig. 10: Applying the contact_info Style Using the Property Inspector

Selected text

Class list arrow

Italic button


Redefining HTML Tags

• To change the definition of an HTML tag, click the Tag option button in the New CSS Rule dialog box– CSS Rule Definition dialog box opens

• To edit HTML tags, select the HTML tag in the CSS Styles panel and click the Edit Styles button– CSS Rule Definition dialog box opens

• Two modes in CSS Styles panel– All (document)– Current (selection)


Fig. 12: CSS Styles in All ModeSwitch to All (Document) Mode button

All Rules pane

Properties pane showing properties for paragraph_text

Paragraph_text rule selected

Delete CSS Rule button

Edit Rule button

New CSS Rule button

Attached style sheet button


Fig. 13: CSS Styles in Current Mode

Switch to Current Selection Mode

button

Summary for Selection pane

Rules pane

Properties pane showing properties

for body rule


Fig. 17: Redefining the hr HTML Tag

Color is changed from the default color to blue


Fig. 18: Redefining the Body HTML Tag

Change the page background color to

#FFC

Background category


Fig. 19: Viewing Code for Embedded Styles

Code redefining the hr and body HTML tags is part of head section


Fig. 20: Viewing the Code Linking External Style Sheet File

The code linking the file resides in the head section of the code

Code linking the su_styles.css file to the about_us page


Fig. 21: Changing the Color Property of the hr HTML Tag

Select hr Click the Color picker to change the color

Color = #039


Work with External CSS Style Sheets• Use external CSS style sheets• Attach an external CSS style sheet to a

page or template• Add hyperlink styles to a CSS style sheet• Add custom code to a CSS style sheet


Using External CSS Style Sheets• Use external CSS style sheets to ensure

consistent formatting across all elements of a website

• Allows you to make changes to the appearance of a website without opening each page


• Attach external CSS style sheets to pages that you have already created– all of the rules specified in the style sheet

are applied to the HTML tags on the page• Use the Attach External Style Sheet dialog

box– Can also be used to import files

• Attaching external style sheets to templates saves time and development effort

Attaching an External CSS Style Sheet to a Page or Template


Fig. 23: Attach External Style Sheet Dialog Box


Adding Hyperlink Rules to aCSS Style Sheet• Use an external style sheet to create styles

for all links in a website• Use the New CSS Rule and the CSS Rule

Definition dialog box to specify the formatting of the selected link


Fig. 24: New CSS Rule Dialog Box with Compound Selector Type Displayed


Adding Custom Code to a CSS Style Sheet• Make changes to a style sheet by changing

its code or adding code directly into the style sheet file


Fig. 28: Changing the Font Size of the Bullets Style

Font-size changed to small


Fig. 30: Selected a:link code in su_styles.css File

Selected a:link code


Work with Conflicting Styles

• Embedded styles, external styles, and styles redefining HTML tags may conflict with each other

• Embedded styles override external styles and also override styles redefining HTML tags

• If you use the Property inspector to format text that has a style applied to it, Dreamweaver creates an additional style based on the first style (uses default naming convention)


Fig. 31: Text with Rule Applied from Redefined Body Tag

The targeted rule reverts back to the container rule

With no style applied, the font family is applied from the redefined body tag


Coding Tools in Dreamweaver• Coding toolbar is displayed on the left side of

the Document window– Designed to remain stationary– Cannot move it, but you can hide it

• Remember that you have several View options you can also use while viewing your code. – Word Wrap, Line Numbers, Hidden

Characters, Highlight Invalid Code, Syntax Coloring, and Auto Indent


Using Coding Tools to Navigate Code• As your pages get longer and the code more

complex, it is helpful to collapse sections of code, similarly to the way you can collapse and expand panels, folders, and styles

• You can also use the Collapse Full Tag or Collapse Selection buttons on the Coding toolbar. This will allow you to look at two different sections of code that are not adjacent to each other in the code


Using Code Hints to Streamline Coding• As you are typing code, Dreamweaver will

recognize the tag name and offer you choices to complete the tag simply by clicking a tag choice in the menu


Fig. 33: Using Code Hints

As you begin typing code, the shortcut menu is displayed when it recognizes code

Double-click from the list to complete your tag


Fig. 34: Selecting Lines of Code for the About Us Page to Collapse

Clicking the minus sign will collapse the selected code

Select the code between lines 7 and 69 (your line numbers may vary slightly)


Fig. 37: Moving the Embedded hr Style to the Style Sheet File

Selected code for the horizontal rule style

Move CSS Rules option



The embedded hr rule will move to the su_styles file



hr style is now part of the su_styles.css file

Documents

© 2010 Delmar, Cengage Learning Chapter 7 Using Styles and Style Sheets for Design