Chapter 6 Introducing Cascading Style Sheets Principles of Web Design, 4 th Edition

6-2 Objectives Understand CSS style rules Build a basic style sheet Understand the cascade and inheritance Use basic selection techniques Use advanced selection techniques Work with the and elements Use pseudo-classes and pseudo-selectors

Principles of Web Design, 4th Edition6-3 Understanding CSS Style Rules

Principles of Web Design, 4th Edition6-4 Understanding CSS Style Rules In CSS, style rules express the style characteristics for an HTML element A set of style rules is called a style sheet Style rules are easy to write and interpret

Principles of Web Design, 4th Edition6-5 Understanding CSS Style Rules (continued) Style rules are composed of two parts: a selector and a declaration The selector determines the element to which the rule is applied The declaration details the exact property values

Principles of Web Design, 4th Edition6-6

Principles of Web Design, 4th Edition6-7 Understanding CSS Style Rules (continued) The declaration contains a property and a value The property is a quality or characteristic The precise specification of the property is contained in the value CSS includes a wide variety of different properties, each with a specific number of values

Principles of Web Design, 4th Edition6-8

Principles of Web Design, 4th Edition6-9 Combining CSS Rules with HTML Three ways to combine CSS rules and HTML –The style attribute –The element –External style sheet

Principles of Web Design, 4th Edition6-10 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 Combining CSS Rules with HTML (continued)

Principles of Web Design, 4th Edition6-11 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 Combining CSS Rules with HTML (continued)

Principles of Web Design, 4th Edition6-12 Combining CSS Rules with HTML (continued) External style sheet –Text document that contains style rules –Allows specification of rules for multiple HTML documents –Does not contain HTML code

Principles of Web Design, 4th Edition6-13 Combining CSS Rules with HTML (continued) 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

Principles of Web Design, 4th Edition6-14 Combining CSS Rules with HTML (continued) Combining multiple style sheets 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

Principles of Web Design, 4th Edition6-15 Building a Basic Style Sheet

Principles of Web Design, 4th Edition6-16

Principles of Web Design, 4th Edition6-17

Principles of Web Design, 4th Edition6-18 Understanding the Cascade

Principles of Web Design, 4th Edition6-19 Understanding the Cascade Cascading mechanism of CSS determines which rules are assigned to document elements by assigning a weight based on four variables: –Origin of the rule –Specificity of the selector –Order of the rule in the style sheet –Use of the !important keyword

Principles of Web Design, 4th Edition6-20 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

Principles of Web Design, 4th Edition6-21

Principles of Web Design, 4th Edition6-22 Determining Rule Weight By Specificity Rules with more specific selectors take precedence over rules with less specific selectors

Principles of Web Design, 4th Edition6-23 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

Principles of Web Design, 4th Edition6-24 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

Principles of Web Design, 4th Edition6-25 Understanding Inheritance

Principles of Web Design, 4th Edition6-26 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

Principles of Web Design, 4th Edition6-27

Principles of Web Design, 4th Edition6-28 Understanding Basic Selection Techniques

Principles of Web Design, 4th Edition6-29 Understanding Basic Selection Techniques Using type selectors Grouping selectors Combining declarations Using descendant selectors

Principles of Web Design, 4th Edition6-30 Using Type Selectors The following rule selects the H1 element:

Principles of Web Design, 4th Edition6-31 Grouping Selectors The following rule selects the H1 and H2 elements: h1, h2 {color: green;}

Principles of Web Design, 4th Edition6-32 Combining Declarations The following style rules set the element to 12-point blue text: p {color: blue;} p {font-size: 12pt;} These two style rules can be expressed in a simpler way: p {color: blue; font-size: 12pt;}

Principles of Web Design, 4th Edition6-33 Using Descendant Selectors A descendant selector lets you specify the exact context in which a style is applied To specify that elements appear blue only within elements, use the following rule: p b {color: blue;}

Principles of Web Design, 4th Edition6-34 Understanding Advanced Selection Techniques

Principles of Web Design, 4th Edition6-35 Understanding Advanced Selection Techniques The class attribute The id attribute The and elements The pseudo-class and pseudo-element selectors The universal selector

Principles of Web Design, 4th Edition6-36 Using the Class Attribute Selector The class attribute lets you write rules and then apply them to groups of elements that you have classified To create a class, declare it within the element first –The period (.) flag character indicates that the selector is a class selector

Principles of Web Design, 4th Edition6-37 Using the Class Attribute Selector (continued)

Principles of Web Design, 4th Edition6-38 Using the Class Attribute Selector (continued) This is the first paragraph of the document. It has a different style based on the “special” class selector.

Principles of Web Design, 4th Edition6-39 Using the id Attribute Selector The difference between id and class is that id refers to only one instance of the id attribute value within a document

Principles of Web Design, 4th Edition6-40

Principles of Web Design, 4th Edition6-41 Working with The element lets you specify logical divisions within a document that have their own name and style properties is a block-level element; it contains a leading and trailing carriage return You can use with the class attribute to create customized block-level elements

Principles of Web Design, 4th Edition6-42 Working with (continued) To create a division, declare it within the element first The following example specifies a division named column as the selector for the rule: div.column {width: 200px; height: auto; padding: 15px; border: thin solid;}

Principles of Web Design, 4th Edition6-43 Working with (continued) Next, specify the element in the document; then use the class attribute to specify the exact type of division In the following example, the code defines the element as the special class named “introduction” This division displays as a column of text in the browser window.

Principles of Web Design, 4th Edition6-44

Principles of Web Design, 4th Edition6-45 Working with The element lets you specify inline elements within a document that have their own name and style properties Inline elements go within the line of text, like the element

Principles of Web Design, 4th Edition6-46 Working with (continued) To create a span, declare it within the element first The following example specifies a element named “logo” as the selector for the rule: span.logo {color:red;}

Principles of Web Design, 4th Edition6-47 Working with (continued) Next, specify the element in the document; then use the class attribute to specify the exact type of span In the following example, the code defines the element as the special class named “logo” Welcome to the Wonder Software Web site.

Principles of Web Design, 4th Edition6-48 Working with (continued)

Principles of Web Design, 4th Edition6-49 Using the Link Pseudo-Classes The :link and :visited pseudo-classes let you change the style characteristics for new, unvisited links (:link) and visited links (:visited) These pseudo-classes only apply to the element with an href attribute

Principles of Web Design, 4th Edition6-50 Using the Link Pseudo-Classes (continued) The following rules change the colors of the hypertext links: :link {color: red;} :visited {color: green;}

Principles of Web Design, 4th Edition6-51 Using the hover Pseudo-Class The :hover pseudo-class lets you apply a style that appears when the user points to an element with a pointing device This is a useful navigation aid to add to the element, with the result that the link appears highlighted when the user points to it with the mouse

Principles of Web Design, 4th Edition6-52 a:hover {background-color: yellow;}

Principles of Web Design, 4th Edition6-53 Using the :first-letter Pseudo- Element Use the :first-letter pseudo-element to apply style rules to the first letter of any element: p:first-letter {font-weight: bold; font-size: 200%;}

Principles of Web Design, 4th Edition6-54

Principles of Web Design, 4th Edition6-55 Using the :first-letter Pseudo- Element (continued) You can make the initial capital a drop capital by adding the float property to the rule, which allows the letter to extend downward: p.dropcap:first-letter {font-weight: bold; font-size: 200%; float: left;}

Principles of Web Design, 4th Edition6-56

Principles of Web Design, 4th Edition6-57 Using the :first-line Pseudo- Element The :first-line pseudo-element works in much the same way as :first-letter, except for the obvious difference that it affects the first line of text in an element: p.introduction:first-line {text-transform: uppercase;}

Principles of Web Design, 4th Edition6-58

Principles of Web Design, 4th Edition6-59 Using the Universal Selector The universal selector lets you quickly select groups of elements and apply a style rule You can also use the universal selector to select all children of an element * {color: purple;} div * {font-family: sans-serif;}

Principles of Web Design, 4th Edition6-60 Summary CSS rules can be combined with your HTML code in a number of ways CSS rules are easy to write and read CSS uses cascading and inheritance to determine which style rules take precedence –The !important declaration lets users override the author’s style rules

Principles of Web Design, 4th Edition6-61 Summary (continued) Basic style rules let you apply style rules based on standard element selectors –You can combine the selectors and declarations to create more powerful style expressions –You can also select elements based on the contextual relationship of elements in the document tree

Principles of Web Design, 4th Edition6-62 Summary (continued) The advanced selection techniques allow you to use the class attribute selector, which is often paired with the and HTML elements –These elements have no style of their own, but offer a convenient way of expressing style for any section of a document, whether block-level or inline –Additionally, class allows you to choose a meaningful naming convention for your style rules

Principles of Web Design, 4th Edition6-63 Summary (continued) The pseudo-class and pseudo-element selectors let you change the color and styling of hypertext links and the effect elements of a document, such as first line and first letter, that are not signified with the standard HTML elements