chapter 1 introducing cascading style sheets. chapter 1 topics history of html and css browser...

Chapter 1

Introducing Cascading Style Sheets

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

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


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


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


History CSS

Beta version of Netscape Navigator (Mozilla)

released shortly after CSS proposal supported tags not contained in HTML

specification <CENTER> tag changed HTML into language that displayed

both style and structure led to significant compatibility problems


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


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


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


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


Browser Support for CSS Opera

Popular browser from Norway Release 5.0

contains good support for CSS properties


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

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

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

CSS Basics Understanding Style Rules

Style Rules Express style characteristics for an HTML

element Style Sheet

Set of style rules

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)

CSS Basics Combining CSS Rules with HTML

Three ways to combine CSS rules and HTML

The STYLE attribute The <STYLE> element External style sheet


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


The <STYLE> element Always contained in the <HEAD> 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


External style sheet Text document that contains style rules Allows specification of rules for multiple

HTML documents Does not contain HTML code


Linking to an external style sheet <LINK> element establishes document

relationships Can only be used in the <HEAD> section of a

document Tells the browser where to find the external

style sheet


Combining multiple style sheets @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

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


Determining rule weight with the !important keyword

Allows user to override author’s style setting for a particular element

Improves accessibility of documents gives control to users with special

requirements


Determining rule weight by origin Cascading order of precedence:

rules from author’s style sheet rules from user’s style sheet rules from Browser’s style sheet


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

CSS Basics Understanding Inheritance

Based on hierarchical structure of documents

CSS rules inherit from parent elements to child elements:

thus <LI> elements will inherit style rules from <UL> elements unless a style rule is specifically set for the <LI> element

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 @import

keyword CSS uses cascading and inheritance to determine the

precedence of style rules !important keyword allows users to override author’s style

rules

Chapter 2

Understanding CSS Selection Techniques

Chapter 2 Topics Basic CSS selector implementation CLASS and ID attributes Applying style rules to <DIV> and

<SPAN> elements Pseudo-classes and elements for

applying style rules to abstract document characteristics

CSS2 selector characteristics and capabilities

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;}


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;}


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;}


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 <B> elements

contained within <P> elements P B {color: blue;}

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


Using the CLASS Attribute Selector After writing the style rule, add it to

the document using the CLASS attribute:

<P CLASS=“quote”>This text will appear red with a 30 pixel margin</P>

Increases precision (or granularity) by allowing special treatment of individual elements


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;}


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


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:

<P ID=“preface”>This is a unique paragraph that is the preface of the document</P>


Using <DIV> and <SPAN> elements Enable specification of logical

divisions within a document that have their own name and style properties

<DIV> is a block-level element <SPAN> is the inline equivalent of <DIV>


Using <DIV> and <SPAN> elements Working with <DIV>

<DIV> 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:

<DIV CLASS=“introduction””>This is the introduction to the document</DIV>


Using <DIV> and <SPAN> elements Working with <SPAN>

<SPAN> 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:

<P>Welcome to the <SPAN CLASS=“logo””> Wonder Software</SPAN>Web site</P>

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


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;}


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

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


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


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;}

Testing Cross-Browser Compatibility

Always test the CSS style rules in multiple browsers

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 <BLOCKQUOTE> elements

within a <DIV> element DIV > BLOCKQUOTE {font-weight: bold;}

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

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 <P> element within a

<DIV> element DIV > P:first-child {font-weight: bold}

CSS2 Selectors Using the Dynamic Pseudo-Class

Selector These selectors apply styles to an

element based on the user’s actions :hover

applies style when user selects element :active

applies style when user activates element :focus

applies style when element is accepting user input

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

CSS2 Selectors Using the :before and :after Pseudo-Class

Allow insertion of content before and after an element

Example: <P CLASS=“question”>Who sets web standards for

HTML?</P> <P CLASS=“answer”>The World Wide Web

Consortium</P>

P.question:before {content:”Question:”; font-weight: bold;}

P.answer:before {content:”Answer:”; font-weight: bold;}

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 <DIV> and <SPAN> 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

Chapter 3

Using the Font and Type Properties

Chapter 3 Topics

Using type effectively CSS measurement values CSS font properties CSS text spacing properties

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


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


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

Understanding CSS Measurement Units

CSS offers a variety of measurement units Absolute units Relative units Percentage


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


Relative Units Enables scalable Web pages that

adapt to different display types and sizes

Recommended method for Web page design


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


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 font’s em size


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


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: <B> will be 125% larger than

<P> P {font-size: 12pt;} P B {font-size: 125%;}

How to Read the Property Descriptions

Example Property Description

border-width property descriptionValue: thin | medium | thick | <length>Initial: mediumApplies to: all elementsInherited: noPercentages: N/A

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)

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 descriptionValue: <family-name> | <generic-family>Initial: depends on user agentApplies to: all elementsInherited: yesPercentages: N/A

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)

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;}

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;}

Using the Font Properties Specifying Font Size

Controls specific sizing of type

font-size property descriptionValue: <absolute-size> | <relative-size> |

<length> | <percentage>Initial: mediumApplies to: all elementsInherited: the computed value is inheritedPercentages: refer to parent element’s font size


Absolute Font-Size Keywords xx-small x-small small medium large x-large xx-large


Relative Font-Size Keywords smaller larger

Example: if parent element’s size is large and the current element’s size is set to larger, the current font size will be x-large

Using the Font Properties Specifying Font Style

Allows specification of italic or oblique text

font-style property descriptionValue: normal | italic | obliqueInitial: normalApplies to: all elementsInherited: yesPercentages: N/A

Using the Font Properties Specifying Font Variant

Allows specification of small capitals

font-variant property descriptionValue: normal | small-capsInitial: normalApplies to: all elementsInherited: yesPercentages: N/A

Using the Font Properties Specifying Font Weight

Allows specification of weight of typeface

font-weight property descriptionValue: normal | bold | bolder | lighter | 100 | 200 |

300 | 400 | 500 | 600 | 700 | 800 | 900Initial: normalApplies to: all elementsInherited: yesPercentages: N/A

Using the Font Properties Specifying Font Shortcut

Shortcut that allows specification of the most common font properties in a single statement

font property descriptionValue: [[<‘font-style’> || <‘font-variant’> || <‘font-

weight’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ]

Initial: see individual propertiesApplies to: all elementsInherited: yesPercentages: allowed on ‘font-size’ and ‘line-height’

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


Specifying Text Indents Allows specification of amount of

indentation of first line of text in an element

text-indent property descriptionValue: <length> | <percentage>Initial: 0Applies to: block-level elementsInherited: yesPercentages: refers to width of containing block


Specifying Text Alignment Allows specification of horizontal

alignment for the lines of text in an element

text-alignment property descriptionValue: left | right | center | justifyInitial: depends on user agent and languageApplies to: block-level elementsInherited: yesPercentages: N/A


Specifying Text Decoration Allows addition of line decorations to

text

text-decoration property descriptionValue: none | [underline || overline || line-through ||

blink]Initial: noneApplies to: all elementsInherited: noPercentages: N/A


Specifying Line Height Allows specification of length or percentage

value for line height commonly referred to as “leading”

line-height property descriptionValue: normal | <number> | <length> | <percentage>Initial: normalApplies to: all elementsInherited: yesPercentages: refer to font size of the element itself


Specifying Letter Spacing Allows adjustment of white space

between letters

letter-spacing property descriptionValue: normal | <length>Initial: normalApplies to: all elementsInherited: yesPercentages: N/A


Specifying Word Spacing Allows adjustment of white space

between text

word-spacing property descriptionValue: normal | <length>Initial: normalApplies to: all elementsInherited: yesPercentages: N/A


Specifying Text Shadows Allows addition of decorative shadow

effects Not supported in current browsers

text-shadow property descriptionValue: none | [<color> || <length> <length> <length>

?,] [<color> || <length> <length> <length>?]Initial: noneApplies to: all elementsInherited: noPercentages: N/A


Transforming Text Case Allows transformation of text case

text-transform property descriptionValue: capitalize | uppercase | lowercase | noneInitial: noneApplies to: all elementsInherited: yesPercentages: N/A


Controlling Element White Space Allows control of white space

properties of an element

white-space property descriptionValue: normal | pre | nowrapInitial: noneApplies to: block-level elementsInherited: yesPercentages: N/A

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

chapter 1 introducing cascading style sheets. chapter 1 topics history of html and css browser...

Documents

css browser support

css css1

browser slide

brief history of html

css properties

css proposal

topics history of html

css separating style