Post on 25-Dec-2015
© 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 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
© 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 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
© 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