Css Cookbook: Quick Solutions To Common Css Problems

Foreword; Preface; Audience; Assumptions This Book Makes; Contents of This Book; Conventions Used in This Book; Using Code Examples; We'd Like to Hear from You; Safari® Books Online; Acknowledgments; Chapter 1: Using HTML Basics; 1.1 Introduction; 1.2 Picking a Text Editor; 1.3 Coding a Basic HTML Page; 1.4 Understanding DOCTYPEs and Effects on Browser Layout; 1.5 Marking Up Headers; 1.6 Making Appropriate Quotations; 1.7 Adding an Image; 1.8 Adding Audio with HTML5; 1.9 Incorporating Video with HTML5; 1.10 Using strong and em Effectively; 1.11 Creating Lists; 1.12 Making a Link to a Web Page; 1.13 Coding Tables; 1.14 Creating an HTML vCard (hCard); 1.15 Marking Up an Event (hCalendar); 1.16 Validating HTML; Chapter 2: CSS Basics; 2.1 Introduction; 2.2 Applying CSS Rules to a Web Page; 2.3 Using Basic Selectors to Apply Styles; 2.4 Applying Child Selectors; 2.5 Applying Adjacent Selectors; 2.6 Applying Attribute Selectors; 2.7 Using Pseudo-Classes; 2.8 Using Pseudo-Elements; 2.9 Determining When to Use Class and ID Selectors; 2.10 Understanding CSS Properties; 2.11 Understanding the Box Model; 2.12 Associating Styles to a Web Page; 2.13 Understanding the Origin; 2.14 Understanding the Sort Order Within CSS; 2.15 Using !important to Override Certain CSS Rules; 2.16 Clarifying Specificity; 2.17 Setting Up Different Types of Stylesheets; 2.18 Adding Comments Within Stylesheets; 2.19 Organizing the Contents of a Stylesheet; 2.20 Working with Shorthand Properties; 2.21 Setting Up an Alternate Stylesheet; 2.22 Using Floats; 2.23 Using Self-Clearing Floated Elements; 2.24 Using Absolute Positioning; 2.25 Using Relative Positioning; 2.26 Using Shackling Positioning; 2.27 Stacking Elements with z-index; 2.28 Validating CSS Rules; Chapter 3: Web Typography; 3.1 Introduction; 3.2 Specifying Fonts; 3.3 Using Web-Safe Fonts; 3.4 Setting an Ampersand Flourish; 3.5 Embedding Font Files; 3.6 Forcing a Break on Really Long Words; 3.7 Specifying Font Measurements and Sizes; 3.8 Gaining More Cross-Browser Consistency with Font Sizes; 3.9 Setting Hyphens, Em Dashes, and En Dashes; 3.10 Centering Text; 3.11 Setting Text to Be Justified; 3.12 Indicating an Overflow of Text with an Ellipsis; 3.13 Removing Space Between Headings and Paragraphs; 3.14 Setting a Simple Initial Cap; 3.15 Setting a Larger, Centered Initial Cap; 3.16 Setting an Initial Cap with Decoration (Imagery); 3.17 Creating a Heading with Stylized Text; 3.18 Creating a Heading with Stylized Text and Borders; 3.19 Stylizing a Heading with Text and an Image; 3.20 Creating a Pull Quote with HTML Text; 3.21 Placing a Pull Quote to the Side of a Column; 3.22 Creating a Pull Quote with Borders; 3.23 Creating a Pull Quote with Images; 3.24 Setting the Indent in the First Line of a Paragraph; 3.25 Setting the Indent of Entire Paragraphs; 3.26 Creating a Hanging Indent; 3.27 Styling the First Line of a Paragraph; 3.28 Styling the First Line of a Paragraph with an Image; 3.29 Creating a Highlighted Text Effect; 3.30 Changing the Text Selection Color; 3.31 Changing Line Spacing; 3.32 Adding a Graphic Treatment to HTML Text; 3.33 Placing a Shadow Behind Text; 3.34 Adjusting the Space Between Letters and Words; 3.35 Applying Baseline Rhythm on Web Typography; 3.36 Styling Superscripts and Subscripts Without Messing the Text Baseline; 3.37 Setting Up Multiple Columns of Text; Chapter 4: Images; 4.1 Introduction; 4.2 Transforming Color Images to Black and White in IE with CSS; 4.3 Setting a Border Around an Image; 4.4 Setting a Rounded Border Around an Image; 4.5 Removing Borders Set on Images by Default in Some Browsers; 4.6 Setting a Background Image; 4.7 Creating a Line of Background Images; 4.8 Positioning a Background Image; 4.9 Using Multiple Background Images on One HTML Element; 4.10 Setting Images on a Border; 4.11 Creating a Stationary Background Image; 4.12 Stretching Images As the Browser Resizes; 4.13 Stretching an Image Across the Entire Browser Window; 4.14 Making Images Scalable; 4.15 Setting How a Browser Renders an Image; 4.16 Rotating Images with CSS; 4.17 Setting Gradients with CSS; 4.18 Creating Transparent PNG Images for IE6 and Later; 4.19 Using Transparent PNG Images with JavaScript; 4.20 Overlaying HTML Text on an Image; 4.21 Replacing HTML Text with an Image; 4.22 Building a Panoramic Image Presentation; 4.23 Combining Different Image Formats; 4.24 Rounding Corners with Fixed-Width Columns; 4.25 Rounding Corners (Sliding Doors Technique); 4.26 Rounding Corners (Mountaintop Technique); 4.27 Rounding Corners with JavaScript; 4.28 Setting a Shadow on an Element with CSS; 4.29 Placing a Drop Shadow Behind an Image; 4.30 Placing a Smooth Drop Shadow Behind an Image; 4.31 Making Word Balloons; 4.32 Hindering People from Stealing Your Images; 4.33 Inserting Reflections on Images Automatically; 4.34 Using Image Sprites; 4.35 Clipping Background Images; 4.36 Applying Masks to Images and Borders; Chapter 5: Page Elements; 5.1 Introduction; 5.2 Eliminating Page Margins; 5.3 Resetting Browser-Style Defaults for Elements; 5.4 Coloring the Scroll Bar in IE; 5.5 Techniques for Centering Elements on a Web Page; 5.6 Placing a Page Border; 5.7 Placing a Border Around the Browser's Viewport; 5.8 Customizing a Horizontal Rule; 5.9 Adding a Lightbox; 5.10 Changing the Opacity on Elements; 5.11 Adjusting the Opacity of Background Colors; Chapter 6: Lists; 6.1 Introduction; 6.2 Changing the Format of a List; 6.3 Changing the Color of a List Bullet; 6.4 Writing Cross-Browser Indentation in Lists; 6.5 Placing Dividers Between List Items; 6.6 Creating Custom Text Markers for Lists; 6.7 Creating Custom Image Markers for Lists; 6.8 Inserting Larger Custom Image Markers for Lists; 6.9 Making a List Presentation Rich with Imagery; 6.10 Creating Inline Lists; 6.11 Making Hanging Indents in a List; 6.12 Moving the Marker Inside the List; 6.13 Styling a Definition List; 6.14 Styling a Screenplay with the HTML5 dialog Element; 6.15 Turning a List into a Directory Tree; 6.16 Creating a Star Ranking System; Chapter 7: Links and Navigation; 7.1 Introduction; 7.2 Easily Generating Text-Based Menus and Submenus; 7.3 Removing Underlines from Links (and Adding Other Styles); 7.4 Changing Link Colors; 7.5 Removing Dotted Lines When Clicking on a Link in Internet Explorer; 7.6 Changing Link Colors in Different Sections of a Page; 7.7 Placing Icons at the End of Different Kinds of Links; 7.8 Changing Cursors; 7.9 Creating Rollovers Without JavaScript; 7.10 Animating Rollovers on Links with CSS3 Transitions; 7.11 Creating Text Navigation Menus and Rollovers; 7.12 Adding Submenus to Vertical Menus; 7.13 Building Horizontal Navigation Menus; 7.14 Building Horizontal Navigation Menus with Drop-Down Menus; 7.15 Building a Navigation Menu with Access Keys; 7.16 Creating Breadcrumb Navigation; 7.17 Creating Image-Based Rollovers; 7.18 Creating Collapsible Menus; 7.19 Creating Contextual Menus; 7.20 Making Tool Tips with the title Attribute; 7.21 Designing a Dynamic Tabbed Menu; 7.22 Changing Styles on Anchored Links; Chapter 8: Forms; 8.1 Introduction; 8.2 Modifying the Spacing Around a Form; 8.3 Removing the Space Around a Form; 8.4 Setting Styles for Input Elements; 8.5 Changing Styles on Form Elements When a User Clicks on Them; 8.6 Applying Different Styles to Different Input Elements in the Same Form; 8.7 Setting Styles for textarea Elements; 8.8 Setting Styles for select and option Elements; 8.9 Creating a Macintosh-Styled Search Field; 8.10 Styling Form Buttons; 8.11 Creating an Image Submit Button; 8.12 Setting Up a Submit-Once-Only Button; 8.13 Creating a Submit Button That Looks Like HTML Text; 8.14 Making an HTML Text Link Operate Like a Submit Button; 8.15 Designing a Web Form Without Tables; 8.16 Designing a Two-Column Form Without Tables; 8.17 Integrating Form Feedback with a Form; 8.18 Styling Access Keys in Web Forms; 8.19 Grouping Common Form Elements; 8.20 Entering Data into a Form That Is Similar to a Spreadsheet; 8.21 Sample Design: A Login Form; 8.22 Sample Design: A Registration Form; Chapter 9: Tables; 9.1 Introduction; 9.2 Setting the Borders and Cell Padding for Tables; 9.3 Setting the Cell Spacing; 9.4 Setting the Style for Captions; 9.5 Setting the Styles Within Table Cells; 9.6 Setting the Styles for Table Header Elements; 9.7 Removing Gaps from Images Placed in Table Cells; 9.8 Eliminating Gaps Between Table Cells; 9.9 Creating Alternating Background Colors in Table Rows; 9.10 Adding a Highlighting Effect on a Table Row; 9.11 Sample Design: An Elegant Calendar; Chapter 10: Designing Web Pages for Printing; 10.1 Introduction; 10.2 Applying a Stylesheet for Printing to a Web Page; 10.3 Replacing a Color Logo for a Black-and-White Logo When Printing Web Pages; 10.4 Making a Web Form Print-Ready; 10.5 Displaying URIs After Links; 10.6 Inserting Special Characters Before Links; 10.7 Setting Page Breaks for a Printed Document; 10.8 Sample Design: A Printer-Friendly Page with CSS; Chapter 11: Page Layouts; 11.1 Introduction; 11.2 Building a One-Column Layout; 11.3 Building a Two-Column Layout; 11.4 Building a Two-Column Layout with Fixed-Width Columns; 11.5 Creating a Flexible Multicolumn Layout with Floats; 11.6 Creating a Fixed-Width Multicolumn Layout with Floats; 11.7 Creating a Flexible Multicolumn Layout with Positioning; 11.8 Creating a Fixed-Width Multicolumn Layout with Positioning; 11.9 Using Floats to Display Columns in Any Order; 11.10 Designing an Asymmetric Layout; 11.11 Designing Resolution-Independent Layouts; Chapter 12: Hacks, Workarounds, and Troubleshooting; 12.1 Introduction; 12.2 Overriding Inline Styles; 12.3 Diagnosing CSS Bugs and Browser Issues; 12.4 Using Bookmarklets to Troubleshoot CSS; 12.5 Using Browser Extensions to Troubleshoot CSS; 12.6 Patching Up Internet Explorer 6; 12.7 Patching Up Internet Explorer 6 with JavaScript; 12.8 Using Conditional Comments to Deliver Styles to Different Versions of Internet Explorer; 12.9 Using CSS Filters to Deliver CSS Rules to Almost Any Browser; 12.10 Setting Up an Intelligent CSS Delivery System for Modern Browsers; 12.11 Testing a Site Design on More Than One Platform with Only One Computer; 12.12 Testing a Website with a Text Browser; Chapter 13: Designing with CSS; 13.1 Introduction; 13.2 Enlarging Text Excessively; 13.3 Creating Unexpected Incongruity; 13.4 Combining Unlike Elements to Create Contrast; 13.5 Leading the Eye with Contrast; 13.6 Checking for Enough Color Contrast; 13.7 Emphasizing a Quotation with Smart Quotes; 13.8 Setting a Moving Background Scene When a User Resizes the Window; 13.9 Adding Animation to Elements on a Page; 13.10 Creating a Fireworks Display As a User Scrolls; 13.11 Customizing the View Source Stylesheet for Firefox; 13.12 Designing with Grids (CSS Frameworks); 13.13 Sample Design: A Cohesive Web Design; 13.14 Sample Design: The U.S. Flag; Chapter 14: Interacting with JavaScript; 14.1 Introduction; 14.2 Determining Whether JavaScript Is Available Within a Browser; 14.3 Applying a Different Stylesheet Based on the Time of Day; 14.4 Redirecting to a Mobile Site Based on the Browser's Screen Width; 14.5 Adding a JavaScript Framework to a Web Page; 14.6 Using CSS3 Selectors in IE6 and IE7; 14.7 Zebra-Striping an HTML Table with JavaScript; 14.8 Highlighting a Table Row with Mouseovers; 14.9 Adding Effects to Simple Image Rollovers; 14.10 Making a Row of Elements with a Variable Amount of Content the Same Height; 14.11 Setting a Link to Open a New Window; 14.12 Making an Entire div Element Clickable; 14.13 Supporting Transparent PNGs in IE6 with JavaScript; 14.14 Delivering HTML5 and CSS3 to Browsers That Can Handle Them; Resources; General HTML and CSS Instruction; Design Resources; Discussion Groups; References; Tools; CSS 2.1 Properties and Proprietary Extensions; CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements; CSS3 Selectors and Pseudo-Classes; Styling of Form Elements; Anatomy of the Appendix; Tested CSS Properties; Colophon;