CSS Cookbook by Schmitt, Christopher -- Read -- Imperial Library of Trantor

Index

CSS Cookbook SPECIAL OFFER: Upgrade this ebook with O’Reilly A Note Regarding Supplemental Files 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

1. Using HTML Basics

Introduction

Structuring Documents Semantic Markup Avoiding Old-Tag Soup HTML Is Document Structure

Picking a Text Editor

Problem Solution Discussion

More robust, still free IDE solutions

See Also

Coding a Basic HTML Page

Problem Solution Discussion See Also

Understanding DOCTYPEs and Effects on Browser Layout

Problem Solution Discussion

Quirks mode Why not use the latest DOCTYPE? The smallest web page ever

See Also

Marking Up Headers

Problem Solution Discussion See Also

Making Appropriate Quotations

Problem Solution Discussion See Also

Adding an Image

Problem Solution Discussion

Additional tips File formats Character case sensitivity

See Also

Adding Audio with HTML5

Problem Solution Discussion

Audio compatibility

See Also

Incorporating Video with HTML5

Problem Solution Discussion See Also

Using strong and em Effectively

Problem Solution Discussion See Also

Creating Lists

Problem Solution Discussion See Also

Making a Link to a Web Page

Problem Solution Discussion

Linking to another web page on the same site Moving up folders Using the root relative link Linking to certain elements within a web page

See Also

Coding Tables

Problem Solution Discussion See Also

Creating an HTML vCard (hCard)

Problem Solution Discussion

Extending hCards

See Also

Marking Up an Event (hCalendar)

Problem Solution Discussion See Also

Validating HTML

Problem Solution Discussion

Creating an HTML validator bookmarklet

See Also

2. CSS Basics

Introduction Applying CSS Rules to a Web Page

Problem Solution Discussion

Wrapping the CSS rules

See Also

Using Basic Selectors to Apply Styles

Problem Solution Discussion

Type selectors Class selectors ID selectors Descendant selectors Universal selectors

See Also

Applying Child Selectors

Problem Solution Discussion See Also

Applying Adjacent Selectors

Problem Solution Discussion See Also

Applying Attribute Selectors

Problem Solution Discussion See Also

Using Pseudo-Classes

Problem Solution Discussion

CSS3 pseudo-classes

See Also

Using Pseudo-Elements

Problem Solution Discussion See Also

Determining When to Use Class and ID Selectors

Problem Solution Discussion

HTML5 divisions

See Also

Understanding CSS Properties

Problem Solution Discussion See Also

Understanding the Box Model

Problem Solution Discussion See Also

Associating Styles to a Web Page

Problem Solution Discussion

When to use inline styles When to use internal stylesheets

See Also

Understanding the Origin

Problem Solution Discussion See Also

Understanding the Sort Order Within CSS

Problem Solution Discussion See Also

Using !important to Override Certain CSS Rules

Problem Solution Discussion

The user controls his experience

See Also

Clarifying Specificity

Problem Solution Discussion See Also

Setting Up Different Types of Stylesheets

Problem Solution Discussion See Also

Adding Comments Within Stylesheets

Problem Solution Discussion See Also

Organizing the Contents of a Stylesheet

Problem Solution Discussion See Also

Working with Shorthand Properties

Problem Solution Discussion See Also

Setting Up an Alternate Stylesheet

Problem Solution Discussion See Also

Using Floats

Problem Solution Discussion See Also

Using Self-Clearing Floated Elements

Problem Solution Discussion

Self-clearing floats Using overflow

See Also

Using Absolute Positioning

Problem Solution Discussion See Also

Using Relative Positioning

Problem Solution Discussion See Also

Using Shackling Positioning

Problem Solution Discussion See Also

Stacking Elements with z-index

Problem Solution Discussion See Also

Validating CSS Rules

Problem Solution Discussion

Creating a CSS validator bookmarklet

See Also

3. Web Typography

Introduction Specifying Fonts

Problem Solution Discussion

Problem finding fonts Inheriting fonts throughout a web page

See Also

Using Web-Safe Fonts

Problem Solution Discussion

Extending web-safe font listings More robust stacking

See Also

Setting an Ampersand Flourish

Problem Solution Discussion

Styling ampersands

See Also

Embedding Font Files

Problem Solution Discussion

Creating cross-browser embedding The problem with embedded fonts Third-party workaround Other techniques

See Also

Forcing a Break on Really Long Words

Problem Solution Discussion See Also

Specifying Font Measurements and Sizes

Problem Solution Discussion

Length units Relative units Setting the size of fonts to 0 or a negative value

See Also

Gaining More Cross-Browser Consistency with Font Sizes

Problem Solution Discussion

Using pixels Using font keywords Using em units to control type

See Also

Setting Hyphens, Em Dashes, and En Dashes

Problem Solution Discussion See Also

Centering Text

Problem Solution Discussion See Also

Setting Text to Be Justified

Problem Solution Discussion See Also

Indicating an Overflow of Text with an Ellipsis

Problem Solution Discussion See Also

Removing Space Between Headings and Paragraphs

Problem Solution Discussion See Also

Setting a Simple Initial Cap

Problem Solution Discussion See Also

Setting a Larger, Centered Initial Cap

Problem Solution Discussion See Also

Setting an Initial Cap with Decoration (Imagery)

Problem Solution Discussion

Allow for accessibility

See Also

Creating a Heading with Stylized Text

Problem Solution Discussion See Also

Creating a Heading with Stylized Text and Borders

Problem Solution Discussion See Also

Stylizing a Heading with Text and an Image

Problem Solution Discussion See Also

Creating a Pull Quote with HTML Text

Problem Solution Discussion See Also

Placing a Pull Quote to the Side of a Column

Problem Solution Discussion See Also

Creating a Pull Quote with Borders

Problem Solution Discussion See Also

Creating a Pull Quote with Images

Problem Solution Discussion See Also

Setting the Indent in the First Line of a Paragraph

Problem Solution Discussion See Also

Setting the Indent of Entire Paragraphs

Problem Solution Discussion See Also

Creating a Hanging Indent

Problem Solution Discussion

Hanging indents safely The paired hanging indent

See Also

Styling the First Line of a Paragraph

Problem Solution Discussion See Also

Styling the First Line of a Paragraph with an Image

Problem Solution Discussion See Also

Creating a Highlighted Text Effect

Problem Solution Discussion See Also

Changing the Text Selection Color

Problem Solution Discussion See Also

Changing Line Spacing

Problem Solution Discussion See Also

Adding a Graphic Treatment to HTML Text

Problem Solution Discussion See Also

Placing a Shadow Behind Text

Problem Solution Discussion

Setting the opacity of the shadow Creating a bevel look Add a red flame to the top of text Known support Text shadow for Internet Explorer

See Also

Adjusting the Space Between Letters and Words

Problem Solution Discussion

Kerning and tracking Best practices

See Also

Applying Baseline Rhythm on Web Typography

Problem Solution Discussion See Also

Styling Superscripts and Subscripts Without Messing the Text Baseline

Problem Solution Discussion See Also

Setting Up Multiple Columns of Text

Problem Solution Discussion

Known issues

See Also

4. Images

Introduction Transforming Color Images to Black and White in IE with CSS

Problem Solution Discussion See Also

Setting a Border Around an Image

Problem Solution Discussion See Also

Setting a Rounded Border Around an Image

Problem Solution Discussion

Specifying corners Known issues

See Also

Removing Borders Set on Images by Default in Some Browsers

Problem Solution Discussion See Also

Setting a Background Image

Problem Solution Discussion See Also

Creating a Line of Background Images

Problem Solution Discussion See Also

Positioning a Background Image

Problem Solution Discussion See Also

Using Multiple Background Images on One HTML Element

Problem Solution Discussion

Shorthand properties Not ready for everyday use

See Also

Setting Images on a Border

Problem Solution Discussion See Also

Creating a Stationary Background Image

Problem Solution Discussion See Also

Stretching Images As the Browser Resizes

Problem Solution Discussion See Also

Stretching an Image Across the Entire Browser Window

Problem Solution Discussion

Using background-size Using an iframe

See Also

Making Images Scalable

Problem Solution Discussion

Keeping images from expanding

See Also

Setting How a Browser Renders an Image

Problem Solution Discussion

Smoothing images for Internet Explorer

See Also

Rotating Images with CSS

Problem Solution Discussion See Also

Setting Gradients with CSS

Problem Solution Discussion

Setting gradients in Safari Setting gradients in Firefox Transparency with gradients

See Also

Creating Transparent PNG Images for IE6 and Later

Problem Solution Discussion See Also

Using Transparent PNG Images with JavaScript

Problem Solution Discussion

How the script works

See Also

Overlaying HTML Text on an Image

Problem Solution Discussion See Also

Replacing HTML Text with an Image

Problem Solution Discussion

Fahrner Image Replacement method

Problem with the FIR method

Phark image replacement method

Problem with the Phark method

CSS3 approach to image replacement

See Also

Building a Panoramic Image Presentation

Problem Solution Discussion See Also

Combining Different Image Formats

Problem Solution Discussion See Also

Rounding Corners with Fixed-Width Columns

Problem Solution Discussion

Flexible widths

See Also

Rounding Corners (Sliding Doors Technique)

Problem Solution Discussion See Also

Rounding Corners (Mountaintop Technique)

Problem Solution Discussion See Also

Rounding Corners with JavaScript

Problem Solution Discussion

Different colors Different sizes Different elements Specific corners

See Also

Setting a Shadow on an Element with CSS

Problem Solution Discussion See Also

Placing a Drop Shadow Behind an Image

Problem Solution Discussion See Also

Placing a Smooth Drop Shadow Behind an Image

Problem Solution Discussion See Also

Making Word Balloons

Problem Solution Discussion See Also

Hindering People from Stealing Your Images

Problem Solution Discussion

Microsoft’s Image Toolbar No images are safe

See Also

Inserting Reflections on Images Automatically

Problem Solution Discussion

Customization features Known browser issues

See Also

Using Image Sprites

Problem Solution Discussion See Also

Clipping Background Images

Problem Solution Discussion See Also

Applying Masks to Images and Borders

Problem Solution Discussion See Also

5. Page Elements

Introduction Eliminating Page Margins

Problem Solution Discussion See Also

Resetting Browser-Style Defaults for Elements

Problem Solution Discussion

Extending CSS reset

See Also

Coloring the Scroll Bar in IE

Problem Solution Discussion

Dealing with quirks mode Color scroll bars in IE8

See Also

Techniques for Centering Elements on a Web Page

Problem Solution Discussion

Tables Images Vertical centering

See Also

Placing a Page Border

Problem Solution Discussion

Borders on images

See Also

Placing a Border Around the Browser’s Viewport

Problem Solution Discussion See Also

Customizing a Horizontal Rule

Problem Solution Discussion See Also

Adding a Lightbox

Problem Solution Discussion

Setting up the files Making a slideshow Known browser issues

See Also

Changing the Opacity on Elements

Problem Solution Discussion

Browser support

See Also

Adjusting the Opacity of Background Colors

Problem Solution Discussion

Supporting Internet Explorer

See Also

6. Lists

Introduction Changing the Format of a List

Problem Solution Discussion See Also

Changing the Color of a List Bullet

Problem Solution Discussion See Also

Writing Cross-Browser Indentation in Lists

Problem Solution Discussion

Missing markers

See Also

Placing Dividers Between List Items

Problem Solution Discussion See Also

Creating Custom Text Markers for Lists

Problem Solution Discussion See Also

Creating Custom Image Markers for Lists

Problem Solution Discussion

Stopping inheritance

See Also

Inserting Larger Custom Image Markers for Lists

Problem Solution Discussion See Also

Making a List Presentation Rich with Imagery

Problem Solution Discussion See Also

Creating Inline Lists

Problem Solution Discussion See Also

Making Hanging Indents in a List

Problem Solution Discussion See Also

Moving the Marker Inside the List

Problem Solution Discussion See Also

Styling a Definition List

Problem Solution Discussion

Using generated content

See Also

Styling a Screenplay with the HTML5 dialog Element

Problem Solution Discussion See Also

Turning a List into a Directory Tree

Problem Solution Discussion

Using CSS3

See Also

Creating a Star Ranking System

Problem Solution Discussion See Also

7. Links and Navigation

Introduction Easily Generating Text-Based Menus and Submenus

Problem Solution Discussion See Also

Removing Underlines from Links (and Adding Other Styles)

Problem Solution Discussion See Also

Changing Link Colors

Problem Solution Discussion See Also

Removing Dotted Lines When Clicking on a Link in Internet Explorer

Problem Solution Discussion See Also

Changing Link Colors in Different Sections of a Page

Problem Solution Discussion See Also

Placing Icons at the End of Different Kinds of Links

Problem Solution Discussion See Also

Changing Cursors

Problem Solution Discussion See Also

Creating Rollovers Without JavaScript

Problem Solution Discussion

Known issues

See Also

Animating Rollovers on Links with CSS3 Transitions

Problem Solution Discussion

Timing function Duration and delay Transition property Shorthand property Extending transitions to other properties

See Also

Creating Text Navigation Menus and Rollovers

Problem Solution Discussion

Setting up the list Styling the links Unordered lists for navigation

See Also

Adding Submenus to Vertical Menus

Problem Solution Discussion

Limiting styles

See Also

Building Horizontal Navigation Menus

Problem Solution Discussion See Also

Building Horizontal Navigation Menus with Drop-Down Menus

Problem Solution Discussion

Drop-down menus over Flash

See Also

Building a Navigation Menu with Access Keys

Problem Solution Discussion

Known browser issues

See Also

Creating Breadcrumb Navigation

Problem Solution Discussion See Also

Creating Image-Based Rollovers

Problem Solution Discussion

Leahy-Langridge image replacement Pixy method

See Also

Creating Collapsible Menus

Problem Solution Discussion See Also

Creating Contextual Menus

Problem Solution Discussion See Also

Making Tool Tips with the title Attribute

Problem Solution Discussion See Also

Designing a Dynamic Tabbed Menu

Problem Solution Discussion See Also

Changing Styles on Anchored Links

Problem Solution Discussion

Pure CSS collapsible menus Known browser issues

See Also

8. Forms

Introduction Modifying the Spacing Around a Form

Problem Solution Discussion See Also

Removing the Space Around a Form

Problem Solution Discussion See Also

Setting Styles for Input Elements

Problem Solution Discussion

Using attribute selectors

See Also

Changing Styles on Form Elements When a User Clicks on Them

Problem Solution Discussion See Also

Applying Different Styles to Different Input Elements in the Same Form

Problem Solution Discussion

Using attribute selectors

See Also

Setting Styles for textarea Elements

Problem Solution Discussion See Also

Setting Styles for select and option Elements

Problem Solution Discussion See Also

Creating a Macintosh-Styled Search Field

Problem Solution Discussion

Search field attributes Best practices

See Also

Styling Form Buttons

Problem Solution Discussion See Also

Creating an Image Submit Button

Problem Solution Discussion See Also

Setting Up a Submit-Once-Only Button

Problem Solution Discussion See Also

Creating a Submit Button That Looks Like HTML Text

Problem Solution Discussion

Browser support

See Also

Making an HTML Text Link Operate Like a Submit Button

Problem Solution Discussion See Also

Designing a Web Form Without Tables

Problem Solution Discussion See Also

Designing a Two-Column Form Without Tables

Problem Solution Discussion See Also

Integrating Form Feedback with a Form

Problem Solution Discussion See Also

Styling Access Keys in Web Forms

Problem Solution Discussion See Also

Grouping Common Form Elements

Problem Solution Discussion See Also

Entering Data into a Form That Is Similar to a Spreadsheet

Problem Solution Discussion See Also

Sample Design: A Login Form Sample Design: A Registration Form

9. Tables

Introduction Setting the Borders and Cell Padding for Tables

Problem Solution Discussion

Browser issues Defining border cells

See Also

Setting the Cell Spacing

Problem Solution Discussion See Also

Setting the Style for Captions

Problem Solution Discussion See Also

Setting the Styles Within Table Cells

Problem Solution Discussion See Also

Setting the Styles for Table Header Elements

Problem Solution Discussion See Also

Removing Gaps from Images Placed in Table Cells

Problem Solution Discussion

Vertical alignment

See Also

Eliminating Gaps Between Table Cells

Problem Solution Discussion See Also

Creating Alternating Background Colors in Table Rows

Problem Solution Discussion

Alternative solutions

See Also

Adding a Highlighting Effect on a Table Row

Problem Solution Discussion See Also

Sample Design: An Elegant Calendar

10. Designing Web Pages for Printing

Introduction Applying a Stylesheet for Printing to a Web Page

Problem Solution Discussion

Media types Using @import when assigning media types Using @media when assigning media types

See Also

Replacing a Color Logo for a Black-and-White Logo When Printing Web Pages

Problem Solution Discussion See Also

Making a Web Form Print-Ready

Problem Solution Discussion

Using attribute selectors to differentiate form elements Adding user friendliness

See Also

Displaying URIs After Links

Problem Solution Discussion

Placing the domain name before absolute links Known browser issues

See Also

Inserting Special Characters Before Links

Problem Solution Discussion

Known browser issues

See Also

Setting Page Breaks for a Printed Document

Problem Solution Discussion

Using class selectors

See Also

Sample Design: A Printer-Friendly Page with CSS

Setting the Page for Black-and-White Printing Designing the Main Heading Styling the Article Header and Byline Gaining Attention Through the Teaser Displaying URIs After Links Finishing with the Footer

11. Page Layouts

Introduction Building a One-Column Layout

Problem Solution Discussion

Creating a fixed-width column

See Also

Building a Two-Column Layout

Problem Solution Discussion

Flipping the layout

See Also

Building a Two-Column Layout with Fixed-Width Columns

Problem Solution Discussion

Flipping the layout

See Also

Creating a Flexible Multicolumn Layout with Floats

Problem Solution Discussion See Also

Creating a Fixed-Width Multicolumn Layout with Floats

Problem Solution Discussion See Also

Creating a Flexible Multicolumn Layout with Positioning

Problem Solution Discussion

Known issues

See Also

Creating a Fixed-Width Multicolumn Layout with Positioning

Problem Solution Discussion See Also

Using Floats to Display Columns in Any Order

Problem Solution Discussion

The markup Defining the columns Creating whitespace Adjusting the order of columns Faking columns An alternative solution

See Also

Designing an Asymmetric Layout

Problem Solution Discussion See Also

Designing Resolution-Independent Layouts

Problem Solution Discussion

Resolution independence without JavaScript

See Also

12. Hacks, Workarounds, and Troubleshooting

Introduction Overriding Inline Styles

Problem Solution Discussion See Also

Diagnosing CSS Bugs and Browser Issues

Problem Solution Discussion See Also

Using Bookmarklets to Troubleshoot CSS

Problem Solution Discussion See Also

Using Browser Extensions to Troubleshoot CSS

Problem Solution Discussion See Also

Patching Up Internet Explorer 6

Problem Solution Discussion See Also

Patching Up Internet Explorer 6 with JavaScript

Problem Solution Discussion

Using jQuery

See Also

Using Conditional Comments to Deliver Styles to Different Versions of Internet Explorer

Problem Solution Discussion

Things to keep in mind

See Also

Using CSS Filters to Deliver CSS Rules to Almost Any Browser

Problem Solution Discussion See Also

Setting Up an Intelligent CSS Delivery System for Modern Browsers

Problem Solution Discussion

Server-side solution

See Also

Testing a Site Design on More Than One Platform with Only One Computer

Problem Solution Discussion

Using a remote screen-capture service

See Also

Testing a Website with a Text Browser

Problem Solution Discussion See Also

13. Designing with CSS

Introduction Enlarging Text Excessively

Problem Solution Discussion See Also

Creating Unexpected Incongruity

Problem Solution Discussion See Also

Combining Unlike Elements to Create Contrast

Problem Solution Discussion See Also

Leading the Eye with Contrast

Problem Solution Discussion See Also

Checking for Enough Color Contrast

Problem Solution Discussion

Levels of luminosity

See Also

Emphasizing a Quotation with Smart Quotes

Problem Solution Discussion See Also

Setting a Moving Background Scene When a User Resizes the Window

Problem Solution Discussion See Also

Adding Animation to Elements on a Page

Problem Solution Discussion

Animation keyframes Animation properties

See Also

Creating a Fireworks Display As a User Scrolls

Problem Solution Discussion See Also

Customizing the View Source Stylesheet for Firefox

Problem Solution Discussion

Setting an external editor

See Also

Designing with Grids (CSS Frameworks)

Problem Solution Discussion See Also

Sample Design: A Cohesive Web Design

Setting the Page Constricting the Content Bringing in the Logo The Navigation Menu The Secondary Link Menu Styling the Content Column Working on the Smaller Column Finishing with the Footer The Final Touches

Sample Design: The U.S. Flag

The Basic Markup Creating the Easel Creating Stripes Creating Stars Adding Texture

14. Interacting with JavaScript

Introduction Determining Whether JavaScript Is Available Within a Browser

Problem Solution Discussion See Also

Applying a Different Stylesheet Based on the Time of Day

Problem Solution Discussion See Also

Redirecting to a Mobile Site Based on the Browser’s Screen Width

Problem Solution Discussion

Higher-resolution design

See Also

Adding a JavaScript Framework to a Web Page

Problem Solution Discussion See Also

Using CSS3 Selectors in IE6 and IE7

Problem Solution Discussion

Hiding extraneous JavaScript from modern browsers Dean Edwards’s IE7 script

See Also

Zebra-Striping an HTML Table with JavaScript

Problem Solution Discussion

Using a pure CSS solution

See Also

Highlighting a Table Row with Mouseovers

Problem Solution Discussion

Chaining functions

See Also

Adding Effects to Simple Image Rollovers

Problem Solution Discussion See Also

Making a Row of Elements with a Variable Amount of Content the Same Height

Problem Solution Discussion See Also

Setting a Link to Open a New Window

Problem Solution Discussion See Also

Making an Entire div Element Clickable

Problem Solution Discussion See Also

Supporting Transparent PNGs in IE6 with JavaScript

Problem Solution Discussion

The trouble with PNGs and IE6 Finding additional jQuery plug-ins

See Also

Delivering HTML5 and CSS3 to Browsers That Can Handle Them

Problem Solution Discussion See Also

A. Resources

General HTML and CSS Instruction Design Resources Discussion Groups References Tools

B. CSS 2.1 Properties and Proprietary Extensions C. CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements D. CSS3 Selectors and Pseudo-Classes E. Styling of Form Elements

Anatomy of the Appendix Tested CSS Properties

Input Element for Checkboxes

background-color background-image

border: 0;

border-color border-style border-width color font-family font-size font-weight height letter-spacing line-height margin padding text-align text-decoration text-indent width word-spacing

Input Element for File Uploads

background-color background-image border: 0; border-color border-style border-width color font-family font-size font-weight height letter-spacing line-height margin padding text-align text-decoration text-indent width word-spacing

Input Element for Radio Buttons

Input Element for Text

Select Element for Multiple Options

Select Element for Single Options

Submit Element

Textarea Element

Index About the Author Colophon SPECIAL OFFER: Upgrade this ebook with O’Reilly Copyright

← Prev
Back
Next →

← Prev
Back
Next →