Chapter 7
Using Styles and Style Sheets for
Design
© 2010 Delmar, Cengage Learning
Chapter 7 Lessons
1.
2.
3.
4.
5.
Create and use embedded styles
Modify embedded styles
Work with external CSS style sheets
Work with conflicting styles
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 Data Files
In Step 3, copy this
folder to where you
store your site files
Where you store
your completed files
In Step 2, delete your
previous striped_umbrella
folder
© 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 select the
Class Selector Type
New rule name
Click to specify an
embedded style
© 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
Paragraph_text rule
selected
All Rules
pane
Properties pane
showing properties
for paragraph_text
Delete CSS Rule
button
Edit Rule button
Attached style
sheet button
New CSS Rule
© 2009 Delmar Cengage Learning 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
© 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
Background
category
Change the page
background color to
#FFC
© 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
© 2009 Delmar Cengage Learning
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
© 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
Attaching an External CSS Style
Sheet to a Page or Template
• 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
© 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
Double-click
from the list
to complete
your tag
As you begin
typing code, the
shortcut menu is
displayed when
it recognizes
code
© 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
© 2009 Delmar Cengage Learning