© 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

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning 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 (.)

© 2009 Delmar Cengage Learning Fig. 1: New CSS Rule Dialog Box

© 2009 Delmar Cengage Learning Fig. 2: CSS Rule Definition for.heading in su_styles.css Choose a category to see property options for that category

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning Fig. 9: CSS Rule Definition for contact_info with Type Category

© 2009 Delmar Cengage Learning Fig. 10: Applying the contact_info Style Using the Property Inspector Selected text Class list arrow Italic button

© 2009 Delmar Cengage Learning 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)

© 2009 Delmar Cengage Learning Fig. 12: CSS Styles in All Mode Switch 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

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning Fig. 17: Redefining the hr HTML Tag Color is changed from the default color to blue

© 2009 Delmar Cengage Learning Fig. 18: Redefining the Body HTML Tag Change the page background color to #FFC Background category

© 2009 Delmar Cengage Learning Fig. 19: Viewing Code for Embedded Styles Code redefining the hr and body HTML tags is part of head section

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning Fig. 21: Changing the Color Property of the hr HTML Tag Select hr Click the Color picker to change the color Color = #039

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning Fig. 23: Attach External Style Sheet Dialog Box

© 2009 Delmar Cengage Learning Adding Hyperlink Rules to a CSS 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

© 2009 Delmar Cengage Learning Fig. 24: New CSS Rule Dialog Box with Compound Selector Type Displayed

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning Fig. 28: Changing the Font Size of the Bullets Style Font-size changed to small

© 2009 Delmar Cengage Learning Fig. 30: Selected a:link code in su_styles.css File Selected a:link code

© 2009 Delmar Cengage Learning 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)

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning 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

© 2009 Delmar Cengage Learning 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)

© 2009 Delmar Cengage Learning Fig. 37: Moving the Embedded hr Style to the Style Sheet File Selected code for the horizontal rule style Move CSS Rules option

© 2009 Delmar Cengage Learning Fig. 38: Moving the Embedded hr Style to the Style Sheet File The embedded hr rule will move to the su_styles file

© 2009 Delmar Cengage Learning Fig. 39: Moving the Embedded hr Style to the Style Sheet File hr style is now part of the su_styles.css file