Chapter 1 Introducing Cascading Style Sheets - PowerPoint PPT Presentation

View by Category
About This Presentation
Title:

Chapter 1 Introducing Cascading Style Sheets

Description:

Chapter 1 Introducing Cascading Style Sheets – PowerPoint PPT presentation

Number of Views:111
Avg rating:3.0/5.0
Slides: 161
Provided by: RicHe87
Learn more at: http://carl.sandiego.edu
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Chapter 1 Introducing Cascading Style Sheets


1
Chapter 1 Introducing Cascading Style Sheets
2
Chapter 1 Topics
  • History of HTML and CSS
  • Browser support for CSS
  • Importance of structure/style separation
  • CSS Release 2 (CSS2) enhancements
  • Basic CSS syntax and style rules
  • Cascading mechanism and inheritance

3
A Brief History of HTML and CSS
  • History
  • HTML
  • First proposed by Tim Berners-Lee in 1989
  • Created from Standard Generalized Markup Language
    (SGML)
  • Consisted of elements for representing basic
    office documents
  • titles, headings, paragraphs, and lines
  • Mosaic first browser

4
(No Transcript)
5
A Brief History of HTML and CSS
  • History
  • HTML
  • Evolution of web brought demand for more control
    over content
  • display characteristics (e.g., color, typeface)
  • Berners-Lee and colleagues recognized need for
    separation of functionality
  • structural HTML code
  • style and display language

6
A Brief History of HTML and CSS
  • History
  • CSS
  • Initial proposal for CSS
  • released in 1994 by Hakon Lie of CERN (European
    Lab for Particle Physics)
  • Outlined
  • common design characteristics
  • ability to cascade multiple style sheets to a
    single document

7
A Brief History of HTML and CSS
  • History
  • CSS
  • Beta version of Netscape Navigator (Mozilla)
  • released shortly after CSS proposal
  • supported tags not contained in HTML
    specification
  • ltCENTERgt tag
  • changed HTML into language that displayed both
    style and structure
  • led to significant compatibility problems

8
A Brief History of HTML and CSS
  • History
  • As Web evolution continued
  • Further loosening of structural nature of HTML
  • browser wars Netscape vs. Microsoft
  • proprietary extensions defeat open portable
    nature of HTML
  • Became hard-coded for specific destination media
  • Limits transfer to other devices

9
A Brief History of HTML and CSS
  • History
  • World Wide Web Consortium (W3C)
  • Founded in 1994 as a web standards organization
  • Released first completed specification for CSS
    (CSS1) in 1996
  • Problem
  • not a single browser supported it

10
A Brief History of HTML and CSS
  • Browser Support for CSS
  • Microsoft Internet Explorer 3.0
  • First browser to offer support
  • Rudimentary support for CSS1
  • First full support
  • IE Release 5.0 for Macintosh in 1999

11
(No Transcript)
12
A Brief History of HTML and CSS
  • Browser Support for CSS
  • Netscape Navigator
  • Supports only basic features through Release 4.75
  • Lack of Netscape support in past has hindered CSS
    acceptance
  • Netscape 6 offers excellent support

13
(No Transcript)
14
(No Transcript)
15
A Brief History of HTML and CSS
  • Browser Support for CSS
  • Opera
  • Popular browser from Norway
  • Release 5.0
  • contains good support for CSS properties

16
(No Transcript)
17
A Brief History of HTML and CSS
  • Separating Style from Structure
  • Mixing display instructions and structural
    information
  • Adds to complexity of code
  • Inefficient mechanism for handling display
    characteristics of multi-page Web sites
  • Limits cross-platform compatibility of content
  • limits diversity of web devices

18
(No Transcript)
19
CSS Basics
  • CSS1 and CSS2
  • CSS1
  • Released in December 1996
  • Browser support
  • IE 5.5, Netscape 6, Opera 5
  • CSS2
  • Released in May 1998
  • No browser support at this time

20
CSS Basics
  • CSS1 and CSS2
  • CSS2 features
  • Media types, Paged media support
  • Aural style sheets, Table properties
  • New selection techniques
  • Display enhancements, generated content
  • Enhanced positioning schemes

21
CSS Basics
  • Understanding Style Rules
  • Style Rules
  • Express style characteristics for an HTML element
  • Style Sheet
  • Set of style rules

22
CSS Basics
  • Understanding Style Rules
  • Style Rules
  • Composed of two parts
  • selector ? determines element to which rule is
    applied
  • declaration ? details the exact property values
  • property ? quality or characteristic (e.g.,
    color)
  • value ? precise specification of property (e.g.,
    blue)

23
(No Transcript)
24
(No Transcript)
25
CSS Basics
  • Combining CSS Rules with HTML
  • Three ways to combine CSS rules and HTML
  • The STYLE attribute
  • The ltSTYLEgt element
  • External style sheet

26
CSS Basics
  • Combining CSS Rules with HTML
  • The STYLE attribute
  • Defines a style for a single element
  • Generally used to override a style set at a
    higher level in the document for a single element
  • Only affects one instance of an element in a
    document

27
CSS Basics
  • Combining CSS Rules with HTML
  • The ltSTYLEgt element
  • Always contained in the ltHEADgt section of the
    document
  • Generally used to override a style set at a
    higher level in the document for a single
    document
  • Only affects the document in which it resides

28
CSS Basics
  • Combining CSS Rules with HTML
  • External style sheet
  • Text document that contains style rules
  • Allows specification of rules for multiple HTML
    documents
  • Does not contain HTML code

29
CSS Basics
  • Combining CSS Rules with HTML
  • Linking to an external style sheet
  • ltLINKgt element establishes document relationships
  • Can only be used in the ltHEADgt section of a
    document
  • Tells the browser where to find the external
    style sheet

30
CSS Basics
  • Combining CSS Rules with HTML
  • Combining multiple style sheets
  • _at_import keyword
  • allows import of style rules from other style
    sheets
  • must precede all rules in style sheet or they
    will be ignored by the browser
  • Style rules contained within document take
    precedence over imported style rules
  • Weight of imported style sheets based on import
    order

31
(No Transcript)
32
(No Transcript)
33
(No Transcript)
34
(No Transcript)
35
CSS Basics
  • Understanding the Cascade
  • Cascading mechanism of CSS determines which rules
    are assigned to document elements by assigning a
    weight based on four variables
  • use of the !important keyword
  • origin of the rule
  • specificity of the selector
  • order of the rule in the style sheet

36
CSS Basics
  • Understanding the Cascade
  • Determining rule weight with the !important
    keyword
  • Allows user to override authors style setting
    for a particular element
  • Improves accessibility of documents
  • gives control to users with special requirements

37
CSS Basics
  • Understanding the Cascade
  • Determining rule weight by origin
  • Cascading order of precedence
  • rules from authors style sheet
  • rules from users style sheet
  • rules from Browsers style sheet

38
(No Transcript)
39
CSS Basics
  • Understanding the Cascade
  • Determining rule weight by specificity
  • Rules with more specific selectors take
    precedence over rules with less specific
    selectors
  • Determining rule weight by order
  • Based on order of rule within style sheet
  • Those listed later take precedence over those
    listed earlier in the style sheet

40
CSS Basics
  • Understanding Inheritance
  • Based on hierarchical structure of documents
  • CSS rules inherit from parent elements to child
    elements
  • thus ltLIgt elements will inherit style rules from
    ltULgt elements unless a style rule is specifically
    set for the ltLIgt element

41
(No Transcript)
42
Chapter 1 Summary
  • CSS evolved from evolution of web as a publishing
    medium and demand for increased control over
    content
  • CSS was poorly supported initially, but is
    gaining support of major browsers
  • CSS supports separation of style from structure
  • CSS rules can be combined with HTML in a number
    of ways
  • Multiple style sheets can be combined using the
    _at_import keyword
  • CSS uses cascading and inheritance to determine
    the precedence of style rules
  • !important keyword allows users to override
    authors style rules

43
Chapter 2 Understanding CSS Selection Techniques
44
Chapter 2 Topics
  • Basic CSS selector implementation
  • CLASS and ID attributes
  • Applying style rules to ltDIVgt and ltSPANgt elements
  • Pseudo-classes and elements for applying style
    rules to abstract document characteristics
  • CSS2 selector characteristics and capabilities

45
Basic Selection Techniques
  • Using Type Selectors
  • The selector determines the element to which a
    style declaration is applied
  • A type selector can apply a rule to every
    instance of an element in the document
  • Style sheet examples
  • H2 color red
  • P font-size 10 pt

46
(No Transcript)
47
Basic Selection Techniques
  • Grouping Selectors
  • Selectors may be grouped to set the same
    declaration for multiple selectors
  • Example
  • H1 color red
  • H2 color red
  • or
  • H1, H2 color red

48
Basic Selection Techniques
  • Combining Declarations
  • Multiple property declarations may be stated for
    the same selector
  • Example
  • P color blue
  • P font-size 12pt
  • or
  • P color blue font-size 12pt

49
Basic Selection Techniques
  • Using Descendant Selectors
  • Descendant (or contextual) selectors are based on
    the hierarchical structure of the elements in the
    document tree
  • Example
  • Following rule selects only ltBgt elements
    contained within ltPgt elements
  • P B color blue

50
(No Transcript)
51
(No Transcript)
52
Advanced Selection Techniques
  • Using the CLASS Attribute Selector
  • The CLASS attribute selector enables the naming
    of rules and their application to selected
    elements
  • CLASS is a core attribute and can be applied to
    any HTML element

53
(No Transcript)
54
Advanced Selection Techniques
  • Using the CLASS Attribute Selector
  • After writing the style rule, add it to the
    document using the CLASS attribute
  • ltP CLASSquotegtThis text will appear red with a
    30 pixel marginlt/Pgt
  • Increases precision (or granularity) by allowing
    special treatment of individual elements

55
(No Transcript)
56
Advanced Selection Techniques
  • Making CLASS Selectors More Specific
  • CLASS selectors should use names that are
    meaningful to the organization that owns the
    information or to the information type itself
  • CLASS selectors may be associated with the
    element to which it should be applied
  • H1.procedure font-family sans-serif

57
Advanced Selection Techniques
  • Using the ID Attribute Selectors
  • ID is a core attribute and can be applied to any
    HTML element
  • Difference between CLASS and ID
  • ID refers to only one (single) instance of the ID
    attribute value within a document
  • Thus an ID value can be specified and applied to
    only one unique element in a document

58
(No Transcript)
59
Advanced Selection Techniques
  • Using the ID Attribute Selectors
  • ID selector uses a (pound sign) flag character
    instead of the period used by the CLASS selector
  • After writing the style rule, add it to the
    document using the ID attribute
  • ltP IDprefacegtThis is a unique paragraph that
    is the preface of the documentlt/Pgt

60
Advanced Selection Techniques
  • Using ltDIVgt and ltSPANgt elements
  • Enable specification of logical divisions within
    a document that have their own name and style
    properties
  • ltDIVgt is a block-level element
  • ltSPANgt is the inline equivalent of ltDIVgt

61
Advanced Selection Techniques
  • Using ltDIVgt and ltSPANgt elements
  • Working with ltDIVgt
  • ltDIVgt can be used with the CLASS attribute to to
    create customized block-level elements
  • Declare it in the style rule
  • DIV.introduction font-size 14pt margin 24
    pt
  • Apply the style rule in the document
  • ltDIV CLASSintroductiongtThis is the
    introduction to the documentlt/DIVgt

62
Advanced Selection Techniques
  • Using ltDIVgt and ltSPANgt elements
  • Working with ltSPANgt
  • ltSPANgt can be used with the CLASS attribute to
    create customized inline elements
  • Declare it in the style rule
  • SPAN.logo color white background-color
    black
  • Apply the style rule in the document
  • ltPgtWelcome to the ltSPAN CLASSlogogt Wonder
    Softwarelt/SPANgtWeb sitelt/Pgt

63
(No Transcript)
64
Advanced Selection Techniques
  • Using Pseudo-Class and Pseudo-Element Selectors
  • These selectors allow expression of declarations
    for characteristics of a document that are not
    signified with the standard HTML elements
  • Pseudo-Classes
  • Select elements based on characteristics other
    than their element name
  • Pseudo-Elements
  • Allow the modification of other aspects of a
    document that are not classified by elements

65
Advanced Selection Techniques
  • Using Pseudo-Class and Pseudo-Element Selectors
  • Using the Link Pseudo-Classes
  • link pseudo-class
  • Allow modification of style characteristics for
    unvisited links
  • link color red
  • visited pseudo-class
  • Allow modification of style characteristics for
    visited links
  • visited color red

66
Advanced Selection Techniques
  • Using Pseudo-Class and Pseudo-Element Selectors
  • Using the first-letter Pseudo-Element
  • Allows the application of style rules to the
    first letter of any block-level element
  • Initial capitals
  • usually set in a bolder and larger font and share
    the same baseline as the rest of the text
  • Drop capitals
  • usually set in a bolder and larger font and
    extend two or more lines below the baseline of
    the rest of the text

67
(No Transcript)
68
(No Transcript)
69
(No Transcript)
70
Advanced Selection Techniques
  • Using Pseudo-Class and Pseudo-Element Selectors
  • Using the first-letter Pseudo-Element
  • Can only be applied to block-level elements
  • Only the following properties can be applied to
    first-letter
  • Font, Color, Background, Margin, Padding
  • Word-spacing, Letter-spacing, Text-decoration
  • Vertical-align, Text-transform, Line-height
  • Text-shadow, Clear

71
Advanced Selection Techniques
  • Using Pseudo-Class and Pseudo-Element Selectors
  • Using the first-line Pseudo-Element
  • Allows the application of style rules to the
    first line of any block-level element
  • This pseudo-element can only be applied to
    block-level elements
  • Only the following properties can be applied to
    first-line
  • Font, Color, Background, Word-spacing,
    Letter-spacing
  • Text-decoration, Text-transform, Line-height
  • Text-shadow, Clear

72
(No Transcript)
73
Advanced Selection Techniques
  • Using Pseudo-Class and Pseudo-Element Selectors
  • Using the Universal Selector
  • Allows the quick selection of a group of elements
    for the application of a style rule (although
    always overridden by specific selectors)
  • Examples
  • Set a default color for all elements in a
    document
  • color purple
  • Select all children of a selector
  • DIV font-family sans-serif

74
(No Transcript)
75
(No Transcript)
76
Testing Cross-Browser Compatibility
  • Always test the CSS style rules
  • in multiple browsers

77
(No Transcript)
78
(No Transcript)
79
(No Transcript)
80
(No Transcript)
81
CSS2 Selectors
  • Using the Child Selector
  • This selector allows the application of a style
    rule to the child elements of any parent element
  • Example
  • Select the child ltBLOCKQUOTEgt elements within a
    ltDIVgt element
  • DIV gt BLOCKQUOTE font-weight bold

82
(No Transcript)
83
CSS2 Selectors
  • Using the Adjacent Sibling Selector
  • This selector allows the application of a style
    rule to elements that share the same parent
    element and are adjacent in the code
  • The (plus sign) denotes adjacent siblings

84
(No Transcript)
85
(No Transcript)
86
CSS2 Selectors
  • Using the first-child Selector
  • This selector allows the application of a style
    rule to the first child element of any parent
    element
  • Example
  • Select the first child ltPgt element within a ltDIVgt
    element
  • DIV gt Pfirst-child font-weight bold

87
(No Transcript)
88
CSS2 Selectors
  • Using the Dynamic Pseudo-Class Selector
  • These selectors apply styles to an element based
    on the users actions
  • hover
  • applies style when user selects element
  • active
  • applies style when user activates element
  • focus
  • applies style when element is accepting user input

89
(No Transcript)
90
CSS2 Selectors
  • Using the lang Pseudo-Class
  • Allows specification of language for entire
    document or an element within a document
  • Web server sends a two-letter language code with
    all web pages
  • language codes are listed in Appendix A

91
CSS2 Selectors
  • Using the before and after Pseudo-Class
  • Allow insertion of content before and after an
    element
  • Example
  • ltP CLASSquestiongtWho sets web standards for
    HTML?lt/Pgt
  • ltP CLASSanswergtThe World Wide Web
    Consortiumlt/Pgt
  • P.questionbefore contentQuestion
    font-weight bold
  • P.answerbefore contentAnswer font-weight
    bold

92
(No Transcript)
93
Chapter 2 Summary
  • Basic style rules allow application of style
    rules to standard element selectors. Selectors
    and declarations can be combined to create more
    powerful style expressions. Elements can also be
    selected based on their contextual relationships
    in the document tree.
  • Advanced selection techniques allow the use of
    CLASS and ID attribute selectors, which are often
    paired with the ltDIVgt and ltSPANgt HTML elements.
    These selectors also allow the selection of
    meaningful naming conventions for style rules.
  • Pseudo-class and pseudo-element selectors provide
    a mechanism for styling characteristics of a
    document not expressed with standard HTML
    elements.
  • CSS2 selectors (not widely supported) offer new
    capabilities

94
Chapter 3 Using the Font and Type Properties
95
Chapter 3 Topics
  • Using type effectively
  • CSS measurement values
  • CSS font properties
  • CSS text spacing properties

96
Using Type Effectively
  • Choose Fewer Fonts and Sizes
  • Select typeface for each different level of topic
    importance
  • Example page and section headings
  • Communicate the hierarchy of information using
    changes in text characteristics
  • Be consistent in application of different text
    characteristics

97
Using Type Effectively
  • Choose Available Fonts
  • Fonts are platform (client) dependent
  • Times (Times New Roman) is available on all three
    platforms and is the default browser font
  • Client browser and O/S determine how unavailable
    fonts are rendered

98
(No Transcript)
99
Using Type Effectively
  • Design for Legibility
  • Line length varies based on the font used
  • Size and face of the type used determine the
    legibility of the page
  • Make fonts big enough to be readable
  • Use white space to enhance legibility

100
(No Transcript)
101
Understanding CSS Measurement Units
  • CSS offers a variety of measurement units
  • Absolute units
  • Relative units
  • Percentage

102
(No Transcript)
103
Understanding CSS Measurement Units
  • Absolute Units
  • Specify a fixed value
  • P margin 1.25in
  • Cannot be scaled to client display
  • Should only be used when exact measurements of
    destination medium are known

104
Understanding CSS Measurement Units
  • Relative Units
  • Enables scalable Web pages that adapt to
    different display types and sizes
  • Recommended method for Web page design

105
Understanding CSS Measurement Units
  • The em Unit
  • Printing measurement
  • Traditionally equal to horizontal length of the
    capital letter M in any font size
  • In CSS ? equal to the font size of an element
  • If default paragraph font size is 12, the em 12
    points
  • DIV.heading font-size 2em
  • Used for both horizontal and vertical measurement
  • Font sizes, padding, and margins

106
Understanding CSS Measurement Units
  • The ex Unit
  • Printing measurement
  • Equal to height of the lowercase letter x in any
    given font size
  • Less reliable form of measurement because size of
    the letter x changes in height across font
    families
  • Most browsers set it to ½ the value of the fonts
    em size

107
(No Transcript)
108
Understanding CSS Measurement Units
  • The px Unit
  • Pixels are the basic picture element of a
    computer display
  • Pixel size is determined by the display
    resolution
  • Resolution ? measure of how many pixels fit on
    the screen (e.g., 640 x 480, 1024 x 768)
  • as resolution increases ? pixel size decreases
  • Works well only for computer displays

109
Understanding CSS Measurement Units
  • Percentages
  • Always relative to another value
  • Example set BODY font size to 1 ½ times the size
    of the browser default
  • BODY font-size 150
  • Child elements inherit the percentage values of
    their parents
  • Example ltBgt will be 125 larger than ltPgt
  • P font-size 12pt
  • P B font-size 125

110
How to Read the Property Descriptions
  • Example Property Description
  • border-width property description
  • Value thin medium thick ltlengthgt
  • Initial medium
  • Applies to all elements
  • Inherited no
  • Percentages N/A

111
(No Transcript)
112
(No Transcript)
113
Using the Font Properties
  • Control the appearance of the text
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight
  • font-stretch
  • font (shorthand property)

114
Using the Font Properties
  • Specifying Font Family
  • Allows specification of generic font family names
    (e.g., sans-serif) or a specific name (e.g.,
    Helvetica)
  • font-family property description
  • Value ltfamily-namegt ltgeneric-familygt
  • Initial depends on user agent
  • Applies to all elements
  • Inherited yes
  • Percentages N/A

115
Using the Font Properties
  • Using Generic Font Families
  • Allows greater portability across platforms
  • Serif ? traditional letter form (e.g., Times)
  • Sans-serif ? block letters, have no serifs (e.g.,
    Helvetica, Arial)
  • Monospace ? fixed-width fonts, every letter has
    same horizontal width
  • Cursive ? resembles handwriting (limited support)
  • Fantasy ? primarily decorative (limited support)

116
Using the Font Properties
  • Using Specific Font Families
  • Allows specification of particular font-family
  • Futura, Garamond, Arial
  • User must have font installed on machine
  • If not, browser will supply default
  • Example
  • P font-family arial

117
Using the Font Properties
  • Specifying Font Substitution
  • Allows specification of alternate fonts using a
    comma separated list
  • Browser scans list for first installed font
  • Otherwise, browser supplies default
  • Generic font-family names can be used
  • Example
  • P font-family arial, helvetica, sans-serif

118
Using the Font Properties
  • Specifying Font Size
  • Controls specific sizing of type
  • font-size property description
  • Value ltabsolute-sizegt ltrelative-sizegt
    ltlengthgt ltpercentagegt
  • Initial medium
  • Applies to all elements
  • Inherited the computed value is inherited
  • Percentages refer to parent elements font size

119
Using the Font Properties
  • Specifying Font Size
  • Absolute Font-Size Keywords
  • xx-small
  • x-small
  • small
  • medium
  • large
  • x-large
  • xx-large

120
(No Transcript)
121
Using the Font Properties
  • Specifying Font Size
  • Relative Font-Size Keywords
  • smaller
  • larger
  • Example if parent elements size is large and
    the current elements size is set to larger, the
    current font size will be x-large

122
Using the Font Properties
  • Specifying Font Style
  • Allows specification of italic or oblique text
  • font-style property description
  • Value normal italic oblique
  • Initial normal
  • Applies to all elements
  • Inherited yes
  • Percentages N/A

123
Using the Font Properties
  • Specifying Font Variant
  • Allows specification of small capitals
  • font-variant property description
  • Value normal small-caps
  • Initial normal
  • Applies to all elements
  • Inherited yes
  • Percentages N/A

124
(No Transcript)
125
Using the Font Properties
  • Specifying Font Weight
  • Allows specification of weight of typeface
  • font-weight property description
  • Value normal bold bolder lighter 100
    200 300 400 500 600 700 800 900
  • Initial normal
  • Applies to all elements
  • Inherited yes
  • Percentages N/A

126
Using the Font Properties
  • Specifying Font Stretching
  • Allows condensing/expanding (not currently
    supported)
  • font-stretch property description
  • Value normal wider narrower
    ultra-condensed extra-condensed condensed
    semi-condensed semi-expanded expanded
    extra-expanded ultra-expanded
  • Initial normal
  • Applies to all elements
  • Inherited yes
  • Percentages N/A

127
Using the Font Properties
  • Specifying Font Shortcut
  • Shortcut that allows specification of the most
    common font properties in a single statement
  • font property description
  • Value ltfont-stylegt ltfont-variantgt
    ltfont-weightgt ? ltfont-sizegt /
    ltline-heightgt ? ltfont-familygt
  • Initial see individual properties
  • Applies to all elements
  • Inherited yes
  • Percentages allowed on font-size and
    line-height

128
Using the Text Spacing Properties
  • Control the spacing around and within the text
  • text-indent, text-align, text-decoration
  • line-height
  • vertical-align
  • letter-spacing, word-spacing
  • text-shadow, text-transform
  • white-space

129
Using the Text Spacing Properties
  • Specifying Text Indents
  • Allows specification of amount of indentation of
    first line of text in an element
  • text-indent property description
  • Value ltlengthgt ltpercentagegt
  • Initial 0
  • Applies to block-level elements
  • Inherited yes
  • Percentages refers to width of containing block

130
(No Transcript)
131
Using the Text Spacing Properties
  • Specifying Text Alignment
  • Allows specification of horizontal alignment for
    the lines of text in an element
  • text-alignment property description
  • Value left right center justify
  • Initial depends on user agent and language
  • Applies to block-level elements
  • Inherited yes
  • Percentages N/A

132
(No Transcript)
133
Using the Text Spacing Properties
  • Specifying Text Decoration
  • Allows addition of line decorations to text
  • text-decoration property description
  • Value none underline overline
    line-through blink
  • Initial none
  • Applies to all elements
  • Inherited no
  • Percentages N/A

134
(No Transcript)
135
Using the Text Spacing Properties
  • Specifying Line Height
  • Allows specification of length or percentage
    value for line height
  • commonly referred to as leading
  • line-height property description
  • Value normal ltnumbergt ltlengthgt
    ltpercentagegt
  • Initial normal
  • Applies to all elements
  • Inherited yes
  • Percentages refer to font size of the element
    itself

136
(No Transcript)
137
(No Transcript)
138
Using the Text Spacing Properties
  • Specifying Vertical Alignment
  • Allows adjustment of vertical alignment of text
    within the line box
  • vertical-align property description
  • Value baseline sub super top text-top
    middle bottom text-bottom ltpercentagegt
    ltlengthgt
  • Initial baseline
  • Applies to inline-level and table-cell
    elements
  • Inherited no
  • Percentages refer to the line-height of the
    element itself

139
(No Transcript)
140
(No Transcript)
141
(No Transcript)
142
Using the Text Spacing Properties
  • Specifying Letter Spacing
  • Allows adjustment of white space between letters
  • letter-spacing property description
  • Value normal ltlengthgt
  • Initial normal
  • Applies to all elements
  • Inherited yes
  • Percentages N/A

143
(No Transcript)
144
Using the Text Spacing Properties
  • Specifying Word Spacing
  • Allows adjustment of white space between text
  • word-spacing property description
  • Value normal ltlengthgt
  • Initial normal
  • Applies to all elements
  • Inherited yes
  • Percentages N/A

145
(No Transcript)
146
Using the Text Spacing Properties
  • Specifying Text Shadows
  • Allows addition of decorative shadow effects
  • Not supported in current browsers
  • text-shadow property description
  • Value none ltcolorgt ltlengthgt ltlengthgt
    ltlengthgt ?, ltcolorgt ltlengthgt ltlengthgt
    ltlengthgt?
  • Initial none
  • Applies to all elements
  • Inherited no
  • Percentages N/A

147
Using the Text Spacing Properties
  • Transforming Text Case
  • Allows transformation of text case
  • text-transform property description
  • Value capitalize uppercase lowercase none
  • Initial none
  • Applies to all elements
  • Inherited yes
  • Percentages N/A

148
(No Transcript)
149
Using the Text Spacing Properties
  • Controlling Element White Space
  • Allows control of white space properties of an
    element
  • white-space property description
  • Value normal pre nowrap
  • Initial none
  • Applies to block-level elements
  • Inherited yes
  • Percentages N/A

150
(No Transcript)
151
(No Transcript)
152
(No Transcript)
153
(No Transcript)
154
(No Transcript)
155
(No Transcript)
156
(No Transcript)
157
(No Transcript)
158
(No Transcript)
159
(No Transcript)
160
Chapter 3 Summary
  • Use type effectively by choosing available fonts
    and sizes. Design for legibility and use text to
    communicate information about the structure of
    the material
  • Choose the correct measurement unit based on the
    destination medium
  • Use font values to control the look of the letter
    forms
  • The font shortcut property allows combining of
    multiple font properties in one concise statement
  • Use text spacing properties to create visually
    interesting and legible text
About PowerShow.com