You are previewing CSS Cookbook, 3rd Edition.

CSS Cookbook, 3rd Edition

Cover of CSS Cookbook, 3rd Edition by Christopher Schmitt Published by O'Reilly Media, Inc.
  1. CSS Cookbook
  2. A Note Regarding Supplemental Files
  3. Foreword
  4. Preface
    1. Audience
    2. Assumptions This Book Makes
    3. Contents of This Book
    4. Conventions Used in This Book
    5. Using Code Examples
    6. We’d Like to Hear from You
    7. Safari® Books Online
    8. Acknowledgments
  5. 1. Using HTML Basics
    1. Introduction
    2. Picking a Text Editor
    3. Coding a Basic HTML Page
    4. Understanding DOCTYPEs and Effects on Browser Layout
    5. Marking Up Headers
    6. Making Appropriate Quotations
    7. Adding an Image
    8. Adding Audio with HTML5
    9. Incorporating Video with HTML5
    10. Using strong and em Effectively
    11. Creating Lists
    12. Making a Link to a Web Page
    13. Coding Tables
    14. Creating an HTML vCard (hCard)
    15. Marking Up an Event (hCalendar)
    16. Validating HTML
  6. 2. CSS Basics
    1. Introduction
    2. Applying CSS Rules to a Web Page
    3. Using Basic Selectors to Apply Styles
    4. Applying Child Selectors
    5. Applying Adjacent Selectors
    6. Applying Attribute Selectors
    7. Using Pseudo-Classes
    8. Using Pseudo-Elements
    9. Determining When to Use Class and ID Selectors
    10. Understanding CSS Properties
    11. Understanding the Box Model
    12. Associating Styles to a Web Page
    13. Understanding the Origin
    14. Understanding the Sort Order Within CSS
    15. Using !important to Override Certain CSS Rules
    16. Clarifying Specificity
    17. Setting Up Different Types of Stylesheets
    18. Adding Comments Within Stylesheets
    19. Organizing the Contents of a Stylesheet
    20. Working with Shorthand Properties
    21. Setting Up an Alternate Stylesheet
    22. Using Floats
    23. Using Self-Clearing Floated Elements
    24. Using Absolute Positioning
    25. Using Relative Positioning
    26. Using Shackling Positioning
    27. Stacking Elements with z-index
    28. Validating CSS Rules
  7. 3. Web Typography
    1. Introduction
    2. Specifying Fonts
    3. Using Web-Safe Fonts
    4. Setting an Ampersand Flourish
    5. Embedding Font Files
    6. Forcing a Break on Really Long Words
    7. Specifying Font Measurements and Sizes
    8. Gaining More Cross-Browser Consistency with Font Sizes
    9. Setting Hyphens, Em Dashes, and En Dashes
    10. Centering Text
    11. Setting Text to Be Justified
    12. Indicating an Overflow of Text with an Ellipsis
    13. Removing Space Between Headings and Paragraphs
    14. Setting a Simple Initial Cap
    15. Setting a Larger, Centered Initial Cap
    16. Setting an Initial Cap with Decoration (Imagery)
    17. Creating a Heading with Stylized Text
    18. Creating a Heading with Stylized Text and Borders
    19. Stylizing a Heading with Text and an Image
    20. Creating a Pull Quote with HTML Text
    21. Placing a Pull Quote to the Side of a Column
    22. Creating a Pull Quote with Borders
    23. Creating a Pull Quote with Images
    24. Setting the Indent in the First Line of a Paragraph
    25. Setting the Indent of Entire Paragraphs
    26. Creating a Hanging Indent
    27. Styling the First Line of a Paragraph
    28. Styling the First Line of a Paragraph with an Image
    29. Creating a Highlighted Text Effect
    30. Changing the Text Selection Color
    31. Changing Line Spacing
    32. Adding a Graphic Treatment to HTML Text
    33. Placing a Shadow Behind Text
    34. Adjusting the Space Between Letters and Words
    35. Applying Baseline Rhythm on Web Typography
    36. Styling Superscripts and Subscripts Without Messing the Text Baseline
    37. Setting Up Multiple Columns of Text
  8. 4. Images
    1. Introduction
    2. Transforming Color Images to Black and White in IE with CSS
    3. Setting a Border Around an Image
    4. Setting a Rounded Border Around an Image
    5. Removing Borders Set on Images by Default in Some Browsers
    6. Setting a Background Image
    7. Creating a Line of Background Images
    8. Positioning a Background Image
    9. Using Multiple Background Images on One HTML Element
    10. Setting Images on a Border
    11. Creating a Stationary Background Image
    12. Stretching Images As the Browser Resizes
    13. Stretching an Image Across the Entire Browser Window
    14. Making Images Scalable
    15. Setting How a Browser Renders an Image
    16. Rotating Images with CSS
    17. Setting Gradients with CSS
    18. Creating Transparent PNG Images for IE6 and Later
    19. Using Transparent PNG Images with JavaScript
    20. Overlaying HTML Text on an Image
    21. Replacing HTML Text with an Image
    22. Building a Panoramic Image Presentation
    23. Combining Different Image Formats
    24. Rounding Corners with Fixed-Width Columns
    25. Rounding Corners (Sliding Doors Technique)
    26. Rounding Corners (Mountaintop Technique)
    27. Rounding Corners with JavaScript
    28. Setting a Shadow on an Element with CSS
    29. Placing a Drop Shadow Behind an Image
    30. Placing a Smooth Drop Shadow Behind an Image
    31. Making Word Balloons
    32. Hindering People from Stealing Your Images
    33. Inserting Reflections on Images Automatically
    34. Using Image Sprites
    35. Clipping Background Images
    36. Applying Masks to Images and Borders
  9. 5. Page Elements
    1. Introduction
    2. Eliminating Page Margins
    3. Resetting Browser-Style Defaults for Elements
    4. Coloring the Scroll Bar in IE
    5. Techniques for Centering Elements on a Web Page
    6. Placing a Page Border
    7. Placing a Border Around the Browser’s Viewport
    8. Customizing a Horizontal Rule
    9. Adding a Lightbox
    10. Changing the Opacity on Elements
    11. Adjusting the Opacity of Background Colors
  10. 6. Lists
    1. Introduction
    2. Changing the Format of a List
    3. Changing the Color of a List Bullet
    4. Writing Cross-Browser Indentation in Lists
    5. Placing Dividers Between List Items
    6. Creating Custom Text Markers for Lists
    7. Creating Custom Image Markers for Lists
    8. Inserting Larger Custom Image Markers for Lists
    9. Making a List Presentation Rich with Imagery
    10. Creating Inline Lists
    11. Making Hanging Indents in a List
    12. Moving the Marker Inside the List
    13. Styling a Definition List
    14. Styling a Screenplay with the HTML5 dialog Element
    15. Turning a List into a Directory Tree
    16. Creating a Star Ranking System
  11. 7. Links and Navigation
    1. Introduction
    2. Easily Generating Text-Based Menus and Submenus
    3. Removing Underlines from Links (and Adding Other Styles)
    4. Changing Link Colors
    5. Removing Dotted Lines When Clicking on a Link in Internet Explorer
    6. Changing Link Colors in Different Sections of a Page
    7. Placing Icons at the End of Different Kinds of Links
    8. Changing Cursors
    9. Creating Rollovers Without JavaScript
    10. Animating Rollovers on Links with CSS3 Transitions
    11. Creating Text Navigation Menus and Rollovers
    12. Adding Submenus to Vertical Menus
    13. Building Horizontal Navigation Menus
    14. Building Horizontal Navigation Menus with Drop-Down Menus
    15. Building a Navigation Menu with Access Keys
    16. Creating Breadcrumb Navigation
    17. Creating Image-Based Rollovers
    18. Creating Collapsible Menus
    19. Creating Contextual Menus
    20. Making Tool Tips with the title Attribute
    21. Designing a Dynamic Tabbed Menu
    22. Changing Styles on Anchored Links
  12. 8. Forms
    1. Introduction
    2. Modifying the Spacing Around a Form
    3. Removing the Space Around a Form
    4. Setting Styles for Input Elements
    5. Changing Styles on Form Elements When a User Clicks on Them
    6. Applying Different Styles to Different Input Elements in the Same Form
    7. Setting Styles for textarea Elements
    8. Setting Styles for select and option Elements
    9. Creating a Macintosh-Styled Search Field
    10. Styling Form Buttons
    11. Creating an Image Submit Button
    12. Setting Up a Submit-Once-Only Button
    13. Creating a Submit Button That Looks Like HTML Text
    14. Making an HTML Text Link Operate Like a Submit Button
    15. Designing a Web Form Without Tables
    16. Designing a Two-Column Form Without Tables
    17. Integrating Form Feedback with a Form
    18. Styling Access Keys in Web Forms
    19. Grouping Common Form Elements
    20. Entering Data into a Form That Is Similar to a Spreadsheet
    21. Sample Design: A Login Form
    22. Sample Design: A Registration Form
  13. 9. Tables
    1. Introduction
    2. Setting the Borders and Cell Padding for Tables
    3. Setting the Cell Spacing
    4. Setting the Style for Captions
    5. Setting the Styles Within Table Cells
    6. Setting the Styles for Table Header Elements
    7. Removing Gaps from Images Placed in Table Cells
    8. Eliminating Gaps Between Table Cells
    9. Creating Alternating Background Colors in Table Rows
    10. Adding a Highlighting Effect on a Table Row
    11. Sample Design: An Elegant Calendar
  14. 10. Designing Web Pages for Printing
    1. Introduction
    2. Applying a Stylesheet for Printing to a Web Page
    3. Replacing a Color Logo for a Black-and-White Logo When Printing Web Pages
    4. Making a Web Form Print-Ready
    5. Displaying URIs After Links
    6. Inserting Special Characters Before Links
    7. Setting Page Breaks for a Printed Document
    8. Sample Design: A Printer-Friendly Page with CSS
  15. 11. Page Layouts
    1. Introduction
    2. Building a One-Column Layout
    3. Building a Two-Column Layout
    4. Building a Two-Column Layout with Fixed-Width Columns
    5. Creating a Flexible Multicolumn Layout with Floats
    6. Creating a Fixed-Width Multicolumn Layout with Floats
    7. Creating a Flexible Multicolumn Layout with Positioning
    8. Creating a Fixed-Width Multicolumn Layout with Positioning
    9. Using Floats to Display Columns in Any Order
    10. Designing an Asymmetric Layout
    11. Designing Resolution-Independent Layouts
  16. 12. Hacks, Workarounds, and Troubleshooting
    1. Introduction
    2. Overriding Inline Styles
    3. Diagnosing CSS Bugs and Browser Issues
    4. Using Bookmarklets to Troubleshoot CSS
    5. Using Browser Extensions to Troubleshoot CSS
    6. Patching Up Internet Explorer 6
    7. Patching Up Internet Explorer 6 with JavaScript
    8. Using Conditional Comments to Deliver Styles to Different Versions of Internet Explorer
    9. Using CSS Filters to Deliver CSS Rules to Almost Any Browser
    10. Setting Up an Intelligent CSS Delivery System for Modern Browsers
    11. Testing a Site Design on More Than One Platform with Only One Computer
    12. Testing a Website with a Text Browser
  17. 13. Designing with CSS
    1. Introduction
    2. Enlarging Text Excessively
    3. Creating Unexpected Incongruity
    4. Combining Unlike Elements to Create Contrast
    5. Leading the Eye with Contrast
    6. Checking for Enough Color Contrast
    7. Emphasizing a Quotation with Smart Quotes
    8. Setting a Moving Background Scene When a User Resizes the Window
    9. Adding Animation to Elements on a Page
    10. Creating a Fireworks Display As a User Scrolls
    11. Customizing the View Source Stylesheet for Firefox
    12. Designing with Grids (CSS Frameworks)
    13. Sample Design: A Cohesive Web Design
    14. Sample Design: The U.S. Flag
  18. 14. Interacting with JavaScript
    1. Introduction
    2. Determining Whether JavaScript Is Available Within a Browser
    3. Applying a Different Stylesheet Based on the Time of Day
    4. Redirecting to a Mobile Site Based on the Browser’s Screen Width
    5. Adding a JavaScript Framework to a Web Page
    6. Using CSS3 Selectors in IE6 and IE7
    7. Zebra-Striping an HTML Table with JavaScript
    8. Highlighting a Table Row with Mouseovers
    9. Adding Effects to Simple Image Rollovers
    10. Making a Row of Elements with a Variable Amount of Content the Same Height
    11. Setting a Link to Open a New Window
    12. Making an Entire div Element Clickable
    13. Supporting Transparent PNGs in IE6 with JavaScript
    14. Delivering HTML5 and CSS3 to Browsers That Can Handle Them
  19. A. Resources
    1. General HTML and CSS Instruction
    2. Design Resources
    3. References
    4. Tools
  20. B. CSS 2.1 Properties and Proprietary Extensions
  21. C. CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements
  22. D. CSS3 Selectors and Pseudo-Classes
  23. E. Styling of Form Elements
    1. Anatomy of the Appendix
    2. Tested CSS Properties
  24. Index
  25. About the Author
  26. Colophon
  27. Copyright

Understanding DOCTYPEs and Effects on Browser Layout


You want to make your web page standards compliant and valid.


HTML 4.01 has three document types: Strict, Transitional, and Frameset.

Both HTML5 and XHTML 1.1 have one document type, but XHTML 1.0, like HTML 4.01, has three.

Only one document type definition (DTD) appears in the HTML document. Use any one of the following DOCTYPEs that best fits your project needs.

HTML 4.01 Strict DTD:


HTML 4.01 Transitional DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

HTML 4.01 Frameset DTD:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"


<!DOCTYPE html>

XHTML 1.0 Strict DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

XHTML 1.0 Transitional DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

XHTML 1.0 Frameset DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"



Here’s a basic page with the HTML5 DTD and the required head, body, and html elements:

<!DOCTYPE html>
  <title>CSS Cookbook</title>
  <h1>My Basic Web Page</h1>
  <p>Epsum factorial non deposit quid pro quo hic escorol.</p>


A DOCTYPE, short for document type definition, defines an HTML or XHTML document’s building blocks and tells the browsers and validators which version of HTML or XHTML your document uses.

The DOCTYPE declaration must appear at the beginning of every web page document, before the html element, to ensure that your markup and CSS are standards compliant and that browsers handle the pages based on the appropriate DTDs.

Quirks mode

XHTML requires a valid DOCTYPE at the top of the document; otherwise, the pages won’t validate and the browsers will fall back into what is known as quirks mode.

Quirks mode occurs when a browser treats a web page as “buggy.” As a result, such pages are treated as though they were written in invalid markup, and therefore will be improperly rendered in modern browsers even if the XHTML and CSS are coded perfectly.

A web page that is without a DOCTYPE, with an older DOCTYPE, or with a typo-riddled DOCTYPE triggers quirks mode. So, when coding pages, make sure to check that the DOCTYPE is both added to the page and typed correctly to ensure that browsers do not render pages in quirks mode.


If a web page has an HTML5 DOCTYPE, modern browsers will trigger standards mode, even though the actual markup isn’t coded with HTML5 elements. Internet Explorer for Windows 6 and 7 ignores HTML5 features.

Figures 1-2 and 1-3 show how a table contained within a div with a width of 100% goes into quirks mode in Internet Explorer 6, and how the page should look in standards mode.

Why not use the latest DOCTYPE?

Using newer DOCTYPEs such as HTML5 is an option. However, it’s not the only option. Unlike software application releases, newer DOCTYPEs don’t make older DOCTYPEs moot.

For example, you would be hard-pressed to install, much less run, Photoshop 4 on today’s computers. However, you can still use HTML4 syntax and DOCTYPEs without fear of browsers not rendering your content.

Table width in Internet Explorer 6 in quirks mode with no DOCTYPE included

Figure 1-2. Table width in Internet Explorer 6 in quirks mode with no DOCTYPE included

Table width in Firefox 1.5 in standards mode with HTML 4.01 Strict DOCTYPE

Figure 1-3. Table width in Firefox 1.5 in standards mode with HTML 4.01 Strict DOCTYPE

The smallest web page ever

The Solution provides an example of a relatively short HTML5 page. However, an even shorter and valid example can be made:

<!DOCTYPE html>
<title>Small HTML5</title>
<p>Hello world</p

These three HTML elements validate for HTML5 by checking out the page at

See Also

HTML5 specification for DTD at; HTML 4.01 specification for DTD at; W3C validators at; DOCTYPEs article from A List Apart at; Article from QuirksMode at; Mozilla’s information on quirks mode, which explains the differences between the rendering modes and how it handles quirks mode, at's_Quirks_Mode; Opera’s DOCTYPE page at

The best content for your career. Discover unlimited learning on demand for around $1/day.