Chapter 1 Introducing Cascading Style Sheets

1. Chapter 1Introducing 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

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 • <CENTER> 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

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

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

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

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)

25. CSS Basics • Combining CSS Rules with HTML • Three ways to combine CSS rules and HTML • The STYLE attribute • The <STYLE> 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 <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

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 • <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

30. CSS Basics • Combining CSS Rules with HTML • 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

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 author’s 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 author’s style sheet • rules from user’s style sheet • rules from Browser’s style sheet

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 <LI> elements will inherit style rules from <UL> elements unless a style rule is specifically set for the <LI> element

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 @import keyword • CSS uses cascading and inheritance to determine the precedence of style rules • !important keyword allows users to override author’s style rules

43. Chapter 2Understanding CSS Selection Techniques

44. 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

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

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 <B> elements contained within <P> elements • P B {color: blue;}