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


• 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


• 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 (;)


• 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

Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.

Documents

Transcript of Chapter 11 Cascading Style Sheets: Part I The Web Warrior Guide to Web Design Technologies.