Sams Teach Yourself CSS 24 in Hours

Sams Teach Yourself CSS 24 in Hours

by Kynn Bartlett
Released June 2006
Publisher(s): Sams
ISBN: 0672329069

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

You know you should use cascading style sheets (CSS) to simplify your web pages, but how do you use CSS? Sams Teach Yourself CSS in 24 Hours, Second Edition is a carefully organized, well-written tutorial that teaches you not only how to use cascading style sheets, but also how to make smart decisions about how and when to apply CSS, based on browser support and intended effects. You'll cover standards compliant CSS, with an emphasis on providing both a theoretical understanding and practical experience at implementing CSS.

In 24 straightforward one-hour long lessons, you learn by accomplishing hands-on tasks that can be applied to your own site. The tutorials have been updated for this second edition to cover browsers that have become more widely used since the release of the first edition. It also has been updated to cover styling of forms, troubleshooting CSS, and other important new developments.

Table of contents

  1. Copyright
    1. Dedication
  2. About the Author
  3. Acknowledgments
  4. We Want to Hear from You!
    1. Reader Services
  5. Introduction
    1. How to Read This Book
      1. Other Ways to Use This Book
    2. What’s in Each Hour
    3. Who Should Read This Book
    4. What You Need
    5. The Book’s Website
    6. Conventions Used in This Book
    7. Ready, Set, Go!
  6. I. Introduction to CSS
    1. 1. Understanding CSS
      1. What Are Cascading Style Sheets?
        1. Defining Style Sheets
        2. Defining Cascading
      2. The Origin of Cascading Style Sheets
        1. The CSS Specifications
          1. CSS Level 1
          2. CSS Level 2
          3. CSS Level 2.1
        2. Other Style Languages
      3. CSS in Web Design
        1. How CSS Is Used
          1. CSS and HTML
          2. CSS and XML
        2. What CSS Can Do
          1. Text Formatting and Colors
          2. Graphical Appearance and Layout
          3. Dynamic Actions
        3. What CSS Can’t Do
        4. When to Use CSS
        5. Reading W3C Specifications
      4. Browser Support
        1. Workarounds for Browser Limitations
      5. Summary
      6. Workshop
        1. Q&A
        2. Quiz
        3. Answers
    2. 2. Getting Started with CSS
      1. Creating a Style Sheet
        1. Software Tools for CSS
          1. Text Editors
          2. Style Sheet Editors
          3. HTML Editors and Web Development Software
        2. Naming and Saving a Style Sheet
      2. Writing CSS Rules
        1. The Basic Structure of a CSS Rule
          1. The Selector
          2. The Declaration
          3. Properties
          4. Values
        2. Combining CSS Rules
        3. CSS Comments
        4. Simple CSS Properties for Text Formatting
          1. The color Property
          2. The background-color Property
          3. The font-size Property
          4. The font-family Property
          5. A Simple Style Sheet
      3. Linking a Style Sheet to an HTML Page
        1. A Simple HTML Page for Styling
        2. Linked Style Sheets in HTML
      4. Viewing Your Style Sheet
        1. Recommended Browsers
      5. Summary
      6. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercise
    3. 3. Browser Support for CSS
      1. The Browser Problem
        1. How Browsers Deal with CSS
        2. Compliance and Lack Thereof
          1. Ancient Browsers
          2. Broken Browsers
          3. Quirky Browsers
          4. Compliant Browsers
        3. Web Standards and the Acid2 Test
        4. Browser Compatibility Charts
      2. Modern Browsers and CSS
        1. Internet Explorer
          1. Internet Explorer Shells
          2. Older Versions of Internet Explorer
        2. Firefox
          1. Other Gecko-Based Browsers
          2. Older Versions of Netscape
        3. Opera
        4. Safari
          1. Konqueror
          2. WebCore
        5. Other Browsers
          1. Lynx
          2. iCab
          3. Internet Explorer for Macintosh
          4. Screen Readers
      3. Summary
      4. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercise
    4. 4. Using CSS with HTML
      1. Types of HTML
        1. HTML 4.01
          1. Strict
          2. Transitional
          3. Frameset
        2. XHTML
        3. Validating HTML
      2. Style Sheets in HTML
        1. Linked Style Sheets
        2. Embedded Style Sheets
          1. Hiding CSS Code from Older Browsers
        3. Inline Style Attributes
      3. Classes and IDs
        1. The class Attribute in HTML
        2. Class Selectors in CSS
        3. The id Attribute in HTML
        4. id Selectors in CSS
      4. Summary
      5. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercise
  7. II. Core Principles of CSS
    1. 5. Selectors
      1. Simple Selectors
        1. Using class and id Selectors
        2. The Universal Selector
      2. Combining Simple Selectors
        1. Grouping Selectors
        2. Descendant Selectors
      3. Pseudo-Classes and Pseudo-Elements
        1. Simple Pseudo-Classes
          1. The :link and :visited Pseudo-Classes
          2. The :first-child Pseudo-Class
          3. The :lang() Pseudo-Class
        2. Pseudo-Elements in CSS
          1. The :first-line Pseudo-Element
          2. The :first-letter Pseudo-Element
      4. Summary
      5. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercise
    2. 6. The CSS Box Model
      1. Displaying Content in CSS
        1. Types of Elements
          1. Block
          2. Inline
        2. The display Property
      2. Understanding the Box Model
        1. Documents as Trees
        2. Documents as Boxes
      3. Box Display Properties
        1. The margin Property
        2. The border Property
        3. The padding Property
      4. Summary
      5. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercise
    3. 7. Cascading and Inheritance
      1. How the Cascade Works
        1. Order of the Cascade
        2. Cascading and HTML Attributes
        3. Using !important in Rules
      2. User-Defined Style Sheets
      3. Importing CSS
        1. The @import Rule
      4. Inheritance
        1. Inherited Values
        2. Calculated Values
        3. Specifying Inheritance
      5. Summary
      6. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercise
    4. 8. Advanced Selectors
      1. Attribute Selectors
        1. Selecting by Attribute Value
        2. Family Relationships
          1. Child Selectors
          2. Adjacent Sibling Selectors
      2. Summary
      3. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercise
  8. III. Styling Text with CSS
    1. 9. Fonts and Font Families
      1. Specifying Font Properties
        1. The font-weight Property
        2. The font-variant Property
        3. The font-style Property
        4. The font Shorthand Property
      2. Font Families
        1. The Generic Font Families
          1. Serif
          2. Sans-serif
          3. Monospace
          4. Fantasy
          5. Cursive
        2. Commonly Installed Fonts
      3. Summary
      4. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercise
    2. 10. Text Colors and Effects
      1. Text Colors
        1. Specifying Color Values
          1. Color Names
          2. RGB Color Values
        2. Using Color Effectively
      2. Special Text Effects
        1. The text-decoration Property
        2. The text-transform Property
      3. Controlling Text Spacing
        1. The letter-spacing Property
        2. The word-spacing Property
        3. The white-space Property
        4. The line-height Property
      4. Summary
      5. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercises
    3. 11. Backgrounds and Background Colors
      1. Setting Background Color
        1. The background-color Property
          1. Backgrounds and Foregrounds
      2. Using Background Images
        1. The background-image Property
        2. The background-repeat Property
        3. The background-position Property
        4. The background-attachment Property
        5. The background Shorthand Property
      3. Summary
      4. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercises
    4. 12. Styling Links
      1. CSS for Link Styling
        1. The :link and :visited Pseudo-Classes
        2. The :active Pseudo-Class
        3. The :hover Pseudo-Class
        4. The :focus Pseudo-Class
      2. Common Link-Styling Techniques
        1. Replacing HTML <body> Attributes
        2. Removing Underlines
        3. Mouseover Effects
      3. Summary
      4. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercises
    5. 13. Lists
      1. List Formatting
        1. Types of HTML Lists
          1. Ordered (Numbered) Lists
          2. Unordered (Bulleted) Lists
          3. Definition Lists
        2. Changing List Type with display
        3. The list-style-type Property
          1. International List Markers
        4. The list-style-image Property
        5. The list-style-position Property
        6. The list-style Shorthand Property
      2. Summary
      3. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercises
    6. 14. Forms
      1. Styling Form Controls
        1. Labels, Fieldsets, and Legends
        2. Text Input Fields
        3. Buttons
        4. Check Boxes
        5. Selection Lists
      2. Browser Support for Form Styles
        1. Firefox
        2. Opera
        3. Safari
        4. Internet Explorer
      3. Summary
      4. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercise
  9. IV. Layout with CSS
    1. 15. Alignment
      1. Aligning and Indenting Text
        1. The text-align Property
        2. The text-indent Property
        3. The vertical-align Property
      2. Floating Content
        1. The float Property
        2. The clear Property
        3. Thumbnail Galleries
      3. Summary
      4. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercises
    2. 16. Borders and Boxes
      1. Adjusting Boxes
        1. Setting the Margins
        2. Setting the Padding
        3. Setting the Border
          1. Border Width
          2. Border Color
          3. Border Style
      2. Displaying Boxes
        1. The display Property
          1. Hiding Boxes with display: none
          2. Styling Navigation Lists
        2. The visibility Property
      3. Summary
      4. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercise
    3. 17. Styling Tables
      1. Table Formatting
        1. HTML Table Model
        2. CSS Table Layout
          1. Layers and Inheritance
          2. Automatic and Fixed Layouts
        3. Table Borders, Padding, and Spacing
          1. Displaying or Hiding Empty Cells
          2. Collapsing Borders
          3. Separated Borders
        4. Table Captions
        5. Styling Columns
      2. Applying Other Styles to Tables
        1. Horizontal Alignment
        2. Vertical Alignment
      3. Summary
      4. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercise
    4. 18. Box Sizing and Offset
      1. Sizing Content
        1. The width and height Properties
          1. The Internet Explorer width Bug
        2. Minimum and Maximum Dimensions
      2. Content Overflow
        1. The overflow Property
        2. Relative Positioning
        3. The top, right, bottom, and left Properties
      3. Summary
      4. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercise
    5. 19. Absolute and Fixed Positioning
      1. Positioning Content
        1. The Containing Block
      2. Absolute Positioning
        1. Offset Properties in Absolute Positioning
        2. The clip Property
      3. Layered Content
        1. The z-index Property
      4. Fixed Positioning
      5. Summary
      6. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercise
    6. 20. Page Layout in CSS
      1. Laying Out the Page
        1. The Problems with Layout Tables
        2. Writing HTML with Structure
        3. Writing a Layout Style Sheet
          1. Re-Ordering Sections with Positioning Styles
        4. The Floated Columns Layout Technique
      2. Summary
      3. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercises
  10. V. Mastering CSS
    1. 21. Web Design with CSS
      1. Basic Principles of Web Design
        1. Color, Fonts, and Layout
        2. Usability
        3. Knowing Your Audience
        4. Organization and Planning
        5. Testing Your Website
      2. The Role of CSS in Web Design
        1. Style Sheet Organization
        2. Site-wide Style Sheets
      3. Alternate Style Sheets
        1. Browser Support for Alternate Style Sheets
        2. Creating an Alternate Style Sheet
        3. Making Alternate Style Sheets Stick
      4. Summary
      5. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercises
    2. 22. Accessibility and Print Media
      1. What Is Accessibility?
        1. How People with Disabilities Use the Web
        2. CSS Enables Access
        3. Accessibility Standards and CSS
        4. W3C’s Web Content Accessibility Guidelines
          1. U.S. Government’s Section 508
      2. Aural Cascading Style Sheets
        1. Browsers That Understand Aural CSS
        2. Aural CSS Properties
          1. Volume and Voices
          2. Pausing and Cues
          3. Three-Dimensional Sounds
          4. Choosing What to Speak
      3. Media-Specific Style Sheets
        1. Categories of Media Types
        2. Linking and Importing Media-Specific Style Sheets
        3. Using the @media Rule
      4. CSS Properties for the print Medium
        1. Browsers and Printing
        2. Measurements for Printing
        3. Designing CSS for Print
      5. Summary
      6. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercise
    3. 23. User Interface and Generated Content
      1. User Interface Properties
        1. Changing the Cursor Appearance
        2. Creating Outlines
        3. Using the System Colors and Fonts
      2. Creating Content
        1. The :before and :after Pseudo-Classes
        2. The content Property
        3. Adding Text and Images
        4. Generating Quotation Marks
        5. Counters and Numbering
        6. Generating Text Shadows
      3. Summary
      4. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercises
    4. 24. Troubleshooting and Browser Hacks
      1. Troubleshooting Style Sheets
        1. HTML and CSS Validation
        2. Narrowing Your Focus
        3. Ruling Out Browser Bugs
      2. Browser Hacks
        1. Filtering Out Specific Browsers
          1. The Direct Child Selector Filter
          2. The Star HTML Filter
          3. Conditional Comments
        2. Hiding Content Meant for Screen Readers
      3. Proprietary CSS
        1. Opacity
        2. Microsoft’s filter Property
        3. Mozilla Corners
      4. Summary
      5. Workshop
        1. Q&A
        2. Quiz
        3. Answers
        4. Exercise
  11. VI. Appendixes
    1. A. Replacing Presentational HTML with CSS
    2. B. Glossary

Product information

  • Title: Sams Teach Yourself CSS 24 in Hours
  • Author(s): Kynn Bartlett
  • Release date: June 2006
  • Publisher(s): Sams
  • ISBN: 0672329069