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
O'Reilly logo

Sample Design: A Cohesive Web Design

For this sample design, you will convert a web page design into an HTML and CSS design by using several of the solutions discussed in this book.

Setting the Page

The first step is to mark up the document with div elements:

<div id="header" class="">
 <h1><a href="/" title="Home Page">Kirkland Composition &amp;
Copyediting</a></h1>
</div><!-- /#header -->

<hr />

<div id="nav" class="">
 <div id="nav-site">
  <p class="hide">Content Navigation:</p>
  <ul>
   <li id="linkservices"><a href="/services/">Services</a></li>
   <li id="linkrates"><a href="/rates/">Rates</a></li>
   <li id="linkclients"><a href="/clients/">Clients</a></li>
   <li id="linksamples"><a href="/samples">Samples</a></li>
  </ul>
 </div>
 <div id="nav-info">
  <p class="hide">Information Navigation:</p>
  <ul>
   <li><a href="/about/">About</a></li>
   <li><a href="/guarentee/">Guarantee</a></li>
   <li><a href="/contact/">Contact</a></li>
  </ul>
 </div><!-- /#nav-info -->
</div><!-- /#nav -->

<hr />

<div id="content" class="">
 <div id="article">
  [...]
 </div><!-- /#article -->
<div id="aside" class="">
  [...]
 </div><!-- /#aside -->
</div><!-- /#content -->

<hr />

<div id="footer" class="">
 [...]
</div>

Note

I used HTML5 elements as id attribute values where possible. As HTML5 gains wider adoption in browsers, it will be easier to convert completely to the HTML5 DOCTYPE.

The first step is to use a CSS reset (see Resetting Browser-Style Defaults for Elements) to remove out-of-the-box settings by the browser, as shown in ...

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