chapter 11 cascading style sheets: part i the web warrior guide to web design technologies
TRANSCRIPT
![Page 1: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/1.jpg)
Chapter 11
Cascading Style Sheets: Part I
The Web Warrior Guide to Web Design Technologies
![Page 2: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/2.jpg)
Objectives
• Write your first style sheet
• Use basic CSS syntax
• Combine style rules with your HTML code
• Use CSS selectors to apply style rules
• Use the <div> and <span> elements with CSS style rules
![Page 3: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/3.jpg)
Introducing Cascading Style Sheets
• CSS was invented by the World Wide Web Consortium
• CSS is an easy-to-use style language that lets you use familiar desktop publishing terminology to control the appearance of Web pages
• You can use CSS to control typography, colors, backgrounds, and other design characteristics
![Page 4: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/4.jpg)
Browser Support for Cascading Style Sheets
• The only drawback to working with CSS is the lack of support in older browsers
• To enjoy all the benefits of Web pages created with CSS, the user needs a newer browser
• Netscape users need version 6.0 or above; Internet Explorer users need version 5.0 or above
![Page 5: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/5.jpg)
![Page 6: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/6.jpg)
![Page 7: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/7.jpg)
![Page 8: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/8.jpg)
![Page 9: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/9.jpg)
Understanding Style Rules
• CSS syntax is designed to be easy to write and read
• The main components of CSS syntax are <style> tags and their associated style rules
• You write style rules that select an HTML element and then declare style characteristics for the element
![Page 10: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/10.jpg)
Understanding Style Rules
• The style rule is composed of two parts: a selector and a declaration
• The selector determines the element to which the rule is applied
• The declaration specifies the exact property values to be applied to the element
![Page 11: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/11.jpg)
![Page 12: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/12.jpg)
Understanding Style Rules
• The declaration contains a property and a value
• The property is a quality or characteristic, such as color, font size, or margin, followed by a colon (:)
• The value is the precise specification of the property, such as blue for color, 12 pt (point) for font size, or 30 px (pixels) for margin, followed by a semicolon (;)
![Page 13: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/13.jpg)
![Page 14: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/14.jpg)
Understanding Style Rules
• The style rules you write are contained in a style sheet
• An external style sheet is a stand-alone document that is shared by a number of Web pages
• Alternately, your style sheet can be contained within a single Web page, controlling the styles for that page only
![Page 15: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/15.jpg)
Combining CSS Rules with HTML
You can combine CSS rules with HTML code in the following three ways:
• The style attribute
• The <style> element
• An external style sheet
![Page 16: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/16.jpg)
Using the Style Attribute
• The style attribute is an HTML attribute that can be used with any HTML element
• You can define the style for a single element by using the style attribute
![Page 17: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/17.jpg)
Style Attribute Code Sample
<p style="font-weight: bold;">Use the style attribute to change the style of this paragraph with a CSS style rule.</p>
![Page 18: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/18.jpg)
Using the <style> Element
• The <style> element is always contained in the <head> section of the document
• Style rules contained in the <style> element only affect the document in which they reside
![Page 19: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/19.jpg)
Style Element Code Sample
<style type="text/css">
body {font-family: arial;}
h1 {color: red;}
</style>
![Page 20: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/20.jpg)
Linking to an External Style Sheet
• An external style sheet is a text document containing style rules
• You can create one external style sheet whose style rules affect all the pages on a Web site
• When you want to update a style, you only have to change the style rule once in the external style sheet
![Page 21: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/21.jpg)
External Style Sheet Code Sample
<head>
<title>A Basic Document</title>
<link href="Ch11CSS03.css" rel="stylesheet" type="text/css">
</head>
![Page 22: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/22.jpg)
CSS Comments
• CSS allows comments within the <style> element or in an external style sheet, as shown in the following example:
/* This is the basic style sheet */
![Page 23: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/23.jpg)
Basic Selection Techniques
• Using type selectors
• Grouping selectors
• Combining declarations
• Using descendant selectors
![Page 24: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/24.jpg)
Using Type Selectors
• A type selector applies the rule to every instance of the element in the document, as shown in the following rules:
body {color: gray;}
H2 {color: red;}
p {font-size: 10pt;}
![Page 25: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/25.jpg)
Grouping Selectors
• To make your style rules more concise, you can group type selectors for which the same rules apply:
h1, h2 {color: red;}
![Page 26: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/26.jpg)
Using Descendant Selectors
• This selector lets you select elements that are the descendants of other elements. The following rule selects only <b> elements that are contained within <p> elements:
p b {color: blue;}
![Page 27: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/27.jpg)
Advanced Selection Techniques
• Using the class selector
• Working with the <div> element
• Working with the <span> element
![Page 28: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/28.jpg)
Using the Class Selector
• The class selector lets you write a style rule, assign it a name, and then apply that name to any elements you choose
• To apply the style rule to an element, you add the class attribute to the element and set it to the name you have specified
![Page 29: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/29.jpg)
Class Selector
![Page 30: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/30.jpg)
Applying the Class
• After you create a style rule containing a class selector, you add it to the document by using the class attribute, as shown in the following code
<p class="quote">This text will appear red with a 30 pixel margin.</p>
![Page 31: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/31.jpg)
Using the <div> and <span> elements
• The <div> (division) and <span> (span of words) elements in HTML are designed to be used with the CSS class selector
• They let you specify logical divisions within a document that have their own class name and style properties
![Page 32: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/32.jpg)
Using the <div> and <span> elements
• The difference between <div> and <span> is their element display type
• <div> is a block-level element
• <span> is its inline equivalent
![Page 33: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/33.jpg)
<div> Code Sample
div.introduction {font-size: 14pt; margin: 24pt; text-indent: 28pt;}
![Page 34: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/34.jpg)
<span> Code Sample
span.logo {color: white; background-color: black;}
![Page 35: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/35.jpg)
Summary
• CSS is a style language that lets you gain visual control over the display of your Web content
• CSS was poorly supported by browsers at first, but now it is becoming widely supported
• A style sheet is a collection of style rules
![Page 36: Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies](https://reader036.vdocuments.site/reader036/viewer/2022062301/56649e165503460f94b012d4/html5/thumbnails/36.jpg)
Summary
• A style rule defines style characteristics for an HTML element– It consists of a selector and a declaration
• The declaration consists of a property and a value
• You can combine CSS style rules with your HTML documents in three different ways – with the style attribute, or with internal or external style sheets