Unit 4: Formatting With Cascading Style Sheets - PowerPoint PPT Presentation

1 / 44
About This Presentation
Title:

Unit 4: Formatting With Cascading Style Sheets

Description:

If you change styles in the Property inspector, you have class styles embedded ... Braille Braille tactile feedback devices. Handheld PDA, small screen, ... – PowerPoint PPT presentation

Number of Views:86
Avg rating:3.0/5.0
Slides: 45
Provided by: sho93
Category:

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com