Unit 4: Formatting With Cascading Style Sheets

1
Unit 4 Formatting With Cascading Style Sheets

• Dreamweaver CS4
• Adobe Authorized Training
• December 2008

2
Topics

• Formatting Text
• Introducing Cascading Style Sheets
• Creating Styles
• Creating Tag Selectors
• Creating Advanced Styles
• Exporting CSS Style Definitions
• Attaching External Style Sheets
• Creating a New Style Sheet
• Editing Style Sheets
• Cascading Order and Inheritance of Styles

3
Web Considerations

• Consider the following
• Users can change the browser window size or the
  font size and color of the text.
• Macintosh computers display text 75 percent
  smaller than the size of the same text on
  Windows.
• Published content, whether printed or on a web
  page, should display a consistent style on each
  page.
• Achieve substantially more control over the
  formatting of your web pages using Cascading
  Style Sheets

4
Block vs. Character Formatting

• Apply changes to the default display of text
• an entire block of content
• to individual characters and words
• Some formatting options must work on an entire
  block
• Character formatting can apply a different font
  treatment to individual letters or words

5
Introducing Cascading Style Sheets

• Cascading Style Sheets (CSS) defines the way the
  content is displayed
• CSS provides more flexibility and control than
  HTML
• Control color, size, typography of text
• Position objects and images
• Advantage is instant reformatting of all the text
  controlled by that style when style changes

6
CSS Terms

• Style rule group of formatting properties
  identified by a single name controlling the
  formatting of text
• Style sheet group of styles rules that define
  the way your web pages look
• CSS formatting rule consists of two parts the
  selector and the declaration
• The selector is a term (such as P, H1, a class
  name, or an id) that identifies the formatted
  element, and the declaration defines the style
  elements

7
CSS Style Definition Locations

• Separate style sheet, an external style sheet,
  attached to your pages
• An internal style sheet
• Applying a style directly to a piece of text an
  inline style (not used in class)

8
CSS Benefits

• Consistent look in site
• Text formatting not available in HTML
• Display and content structure separate
• Update look of site with different style sheet
• Easy to maintain the site style by using external
  styles
• Creates smaller pages
• Meets standards for XHTML

9
Limitations

• Style sheets work in most browsers
• Support for CSS positioning varies in different
  browser versions.
• Content should be readable even if style sheet is
  not attached.
• Test your pages across all targeted browsers to
  insure a consistent look and feel

10
Creating Styles

• Choose Text gt CSS Styles gt New
• Click New CSS Style on CSS Styles panel
• Choose New from the CSS Styles panel options menu

11
CSS Rule Types

• Class to define a style to apply to selected
  text
• Tag to define format of HTML tag
• ID applies to a specific object on the page
• Compound to define formatting of combination of
  tags or for contextual selectors such as links

12
Embedded Style Sheet

• You have the option to save the rule as an
  embedded rule within your page, or save it to an
  external file
• If you want your pages to reflect all the same
  styles, you would create an external style sheet
• If a page should look different from other pages
  in your site, define the rules for that page as
  embedded styles

13
HTML Tag Rules

• Choose Tag from Selector type
• Choose or type tag name
• Define formatting for the tag

14
CSS Rule Definition

• Set various formatting options

15
Editing Style Rules

• Double-click style in CSS Styles panel to open
  CSS Rule Definition dialog box
• Click style rule and then edit style in
  Properties pane
• Click style rule and then click Edit Style

16
Using Points, Pixels, or Ems for Font sizes

• Relative font sizes (to screen resolution)
• xx-small xx-large
• Percentages
• Ems and exs
• Pixels - use for absolute control
• Absolute sizes
• Points - for printing only
• Inches, centimeters, millimeters
• Points are units for printing and should be used
  only in style sheets for print
• Pixels are units based on the resolution of the
  screen (users may not be able to adjust the font
  size)
• If accessibility is an important goal in building
  your web pages, then you should use ems
• Ems are sized so that the font size is relative
  to the parent element
• Ensures that your pages will be accessible to
  most browsers and platforms
• The problem with ems is that you lose control
  over the exact look of your page

17
Walkthrough 4-1

• Formatting Text with CSS

18
Exporting CSS Rule Definitions

• Right-click (Windows) or Control-click
  (Macintosh) on the style in the CSS Styles panel
  and choose Move CSS Rules
• Drag and drop a style in the CSS Styles panel
  from the ltstylegt block into a linked CSS file

19
Creating Class Styles

• Create new style rule
• Select class as the Selector type
• Type the class name
• Select the class rule to be embedded or in
  external style sheet

20
Naming Class Styles

• Name your classes according to their purpose
  rather than their appearance.
• Appearance can change over time.
• Class styles begin with a period. Dreamweaver
  adds one if you dont

21
Naming Class Styles

• Rename the class style
• Select rule on CSS Styles Panel
• Right-click (Windows) or Control-click
  (Macintosh)
• Choose Rename from the context menu

22
Applying Class Styles

• Select the text
• Apply the created style from the Property
  inspector

23
Removing Class Styles

• If you change styles in the Property inspector,
  you have class styles embedded
• To change to tag selectors
• Duplicate the style rule as a tag style
• Remove the class attribute of the desired tag
  using Find and Replace

24
Attaching External Style Sheets

• External style sheets have .css extension
• Changing a style rule in style sheet updates all
  pages with that style
• Click Attach Style Sheet from CSS Styles panel to
  add to page
• See www.csszengarden.com

25
Style Sheet Media Type

• Specifies how document presented on different
  devices
• All suitable for all devices
• Aural speech
• Braille Braille tactile feedback devices
• Handheld PDA, small screen, limited bandwidth
• Print printed material
• Projection projector devices
• Screen computer screens
• TTY teletype, terminals
• TV television type devices

26
Link vs. Import

• To create a link between the current document and
  an external style sheet, select Link in the
  Attach External Style Sheet dialog box
• Creates a link tag in the HTML code
• References the URL where the published style
  sheet is located
• You cannot use a link tag to add a reference from
  one external style sheet to another
• If you want to nest style sheets, you must use
  import
• Some but not all browsers also recognize the
  import directive within a page (rather than just
  within style sheets)

27
Walkthrough 4-2

• Export and add a class rule

28
Creating Advanced Styles

• Advanced styles
• part of a block of text, such as the first letter
  of a paragraph
• text in a certain state, such as a link that has
  been visited
• text controlled by a combination of tags

29
Selectors

• Select Advanced as the Selector Type
• Pseudo-element
• Combination
• Contextual
• Group
• Pseudo-class
• ID

30
Using Pseudo-Element Selectors

• Controls the formatting of the first line of text
  for the specified tag
• tagnamefirst-line
• pfirst-line
• Controls the formatting of the first letter of
  text for the specified tag
• tagnamefirst-letter
• pfirst-letter

31
Combination Selectors

• Contextual
• applied to a tag only when it appears in the
  context of (nested within) another specific tag
• Applied only to text within a ltstronggt tag inside
  a ltpgt tag that is inside a lttdgt tag
• td p strong
• Group
• A single style rule that will apply to a group of
  tags
• Applied to the paragraph tag, the table data cell
  tag (lttdgt) and the list item tag (ltligt)
• p,td,li

32
Walkthrough 4-3

• Creating an advanced style

33
Creating a New External Style Sheet
34
Displaying Styles

• Dreamweaver can show style type for previewing
• Choose View gt Style Rendering and choose style
• Display Styles must be selected
• Use Style Rendering toolbar

35
Walkthrough 4-4

• Creating external style sheet

36
Cascading Order and Inheritance

• CSS rules can be applied from
• External style sheet
• Embedded style rules
• Inline style rules
• The order of precedence is
• Inline style (rarely used)
• Internal style
• External style

37
Cascading Order Example

• External style sheet linked to a page, paragraph
  rule
• p font-family sans-serif
• color blue
• Embedded style sheet with paragraphs rule
• p font-size 14pt
• color green
• A paragraph in the page would have following
  style
• Sans-serif font (specified in the external style
  sheet)
• 14 point font-size (specified in the embedded
  style sheet)
• Color green (the embedded style takes precedence
  over the external style sheet)

38
Inheritance Example

• Style defined
• p color green
• font-weight normal
• font-family Arial
• em font-weight bold
• color blue
• .codeRed color red
• font-style italic

• HTML code
• ltpgtIn case of emergency, ltem classcodeRedgtwal
  klt/emgt to the nearest exit.lt/pgt

39
Inheritance Example

• Order of precedence with regard to inheritance
  is
• Class properties take precedence over tag style
  properties for the tag
• Nested tag properties take precedence over those
  of the parent tag
• Some properties are never inherited
• Consult the CSS Reference included in Dreamweaver

40
Using the Code Navigator

• Enables you to select a piece of text and view
  the hierarchy of styles that are applied to your
  selection
• Altclicking on a listed style opens the style
  sheet, positioning your cursor at the location in
  the CSS code containing the style definition
• Using this feature can help you understand the
  inheritance of styles affecting your content

41
Creating Internal Styles with the Property
Inspector

• Change Font Face
• Font Size
• Color
• Bold
• Italic
• Alignment

42
Walkthrough 4-5

• Cascading Styles

43
Unit Summary

• Dreamweaver creates embedded class styles when
  you change formatting in the Property inspector.
• Styles are display rules that can be applied to
  HTML tags or selected text.
• Style sheets are groupings of rules that can be
  stored in a .css file.

44
Unit Summary

• You can create your own tag, class or advanced
  styles in the CSS Styles panel.
• Style sheet files can be linked to one or many
  files, thus applying consistent style formatting
  to all HTML tags in those pages.
• Linked style sheets are the most useful, since
  they consolidate maintenance of the display into
  one file.
• Styles are inherited