1 / 20

Chapter 6 Introducing Cascading Style Sheets

Learn the basics of CSS, including style rules, selectors, and declarations. Understand how to combine CSS rules, use descendant selectors, and work with class attributes.

doyon
Download Presentation

Chapter 6 Introducing Cascading Style Sheets

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 6Introducing Cascading Style Sheets Principles of Web Design, Third Edition

  2. Cascading Style Sheet Reference • Appendix B of text • Dreamweaver reference • www.dreamweaver-templates.org/css-resources.htm • Web Tutorials - www.w3schools.com • CSS Tutorial - www.w3schools.com/css Principles of Web Design, Third Edition

  3. Understanding CSS Style Rules • 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, Third Edition

  4. Principles of Web Design, Third Edition

  5. Understanding CSS Style Rules h1 {color: red;} • The declaration contains a property and a value • The property (like color) is a quality or characteristic • The precise specification of the property is contained in the value (red) • CSS includes over 50 different properties, each with a specific number of values Principles of Web Design, Third Edition

  6. CSS Basics • Combining CSS Rules with XHTML • The <style> element • External style sheet Principles of Web Design, Third Edition

  7. CSS Basics • Combining CSS Rules with XHTML • External style sheet • Text document that contains style rules • Allows specification of rules for multiple HTML documents • Does not contain HTML code • Link command in <HEAD> section <link HREF="spstyle.css" REL="stylesheet"> Principles of Web Design, Third Edition

  8. Using Descendant Selectors A descendant selector lets you specify the exact context in which a style is applied. To specify that <b> elements appear blue only within <p> elements, use the following rule: h1 {color: blue;} Principles of Web Design, Third Edition

  9. Grouping Selectors The following rule selects the H1 and H2 elements: h1, h2 {color: green;} Principles of Web Design, Third Edition

  10. Combining Declarations The following style rules set the <p> 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, Third Edition

  11. Understanding Advanced Selection Techniques • Using the class attribute • Using the <div> and <span> elements Principles of Web Design, Third Edition

  12. 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 <style> element first. The period (.) flag character indicates that the selector is a class selector. Principles of Web Design, Third Edition

  13. Using the class Attribute Selector Principles of Web Design, Third Edition

  14. Using the class Attribute Selector .special {font-size: 10pt; font-weight: bold;} <p class=”special”>This is the first paragraph of the document. It has a different style based on the “special” class selector.</p> Principles of Web Design, Third Edition

  15. Working With <div> • The <div> element lets you specify logical divisions within a document that have their own name and style properties • <div> is a block-level element. It contains a leading and trailing carriage return. • You can use <div> with the class attribute to create customized block-level elements Principles of Web Design, Third Edition

  16. Working With <div> Next, specify the <div> element in the document. Then use the class attribute to specify the exact type of division. In the following example, the code defines the <div> element as the special class named “introduction.” <div class=“introduction”>Some text</div> Principles of Web Design, Third Edition

  17. Working with <span> • The <span> 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 <b> element Principles of Web Design, Third Edition

  18. Working with <span> Next, specify the <span> element in the document. Then use the class attribute to specify the exact type of span. In the following example, the code defines the <span> element as the special class named “logo.” Welcome to the <span class=“logo”> Wonder Software </span> Web site. Principles of Web Design, Third Edition

  19. Working with <span> Welcome to the <span class=“logo”> Wonder Software </span> Web site. Principles of Web Design, Third Edition

  20. The End Questions ? Principles of Web Design, Third Edition

More Related