Chapter 1 Introducing Cascading Style Sheets. Chapter 1 Topics History of HTML and CSS Browser support for CSS Importance of structure/style separation.

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

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

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

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 tag changed HTML into language that displayed both style and structure led to significant compatibility problems

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

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

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

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

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

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

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 element External style sheet

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

CSS Basics Combining CSS Rules with HTML The element Always contained in the 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

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

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

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

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

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

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

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

CSS Basics Understanding Inheritance Based on hierarchical structure of documents CSS rules inherit from parent elements to child elements: thus elements will inherit style rules from elements unless a style rule is specifically set for the 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 and 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;}

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

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

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 elements contained within 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

Advanced Selection Techniques Using the CLASS Attribute Selector After writing the style rule, add it to the document using the CLASS attribute: This text will appear red with a 30 pixel margin Increases precision (or granularity) by allowing special treatment of individual elements

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

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

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: This is a unique paragraph that is the preface of the document

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

Advanced Selection Techniques Using and elements Working with 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: This is the introduction to the document

Advanced Selection Techniques Using and elements Working with 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: Welcome to the Wonder Software Web site

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

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

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

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

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

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

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 elements within a 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 element within a 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: Who sets web standards for HTML? The World Wide Web Consortium 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 and 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

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

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

Understanding CSS Measurement Units CSS offers a variety of measurement units Absolute units Relative units Percentage

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

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

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

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

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

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: will be 125% larger than P {font-size: 12pt;} P B {font-size: 125%;}

How to Read the Property Descriptions Example Property Description border-width property description Value: thin | medium | thick | Initial: medium Applies to: all elements Inherited: no Percentages: 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 description Value: | Initial: depends on user agent Applies to: all elements Inherited: yes Percentages: 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 description Value: | | | Initial: medium Applies to: all elements Inherited: the computed value is inherited Percentages: refer to parent element’s font size

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

Using the Font Properties Specifying Font Size 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 description Value: normal | italic | oblique Initial: normal Applies to: all elements Inherited: yes Percentages: N/A

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

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

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: [[ || || ]? [ / ]? ] Initial: see individual properties Applies to: all elements Inherited: yes Percentages: 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

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: | Initial: 0 Applies to: block-level elements Inherited: yes Percentages: refers to width of containing block

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

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

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 | | | Initial: normal Applies to: all elements Inherited: yes Percentages: refer to font size of the element itself

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 | | Initial: baseline Applies to: inline-level and ‘table-cell’ elements Inherited: no Percentages: refer to the ‘line-height’ of the element itself

Using the Text Spacing Properties Specifying Letter Spacing Allows adjustment of white space between letters letter-spacing property description Value: normal | Initial: normal Applies to: all elements Inherited: yes Percentages: N/A

Using the Text Spacing Properties Specifying Word Spacing Allows adjustment of white space between text word-spacing property description Value: normal | Initial: normal Applies to: all elements Inherited: yes Percentages: N/A

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 | [ || ?,] [ || ?] Initial: none Applies to: all elements Inherited: no Percentages: N/A

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

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

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 support for CSS Importance of structure/style separation.

Similar presentations

Presentation on theme: "Chapter 1 Introducing Cascading Style Sheets. Chapter 1 Topics History of HTML and CSS Browser support for CSS Importance of structure/style separation."— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Chapter 1 Introducing Cascading Style Sheets. Chapter 1 Topics History of HTML and CSS Browser support for CSS Importance of structure/style separation.

Similar presentations

Presentation on theme: "Chapter 1 Introducing Cascading Style Sheets. Chapter 1 Topics History of HTML and CSS Browser support for CSS Importance of structure/style separation."— Presentation transcript:

Similar presentations

About project

Feedback