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

2. 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 and elements with CSS style rules

3. 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

4. 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

9. Understanding Style Rules CSS syntax is designed to be easy to write and read The main components of CSS syntax are tags and their associated style rules You write style rules that select an HTML element and then declare style characteristics for the element

10. 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

12. 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 (;)

14. 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

15. Combining CSS Rules with HTML You can combine CSS rules with HTML code in the following three ways: The style attribute The element An external style sheet

16. 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

17. Style Attribute Code Sample Use the style attribute to change the style of this paragraph with a CSS style rule.

18. Using the Element The element is always contained in the section of the document Style rules contained in the element only affect the document in which they reside

19. Style Element Code Sample body {font-family: arial;} h1 {color: red;}

20. 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

21. External Style Sheet Code Sample A Basic Document

22. CSS Comments CSS allows comments within the element or in an external style sheet, as shown in the following example: /* This is the basic style sheet */

23. Basic Selection Techniques Using type selectors Grouping selectors Combining declarations Using descendant selectors

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

25. Grouping Selectors To make your style rules more concise, you can group type selectors for which the same rules apply: h1, h2 {color: red;}

26. Using Descendant Selectors This selector lets you select elements that are the descendants of other elements. The following rule selects only elements that are contained within elements: p b {color: blue;}

27. Advanced Selection Techniques Using the class selector Working with the element

28. 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

29. Class Selector

30. 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 This text will appear red with a 30 pixel margin.

31. Using the and elements The (division) and (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

32. Using the and elements The difference between and is their element display type is a block-level element is its inline equivalent

33. Code Sample div.introduction {font-size: 14pt; margin: 24pt; text- indent: 28pt;}

34. Code Sample span.logo {color: white; background-color: black;}

35. 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

36. 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