CSS Cookbook

CSS Cookbook

by Christopher Schmitt
Released August 2004
Publisher(s): O'Reilly Media, Inc.
ISBN: 9780596005764

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.

Buy on Amazon
Start your free trial

Book description

Cascading Style Sheets (CSS) are a powerful way to enrich the presentation of HTML-based web pages, allowing web authors to give their pages a more sophisticated look and more structure. CSS's compact file size helps web pages load quickly, and by allowing changes made in one place to be applied across the entire document, CSS can save hours of tedious changing and updating. But to leverage the full power of CSS, web authors first have to sift through CSS theory to find practical solutions that resolve real-world problems. Web authors can waste hours and earn ulcers trying to find answers to those all-too-common dilemmas that crop up with each project. The CSS Cookbook cuts straight through the theory to provide hundreds of useful examples and CSS code recipes that web authors can use immediately to format their web pages. The time saved by a single one of these recipes will make its cover price money well-spent. But the CSS Cookbook provides more than quick code solutions to pressing problems. The explanation that accompanies each recipe enables readers to customize the formatting for their specific purposes, and shows why the solution works, so you can adapt these techniques to other situations. Recipes range from the basics that every web author needs to code concoctions that will take your web pages to new levels. Reflecting CSS2, the latest specification, and including topics that range from basic web typography and page layout to techniques for formatting lists, forms, and tables, it is easy to see why the CSS Cookbook is regarded as an excellent companion to Cascading Style Sheets: The Definitive Guide and a must-have resource for any web author who has even considered using CSS.

Table of contents

  1. CSS Cookbook
    1. Foreword
    2. Preface
      1. Audience
      2. Assumptions This Book Makes
      3. Contents of This Book
      4. Conventions Used in This Book
      5. Using Code Examples
      6. Comments and Questions
      7. Acknowledgments
    3. 1. Web Typography
      1. Introduction
      2. 1.1. Specifying Fonts and Inheritance
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      3. 1.2. Specifying Font Measurements and Sizes
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      4. 1.3. Enforcing Font Sizes
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      5. 1.4. Setting a Simple Initial Cap
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      6. 1.5. Setting a Larger, Centered Initial Cap
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      7. 1.6. Setting an Initial Cap with Decoration (Imagery)
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      8. 1.7. Creating a Heading with Stylized Text
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      9. 1.8. Creating a Heading with Stylized Text and Borders
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      10. 1.9. Stylizing a Heading with Text and an Image
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      11. 1.10. Creating a Pull Quote with HTML Text
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      12. 1.11. Creating a Pull Quote with Borders
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      13. 1.12. Creating a Pull Quote with Images
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      14. 1.13. Setting the Indent in the First Line of a Paragraph
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      15. 1.14. Setting the Indent of Entire Paragraphs
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      16. 1.15. Setting Text to Be Justified
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      17. 1.16. Styling the First Line of a Paragraph
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      18. 1.17. Styling the First Line of a Paragraph with an Image
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      19. 1.18. Creating a Highlighted Text Effect
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      20. 1.19. Changing Line Spacing
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
    4. 2. Page Elements
      1. Introduction
      2. 2.1. Eliminating Page Margins
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      3. 2.2. Coloring the Scrollbar
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      4. 2.3. Centering Elements on a Web Page
        1. Problem
        2. Solution
        3. Discussion
          1. Tables
          2. Images
          3. Vertical centering
        4. See Also
      5. 2.4. Setting a Background Image
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      6. 2.5. Creating a Line of Background Images
        1. Problem
        2. Solution
        3. See Also
      7. 2.6. Placing a Background Image
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      8. 2.7. Fixing the Background Image
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      9. 2.8. Placing a Page Border
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      10. 2.9. Customizing a Horizontal Rule
        1. Problems
        2. Solution
        3. Discussion
        4. See Also
      11. 2.10. Example Design: Setting Up a Dynamic Splash Page
        1. Main Page
        2. The Splash Screen
        3. Switcher JavaScript
        4. Compatibility
    5. 3. Links and Navigation
      1. Introduction
      2. 3.1. Removing Underlines from Links
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      3. 3.2. Setting Text to Blink
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      4. 3.3. Setting Style Decorations Other Than Underlines
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      5. 3.4. Changing Cursors
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      6. 3.5. Creating Rollovers Without JavaScript
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      7. 3.6. Creating Nongraphical Menus with Rollovers
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      8. 3.7. Creating Collapsible Menus
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      9. 3.8. Building Horizontal Menus
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      10. 3.9. Creating Breadcrumb Navigation
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      11. 3.10. Creating Image-Based Rollovers
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      12. 3.11. Designing a Dynamic Visual Menu
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      13. 3.12. Creating Contextual Menus
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
    6. 4. Lists
      1. Introduction
      2. 4.1. Changing the Format of a List
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      3. 4.2. Writing Cross-Browser Indentation in Lists
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      4. 4.3. Creating Custom Text Markers for Lists
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      5. 4.4. Creating Custom Image Markers for Lists
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      6. 4.5. Creating Inline Lists
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      7. 4.6. Making Hanging Indents in a List
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      8. 4.7. Moving the Marker Inside the List
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
    7. 5. Forms
      1. Introduction
      2. 5.1. Setting Styles for Input Elements
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      3. 5.2. Setting Styles for textarea Elements
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      4. 5.3. Setting Styles for Select and Option Elements
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      5. 5.4. Creating Form Buttons
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      6. 5.5. Setting Up a Submit-Once-Only Button
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      7. 5.6. Designing a Web Form Without Tables
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      8. 5.7. Sample Design: A Login Form
      9. 5.8. Sample Design: A Registration Form
    8. 6. Tables
      1. Introduction
      2. 6.1. Setting the Cell Spacing
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      3. 6.2. Setting the Borders and Cell Padding
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      4. 6.3. Setting the Styles Within Table Cells
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      5. 6.4. Removing Gaps from Table Cells with Images
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      6. 6.5. Setting Styles for Table Header Elements
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      7. 6.6. Sample Design: An Elegant Calendar
    9. 7. Page Layouts
      1. Introduction
      2. 7.1. Developing Hybrid Layouts Using HTML Tables and CSS
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      3. 7.2. Building a One-Column Layout
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      4. 7.3. Building a Two-Column Layout
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      5. 7.4. Building a Two-Column Layout with Fixed-Width Columns
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      6. 7.5. Creating a Flexible Multicolumn Layout with Floats
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      7. 7.6. Creating a Fixed-Width Multicolumn Layout with Floats
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      8. 7.7. Creating a Flexible Multicolumn Layout with Positioning
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      9. 7.8. Creating a Fixed-Width Multicolumn Layout with Positioning
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      10. 7.9. Designing an Asymmetric Layout
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
    10. 8. Print
      1. Introduction
      2. 8.1. Creating a Printer-Friendly Page
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      3. 8.2. Making a Web Form Print-Ready
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      4. 8.3. Inserting URLs After Links
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      5. 8.4. Sample Design: A Printer-Friendly Page with CSS
        1. Setting the Page for Black-and-White Printing
        2. Designing the Main Heading
        3. Styling the Article Header and Byline
        4. Gaining Attention Through the Teaser
        5. Displaying the URLs
        6. Finishing with the Footer
    11. 9. Hacks and Workarounds
      1. Introduction
      2. 9.1. Hiding Certain Styles from Netscape Navigator 4.x
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      3. 9.2. Delivering Alternative Values to Internet Explorer 5.x for Windows
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      4. 9.3. Removing Web Page Flicker in Internet Explorer 5.x for Windows
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      5. 9.4. Keeping Background Images Stationary in Internet Explorer 6 for Windows
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      6. 9.5. Keeping CSS Rules from Internet Explorer 5 for Macintosh
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
    12. 10. Designing with CSS
      1. Introduction
      2. 10.1. Enlarging Text Excessively
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      3. 10.2. Creating Unexpected Incongruity
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      4. 10.3. Combining Unlike Elements to Create Contrast
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      5. 10.4. Leading the Eye with Contrast
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      6. 10.5. Building a Panoramic Image Presentation
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      7. 10.6. Combining Different Image Formats
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      8. 10.7. Making Word Balloons
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      9. 10.8. Emphasizing a Quotation
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
      10. 10.9. Placing a Drop Shadow Behind an Image
        1. Problem
        2. Solution
        3. Discussion
        4. See Also
    13. A. Resources
      1. A.1. Discussion Groups
        1. Babble List
        2. css-discuss
        3. Usenet Stylesheets Newsgroup
          1. news:comp.infosystems.www.authoring.stylesheets
        4. www-style (W3C Style Mailing List)
      2. A.2. References
        1. Meyer’s CSS Support Charts
        2. W3C CSS Page
        3. CSS 2.1 Specification
        4. HTML 4.01 Specification
        5. XHTML 1.0 Specification
      3. A.3. Tools
        1. SelectORacle
        2. W3C CSS Validator
        3. W3C HTML Validator
      4. A.4. Design Resources
        1. Glish.com CSS Layout Techniques
        2. BlueRobot.com Layout Reservoir
        3. Real World Style
        4. A List Apart: CSS Topics
    14. Index
    15. Colophon

Product information

  • Title: CSS Cookbook
  • Author(s): Christopher Schmitt
  • Release date: August 2004
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9780596005764