Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
-
Upload
cleopatra-mccarthy -
Category
Documents
-
view
224 -
download
0
Transcript of Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.
Chapter 11
Cascading Style Sheets: Part I
The Web Warrior Guide to Web Design Technologies
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
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
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
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
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
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 (;)
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
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
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
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>
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
Style Element Code Sample
<style type="text/css">
body {font-family: arial;}
h1 {color: red;}
</style>
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
External Style Sheet Code Sample
<head>
<title>A Basic Document</title>
<link href="Ch11CSS03.css" rel="stylesheet" type="text/css">
</head>
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 */
Basic Selection Techniques
• Using type selectors
• Grouping selectors
• Combining declarations
• Using descendant selectors
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;}
Grouping Selectors
• To make your style rules more concise, you can group type selectors for which the same rules apply:
h1, h2 {color: red;}
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;}
Advanced Selection Techniques
• Using the class selector
• Working with the <div> element
• Working with the <span> element
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
Class Selector
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>
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
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
<div> Code Sample
div.introduction {font-size: 14pt; margin: 24pt; text-indent: 28pt;}
<span> Code Sample
span.logo {color: white; background-color: black;}
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
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