2. Using Cascading Style Sheets (CSS)
DREAMWEAVER MX 2004
Chapter 6
Using Cascading Style Sheets (CSS)
Copyright 2005, Paradigm Publishing Inc.

3. Performance Objectives
Understand Cascading Style Sheets (CSS).
Create inline, internal, and external style sheets.
Attach external style sheets to documents.
Create grouped (multiple) selectors.
Create contextual selectors.
Create Class (Custom) styles.
Create Pseudo selectors.
Use predefined style sheets.
Export styles.
Edit and remove styles and style sheets.
Copyright 2005, Paradigm Publishing Inc.

4. Setting the CSS Formatting Default
The default Dreamweaver MX 2204 setup uses CSS styles inserted in the head section of a document.
The styles implement formatting changes applied using the Property inspector or Menu bar commands.
Copyright 2005, Paradigm Publishing Inc.

5. Setting the CSS Formatting Default…/2
The CSS Styles have been placed in the head section and body.
Class style controlling text color and font size
redefined HTML tag controlling background color
Copyright 2005, Paradigm Publishing Inc.

6. Verifying that Automatic CSS Formatting Is Enabled
click Edit 
click Preferences
Copyright 2005, Paradigm Publishing Inc.

7. Verifying that Automatic CSS Formatting Is Enabled…/2
This opens the Preferences dialog box. 
click General 
make sure there is a check mark
Copyright 2005, Paradigm Publishing Inc.

8. Understanding CSS
In HTML, structural tags are used to indicate the structure of Web page content.
Structural tags cannot tell browsers exactly how the content should be displayed.
Presentational tags were developed to exert more control over the way browsers display content.
Presentational markup creates crowded and confusing code that can slow down page loading.
Copyright 2005, Paradigm Publishing Inc.

9. Understanding CSS…/2
Another drawback is that adding presentational markup is a time-consuming task.
CSS offers a much more efficient method.
CSS contains instructions known as CSS styles or CSS rules.
These styles can be used inline, as an internal style sheet, or as an external style sheet that can be attached to any number of HTML documents.
Copyright 2005, Paradigm Publishing Inc.

10. CSS Styles
Internal and external style sheets usually consist of a number of different CSS styles.
Each style instructs a browser how to display different elements of page content.
A style sheet is a collection of one or more styles.
Copyright 2005, Paradigm Publishing Inc.

11. CSS Styles…/2 CSS styles are composed of a selector and a declaration.
A selector frequently redefines an existing HTML tag.
Selectors are followed by declarations that declare and define the properties of the tag.
Declarations are composed of a property and a value.
p { color: #330000;}
selector
property
value
Copyright 2005, Paradigm Publishing Inc.

12. CSS Styles…/3 Selectors can contain more than one declaration.
Selectors can redefine more than one tag by separating the tags with commas.
This is known as a grouped or multiple selector.
Selectors can also be created that can be applied to any tag.
Such a selector is called a Class style or Custom style.
The Class style is given a name beginning with a period.
Copyright 2005, Paradigm Publishing Inc.

13. CSS Styles…/4
Contextual selectors work only when certain conditions are met.
Pseudo classes are selectors that are active when an event takes place.
Pseudo classes are used primarily to change hyperlink properties.
Copyright 2005, Paradigm Publishing Inc.

14. Cascading and Hierarchy
Style sheets are referred to as cascading because of the hierarchical order in which they are interpreted.
Styles closer to the structural code generally take precedence over styles located farther away.
Inline styles take precedence over internal styles, which take precedence over styles contained in external style sheets.
Tag-level formatting will override a style.
Copyright 2005, Paradigm Publishing Inc.

15. Cascading and Hierarchy…/2
The concept of inheritance is related to cascading.
Inheritance means that a closer style can inherit rules from styles located higher up the style chain.
More than one external style sheet can be attached to a document or series of documents.
In case of a rule conflict, rules in the most recently attached external style sheet take precedence.
Copyright 2005, Paradigm Publishing Inc.

16. Creating a New External Style Sheet
click File 
click New 
click Basic page 
click CSS
Copyright 2005, Paradigm Publishing Inc.

17. Creating a New External Style Sheet…/2
You should save and name the CSS document before applying styles to it.
Because external style sheets are not HTML documents, they have their own file extension (.css).
Choose names that describe what the style sheet does. 
click File 
click an option
Copyright 2005, Paradigm Publishing Inc.

18. Creating a New External Style Sheet…/3
Another method to create external style sheets and CSS styles is to use panels and dialog boxes.
To create an external style sheet, open the CSS Styles panel located inside the Design panel group. 
click Window 
click CSS Styles
Copyright 2005, Paradigm Publishing Inc.

19. Creating a New External Style Sheet…/4
click the New CSS Style button 
click the appropriate options
Copyright 2005, Paradigm Publishing Inc.

20. Redefining HTML Tags
Selecting Tag (redefines the look of a specific tag) allows you to create selectors for tags.
click the down-pointing arrow, and then click a tag
Copyright 2005, Paradigm Publishing Inc.

21. Redefining HTML Tags…/2
The CSS Style Definition dialog box opens, which can be used to redefine the tag.
Copyright 2005, Paradigm Publishing Inc.

22. Redefining HTML Tags…/3
The name of the dialog box reflects the tag that was selected when using the New CSS Style dialog box.
When the Page Properties dialog box is used to format page properties, Dreamweaver MX 2004 redefines tags to include the specified formatting properties.
redefined body tag in an HTML document
Copyright 2005, Paradigm Publishing Inc.

23. Using the CSS Style Definition Dialog Box
Selecting a category changes the properties that can be defined.
Type
Specifies font and text properties.
Background
Specifies a color or image as an element background.
Block
Specifies text formatting.
Box
Specifies element placement.
Border
Specifies element border properties.
List
Specifies the number and bullet formats and positions.
Positioning
Specifies layer positioning.
Extensions
Controls page breaks, insertion point appearance, and extension style attributes.
Copyright 2005, Paradigm Publishing Inc.

24. Using the CSS Style Definition Dialog Box…/2
Creating a style can involve specifying only one or two different properties from a category.
A style can be defined using properties from only one of the category windows if desired.
Not all of the CSS properties that can be defined will take effect in the Document window.
Another tag can be defined as a selector and added to a style sheet.
After the process is complete, save the document before closing it.
Copyright 2005, Paradigm Publishing Inc.

25. Attaching an External Style Sheet to a Document
click the CSS Styles panel Attach Style Sheet button 
click the Browse button to browse and locate the desired style sheet
Copyright 2005, Paradigm Publishing Inc.

26. commas separate the tags
Grouping Selectors
You might want different selectors to share the same properties and values.
Selectors can be grouped to create a single selector.
This is done by separating the tags that compose the selector with commas.
h1,h2,h3 {font-family: "Times New Roman", Times, serif;color: #0000CC;text-decoration: underline;}
commas separate the tags
Copyright 2005, Paradigm Publishing Inc.

27. Grouping Selectors…/2
You can create grouped or multiple selectors by clicking the New CSS Style button to open the New CSS Style dialog box.
tags separated by commas to create a grouped selector
radio button selected
Copyright 2005, Paradigm Publishing Inc.

28. Creating Contextual Selectors
Contextual selectors instruct browsers to apply a style only when certain conditions are met.
Contextual selectors can be created by following the same steps that were used to crate a grouped selector.
Each tag should be separated by a space rather than a comma when entering tags in the Selector text box.
Copyright 2005, Paradigm Publishing Inc.

29. Creating Class Styles
When a selector is used to redefine an HTML tag and create a style, the style is applied to every instance of the tag.
Class styles allow you to create a style with its own name rather than a tag name.
The Class style contains properties and values that can be applied to any tag.
When you use the Property inspector or Menu bar commands to format text, Dreamweaver MX 2004 implements the formatting using Class styles, but you can also create and use your own Class styles.
Copyright 2005, Paradigm Publishing Inc.

30. Creating Class Styles…/2
Class style names begin with a period.
Class style names should contain no spaces, punctuation, or special characters.
After a Class style has been created in a style sheet, it appears in the CSS Styles panel.
Class style
Copyright 2005, Paradigm Publishing Inc.

31. Creating Class Styles…/3
A Class style can be applied to selected text by clicking the Class style name in the CSS Styles panel, right-clicking, and then clicking Apply.
Another way is to use the context-sensitive menu. 
right-click the desired text, and then point to CSS Styles 
click a Class style name from the submenu
Copyright 2005, Paradigm Publishing Inc.

32. Modifying Hyperlinks with Pseudo Classes
As hyperlinks are now a familiar concept, many people think that underlining hyperlinks detracts from the appearance of the page.
Prior to CSS, nothing could be done to change this.
Underlining can be removed from links by using a type of CSS style known as a Pseudo class.
Pseudo classes are styles that are active when an event takes place.
Copyright 2005, Paradigm Publishing Inc.

33. Modifying Hyperlinks with Pseudo Classes…/2
Pseudo classes for links are created using the New CSS Style dialog box.
the Selector list box displays four link states
Copyright 2005, Paradigm Publishing Inc.

34. Modifying Hyperlinks with Pseudo Classes…/3
Clicking a state and then clicking the OK button opens the CSS Style Definition dialog box.
The Decoration category can be used to define the appearance of the selected link state.
if the a:link state is selected, the Decoration category can be used to remove underlining by clicking none
Copyright 2005, Paradigm Publishing Inc.

35. Using Predefined Style Sheets
Predefined CSS style sheets can be used as is or modified to suit your preferences. 
click File 
click New
Copyright 2005, Paradigm Publishing Inc.

36. Using Predefined Style Sheets…/2
The New Document dialog box opens. 
click CSS Style Sheets 
select a CSS Style Sheets
Copyright 2005, Paradigm Publishing Inc.

37. Creating an Internal or Embedded Style Sheet
Internal or embedded style sheets are contained in the head section located at the top of an HTML document.
They can be used to control the formatting of the entire document.
internal style sheet
Copyright 2005, Paradigm Publishing Inc.

38. Creating an Internal or Embedded Style Sheet…/2
Clicking the New CSS Style button in the CSS Styles panel begins the internal style sheet creation process.
The New CSS Style dialog box opens.
The process is the same as the process used to create an external style sheet.
click the This document only radio button
Copyright 2005, Paradigm Publishing Inc.

39. Exporting Styles
There are several methods to export an internal style sheet.
It can then be converted into an external style sheet that can be attached to other HTML documents. 
right-click the style sheet name 
click Export
Copyright 2005, Paradigm Publishing Inc.

40. Exporting Styles…/2 The Export Styles As CSS File dialog box opens.
Name the new file and locate the folder.
Copyright 2005, Paradigm Publishing Inc.

41. Editing CSS Styles   CSS styles can be edited manually in Code view.
It is easier for most users to edit them using the Relevant CSS or CSS Properties panels. 
click Window 
click Tag Inspector
Copyright 2005, Paradigm Publishing Inc.

42. Editing CSS Styles…/2
The top half of the panel displays the selected tag and any style rule applied to it.
The lower half of the panel displays all of the properties that can be associated with the selected tag.
Properties are listed alphabetically with defined properties appearing at the top of the list in blue.
Clicking the Show category view button displays the properties sorted under eight different categories.
Copyright 2005, Paradigm Publishing Inc.

43. Editing CSS Styles…/3 selected style rule Show list view button
Show category view button
style location
property category
defined property
Copyright 2005, Paradigm Publishing Inc.

44. Editing CSS Styles…/4
If a property is inapplicable to the selected page element, it will appear with a red strikethrough line.
Holding the mouse pointer over the inapplicable property will display a tooltip.
red strikethrough
tooltip explanation
Copyright 2005, Paradigm Publishing Inc.

45. Editing CSS Styles…/5
Depending on the property, clicking in the blank space next to a property causes a text box, text box and down-pointing arrow, or color box to appear.
color box
menu
Copyright 2005, Paradigm Publishing Inc.

46. Editing CSS Styles…/6
A difference between the Relevant CSS panel and the CSS Properties panel is that the CSS Properties panel opens in Category view instead of List view.
Also the CSS Properties panel does not contain an upper panel view.
Styles can also be edited by clicking the Edit Style button.
Edit Style button
Copyright 2005, Paradigm Publishing Inc.

47. Editing CSS Styles Using the Menu Bar
With a document open, a CSS style can be edited using the Menu bar. 
click Text 
point to CSS Styles 
click Manage Styles
Copyright 2005, Paradigm Publishing Inc.

48. Editing CSS Styles Using the Menu Bar…/2
The Edit Style Sheet dialog box opens.
Clicking a style sheet name and then clicking the Edit button displays all of the style rules contained in the style sheet.
Copyright 2005, Paradigm Publishing Inc.

49. Editing CSS Styles Using the Menu Bar…/3
When an internal or inline style is selected and the Edit button is clicked, the CSS Style Definition dialog box will appear and can be used to edit the style.
If a style is contained in an external style sheet, its name must be clicked first so that all the style rules that it contains appear in the dialog box.
Style rules then can be selected and the Edit button clicked to open the CSS Style Definition dialog box.
Copyright 2005, Paradigm Publishing Inc.

50. Changing the Tags Redefined by a Selector
To change the tags redefined by a selector, you must work in Code view.
After you locate the selector in Code view, you can replace selectors with other selectors by typing a new tag over the old one.
Tags also can be added to a selector to create a grouped (multiple) selector, or to add to an existing grouped selector.
Copyright 2005, Paradigm Publishing Inc.

51. Removing Styles and Style Sheets
Style sheets can be removed.
Individual styles from an internal or external style sheet can be deleted.
Every instance of a Class style application can be removed. 
click the style sheet listing 
click the Trash Can button
Copyright 2005, Paradigm Publishing Inc.

52. Removing Styles and Style Sheets…/2
If the style sheet being deleted is an inline or internal style, it is removed from the document and is permanently deleted.
Removing an external style sheet detaches it from the document, but it is not deleted.
The CSS Property inspector can be used to remove styles.
The CSS Property inspector also can be used to remove individual instances of a Class style application.
Copyright 2005, Paradigm Publishing Inc.

53. COMMANDS REVIEW     How do you attach a style sheet? click Text
point to CSS Styles 
click Manage Styles 
click Attach
Copyright 2005, Paradigm Publishing Inc.

54. COMMANDS REVIEW…/2     How do you create a new style sheet?
click Text 
point to CSS Styles 
click Manage Styles 
click New
Copyright 2005, Paradigm Publishing Inc.

55. COMMANDS REVIEW…/3     How do you edit a style sheet? click Text
point to CSS Styles 
select style 
click Edit
Copyright 2005, Paradigm Publishing Inc.

56. COMMANDS REVIEW…/4    How do you export a style sheet? click File
point to Export 
click CSS Styles
Copyright 2005, Paradigm Publishing Inc.

57. COMMANDS REVIEW…/5   How do you open the CSS Styles panel?
click Window 
click CSS Styles
Copyright 2005, Paradigm Publishing Inc.

58. COMMANDS REVIEW…/6    How do you open the Relevant CSS panel?
click Window 
click Tag Inspector 
select page element
Copyright 2005, Paradigm Publishing Inc.

59. COMMANDS REVIEW…/7    How do you open the CSS Properties panel?
click Window 
click Tag Inspector 
select CSS style in CSS Styles panel
Copyright 2005, Paradigm Publishing Inc.

60. COMMANDS SUMMARY Attach a style sheet
Text, CSS Styles, Manage Styles, Attach
Create a new style sheet
Text, CSS Styles, Manage Styles, New
Edit a style sheet
Text, CSS Styles, select style, Edit
Export a style sheet
File, Export, CSS Styles
Open the CSS Styles panel
Window, CSS Styles
Open the Relevant CSS panel
Window, Tag Inspector, select page element
Open the CSS Properties panel
Window, Tag Inspector, select CSS style in CSS Styles panel
Copyright 2005, Paradigm Publishing Inc.