CSS Cookbook
2nd Edition
Published on 17. October 2006
538 pages
978-0-596-51007-7 (ISBN)
Description
As the industry standard method for enriching the presentation of HTML-based web pages, Cascading Style Sheets (CSS) allow you to give web pages more structure and a more sophisticated look. But first, you have to get past CSS theory and resolve real-world problems.
For those all-too-common dilemmas that crop up with each project, CSS Cookbook provides hundreds of practical examples with CSS code recipes that you can use immediately to format your web pages. Arranged in a quick-lookup format for easy reference, the second edition has been updated to explain the unique behavior of the latest browsers: Microsoft''s IE 7 and Mozilla''s Firefox 1.5. Also, the book has been expanded to cover the interaction of CSS and images and now includes more recipes for beginning CSS users. The explanation that accompanies each recipe enables you to customize the formatting for your specific needs. With topics that range from basic web typography and page layout to techniques for formatting lists, forms, and tables, this book is a must-have companion, regardless of your experience with Cascading Style Sheets.
More details
Other editions
New editions
E-Book
12/2009
1st Edition
O'Reilly
€32.49
Available for download
Additional editions
Christopher Schmitt
CSS Cookbook
Book
11/2006
2nd Edition
O'Reilly
€43.00
Article exhausted; check for reprint
Content
- Intro
- Table of Contents
- Preface
- Audience
- Assumptions This Book Makes
- Contents of This Book
- Conventions Used in This Book
- Using Code Examples
- How to Contact Us
- Safari Enabled
- Acknowledgments
- General
- 1.0 Introduction
- 1.1 Using CSS with HTML
- Problem
- Solution
- Discussion
- See Also
- 1.2 Using Different Selectors to Apply Styles
- Problem
- Solution
- Discussion
- Type selectors
- Class selectors
- ID selectors
- Descendant selectors
- Child selectors
- Universal selectors
- Adjacent sibling selectors
- Attribute selectors
- Pseudo-classes
- Pseudo-elements
- See Also
- 1.3 Determining When to Use Class and ID Selectors
- Problem
- Solution
- Discussion
- See Also
- 1.4 Understanding CSS Properties
- Problem
- Solution
- Discussion
- See Also
- 1.5 Understanding the Box Model
- Problem
- Solution
- Discussion
- See Also
- 1.6 Understanding DOCTYPES and Effects on Browser Layout
- Problem
- Solution
- Discussion
- See Also
- 1.7 Associating Styles to a Web Page
- Problem
- Solution
- Discussion
- When to use inline styles
- When to use internal style sheets
- See Also
- 1.8 How to Use Different Types of Style Sheets
- Problem
- Solution
- Discussion
- See Also
- 1.9 Adding Comments Within CSS
- Problem
- Solution
- Discussion
- See Also
- 1.10 Organizing the Contents of a Style Sheet
- Problem
- Solution
- Discussion
- See Also
- 1.11 Organizing Style Sheet Files
- Problem
- Solution
- Discussion
- See Also
- 1.12 Working with Shorthand Properties
- Problem
- Solution
- Discussion
- See Also
- 1.13 Setting up an Alternate Style Sheet
- Problem
- Solution
- Discussion
- See Also
- 1.14 Using Floats with Images
- Problem
- Solution
- Discussion
- See Also
- 1.15 Using Absolute Positioning
- Problem
- Solution
- Discussion
- See Also
- 1.16 Using Relative Positioning
- Problem
- Solution
- Discussion
- See Also
- 1.17 Using CSS in Adobe Dreamweaver
- Problem
- Solution
- Discussion
- See Also
- 1.18 Using CSS in Microsoft Expression Web Designer
- Problem
- Solution
- Discussion
- See Also
- Web Typography
- 2.0 Introduction
- 2.1 Specifying Fonts
- Problem
- Solution
- Discussion
- See Also
- 2.2 Specifying Font Measurements and Sizes
- Problem
- Solution
- Discussion
- Length units
- Relative units
- Setting the size of fonts to zero or a negative value
- See Also
- 2.3 Gaining More Control over Font Sizes
- Problem
- Solution
- Discussion
- Using pixels
- Accessibility and web typography
- Using font keywords
- Using em units to control type
- See Also
- 2.4 Enforcing Font Sizes
- Problem
- Solution
- Discussion
- See Also
- 2.5 Centering Text
- Problem
- Solution
- Discussion
- See Also
- 2.6 Setting Text to Be Justified
- Problem
- Solution
- Discussion
- See Also
- 2.7 Removing Space Between Headings and Paragraphs
- Problem
- Solution
- Discussion
- See Also
- 2.8 Setting a Simple Initial Cap
- Problem
- Solution
- Discussion
- See Also
- 2.9 Setting a Larger, Centered Initial Cap
- Problem
- Solution
- Discussion
- See Also
- 2.10 Setting an Initial Cap with Decoration (Imagery)
- Problem
- Solution
- Discussion
- See Also
- 2.11 Creating a Heading with Stylized Text
- Problem
- Solution
- Discussion
- See Also
- 2.12 Creating a Heading with Stylized Text and Borders
- Problem
- Solution
- Discussion
- See Also
- 2.13 Stylizing a Heading with Text and an Image
- Problem
- Solution
- Discussion
- See Also
- 2.14 Creating a Pull Quote with HTML Text
- Problem
- Solution
- Discussion
- See Also
- 2.15 Creating a Pull Quote with Borders
- Problem
- Solution
- Discussion
- See Also
- 2.16 Creating a Pull Quote with Images
- Problem
- Solution
- Discussion
- See Also
- 2.17 Setting the Indent in the First Line of a Paragraph
- Problem
- Solution
- Discussion
- See Also
- 2.18 Setting the Indent of Entire Paragraphs
- Problem
- Solution
- Discussion
- See Also
- 2.19 Creating a Hanging Indent
- Problem
- Solution
- Discussion
- Hanging indents safely
- The paired hanging indent
- See Also
- 2.20 Styling the First Line of a Paragraph
- Problem
- Solution
- Discussion
- See Also
- 2.21 Styling the First Line of a Paragraph with an Image
- Problem
- Solution
- Discussion
- See Also
- 2.22 Creating a Highlighted Text Effect
- Problem
- Solution
- Discussion
- See Also
- 2.23 Changing Line Spacing
- Problem
- Solution
- Discussion
- See Also
- 2.24 Adding a Graphic Treatment to HTML Text
- Problem
- Solution
- Discussion
- See Also
- 2.25 Placing Shadow Behind Text
- Problem
- Solution
- Discussion
- See Also
- 2.26 Adjusting the Spacing Between Letters and Words
- Problem
- Solution
- Discussion
- See Also
- Images
- 3.0 Introduction
- 3.1 Placing a Border Around an Image
- Problem
- Solution
- Discussion
- See Also
- 3.2 Removing Borders Set on Images by Default in Some Browsers
- Problem
- Solution
- Discussion
- See Also
- 3.3 Setting a Background Image
- Problem
- Solution
- Discussion
- See Also
- 3.4 Creating a Line of Background Images
- Problem
- Solution
- See Also
- 3.5 Placing a Background Image on a Web Page
- Solution
- Discussion
- See Also
- 3.6 Using Multiple Background Images on One Selector
- Problem
- Solution
- Discussion
- See Also
- 3.7 Creating a Stationary Background Image
- Problem
- Solution
- Discussion
- See Also
- 3.8 Overlaying HTML Text on an Image
- Problem
- Solution
- Discussion
- See Also
- 3.9 Replacing HTML Text with an Image
- Problem
- Solution
- Discussion
- Origin of the image replacement method
- Problem with the FIR method
- Phark image replacement method
- CSS 3 approach to image replacement
- See Also
- 3.10 Replacing HTML Text with Flash Text
- Problem
- Solution
- Discussion
- See Also
- 3.11 Using Multiple PNGs with Transparency
- Problem
- Solution
- Discussion
- See Also
- 3.12 Building a Panoramic Image Presentation
- Problem
- Solution
- Discussion
- See Also
- 3.13 Combining Different Image Formats
- Problem
- Solution
- Discussion
- See Also
- 3.14 Rounding Corners with Fixed-Width Columns
- Problem
- Solution
- Discussion
- See Also
- 3.15 Rounding Corners (Sliding Doors Technique)
- Problem
- Solution
- Discussion
- See Also
- 3.16 Rounding Corners (Mountaintop Technique)
- Problem
- Solution
- Discussion
- See Also
- 3.17 Rounding Corners with JavaScript
- Problem
- Solution
- Discussion
- Different colors
- Different sizes
- Different elements
- Specific corners
- See Also
- 3.18 Placing a Drop Shadow Behind an Image
- Problem
- Solution
- Discussion
- See Also
- 3.19 Placing a Smooth Drop Shadow Behind an Image
- Problem
- Solution
- Discussion
- See Also
- 3.20 Making Images Scalable
- Problem
- Solution
- Discussion
- See Also
- 3.21 Making Word Balloons
- Problem
- Solution
- Discussion
- See Also
- 3.22 Hindering People from Stealing Your Images
- Problem
- Solution
- Discussion
- Microsoft's Image toolbar
- No images are safe
- See Also
- 3.23 Inserting Reflections on Images Automatically
- Problem
- Solution
- Discussion
- Customization features
- Known browser issues
- See Also
- 3.24 Using Image Sprites
- Problem
- Solution
- Discussion
- See Also
- Page Elements
- 4.0 Introduction
- 4.1 Eliminating Page Margins
- Problem
- Solution
- Discussion
- See Also
- 4.2 Coloring the Scrollbar
- Problem
- Solution
- Discussion
- See Also
- 4.3 Techniques for Centering Elements on a Web Page
- Problem
- Solution
- Discussion
- Tables
- Images
- Vertical centering
- See Also
- 4.4 Placing a Page Border
- Problem
- Solution
- Discussion
- See Also
- 4.5 Customizing a Horizontal Rule
- Problem
- Solution
- Discussion
- See Also
- 4.6 Adding a Lightbox
- Problem
- Solution
- Discussion
- Setting up the files
- Making a slideshow
- Known browser issues
- See Also
- Lists
- 5.0 Introduction
- 5.1 Changing the Format of a List
- Problem
- Solution
- Discussion
- See Also
- 5.2 Writing Cross-Browser Indentation in Lists
- Problem
- Solution
- Discussion
- See Also
- 5.3 Place Dividers Between List Items
- Problem
- Solution
- Discussion
- See Also
- 5.4 Creating Custom Text Markers for Lists
- Problem
- Solution
- Discussion
- See Also
- 5.5 Creating Custom Image Markers for Lists
- Problem
- Solution
- Discussion
- See Also
- 5.6 Inserting Large Custom Image Markers for Lists
- Problem
- Solution
- Discussion
- See Also
- 5.7 Making a List Presentation Rich with Imagery
- Problem
- Solution
- Discussion
- See Also
- 5.8 Creating Inline Lists
- Problem
- Solution
- Discussion
- See Also
- 5.9 Making Hanging Indents in a List
- Problem
- Solution
- Discussion
- See Also
- 5.10 Moving the Marker Inside the List
- Problem
- Solution
- Discussion
- See Also
- Links and Navigation
- 6.0 Introduction
- 6.1 Removing Underlines from Links (and Adding Other Decorations)
- Problem
- Solution
- Discussion
- See Also
- 6.2 Changing Link Colors
- Problem
- Solution
- Discussion
- See Also
- 6.3 Changing Link Colors in Different Sections of a Page
- Problem
- Solution
- Discussion
- See Also
- 6.4 Placing an Icon at the End of the Link
- Problem
- Solution
- Discussion
- See Also
- 6.5 Changing Cursors
- Problem
- Solution
- Discussion
- See Also
- 6.6 Creating Rollovers Without JavaScript
- Problem
- Solution
- Discussion
- See Also
- 6.7 Creating Text Navigation Menus and Rollovers
- Problem
- Solution
- Discussion
- See Also
- 6.8 Building Horizontal Navigation Menus
- Problem
- Solution
- Discussion
- See Also
- 6.9 Building a Navigation Menu with Access Keys
- Problem
- Solution
- Discussion
- See Also
- 6.10 Creating Breadcrumb Navigation
- Problem
- Solution
- Discussion
- See Also
- 6.11 Creating Image-Based Rollovers
- Problem
- Solution
- Discussion
- See Also
- 6.12 Creating Collapsible Menus
- Problem
- Solution
- Discussion
- See Also
- 6.13 Creating Contextual Menus
- Problem
- Solution
- Discussion
- See Also
- 6.14 Making Tool Tips with the Title Attribute
- Problem
- Solution
- Discussion
- See Also
- 6.15 Designing a Dynamic Visual Menu
- Problem
- Solution
- Discussion
- See Also
- 6.16 Apply Styles Dynamically to a Web Page
- Problem
- Solution
- Discussion
- Pure CSS collapsible menus
- See Also
- Forms
- 7.0 Introduction
- 7.1 Modifying the Spacing Around a Form
- Problem
- Solution
- Discussion
- See Also
- 7.2 Setting Styles for Input Elements
- Problem
- Solution
- Discussion
- See Also
- 7.3 Applying Different Styles to Different Input Elements in the Same Form
- Problem
- Solution
- Discussion
- See Also
- 7.4 Setting Styles for textarea Elements
- Problem
- Solution
- Discussion
- See Also
- 7.5 Setting Styles for Select and Option Elements
- Problem
- Solution
- Discussion
- See Also
- 7.6 Creating a Macintosh-Styled Search Field
- Problem
- Solution
- Discussion
- Search field attributes
- Best practices
- See Also
- 7.7 Styling Form Buttons
- Problem
- Solution
- Discussion
- See Also
- 7.8 Creating an Image Submit Button
- Problem
- Solution
- Discussion
- See Also
- 7.9 Setting Up a Submit-Once-Only Button
- Problem
- Solution
- Discussion
- See Also
- 7.10 Creating a Submit Button That Looks Like HTML Text
- Problem
- Solution
- Discussion
- See Also
- 7.11 Making an HTML Text Link Operate Like a Submit Button
- Problem
- Solution
- Discussion
- See Also
- 7.12 Designing a Web Form Without Tables
- Problem
- Solution
- Discussion
- See Also
- 7.13 Designing a Two Column Form Without Tables
- Problem
- Solution
- Discussion
- See Also
- 7.14 Highlighting Form Fields
- Problem
- Solution
- Discussion
- See Also
- 7.15 Integrating Form Feedback with a Form
- Problem
- Solution
- Discussion
- See Also
- 7.16 Styling Access Keys in Web Forms
- Problem
- Solution
- Discussion
- See Also
- 7.17 Grouping Common Form Elements
- Problem
- Solution
- Discussion
- See Also
- 7.18 Entering Data into a Form Like a Spreadsheet
- Problem
- Solution
- Discussion
- See Also
- 7.19 Sample Design: A Login Form
- 7.20 Sample Design: A Registration Form
- Tables
- 8.0 Introduction
- 8.1 Setting the Cell Spacing
- Problem
- Solution
- Discussion
- See Also
- 8.2 Setting the Borders and Cell Padding
- Problem
- Solution
- Discussion
- See Also
- 8.3 Setting the Style for Caption
- Problem
- Solution
- Discussion
- See Also
- 8.4 Setting the Styles Within Table Cells
- Problem
- Solution
- Discussion
- See Also
- 8.5 Setting Styles for Table Header Elements
- Problem
- Solution
- Discussion
- See Also
- 8.6 Removing Gaps from Images Placed in Table Cells
- Problem
- Solution
- Discussion
- Using Document Type Definitions
- See Also
- 8.7 Eliminating Gaps Between Table Cells
- Problem
- Solution
- Discussion
- See Also
- 8.8 Creating Alternating Background Colors in Table Rows
- Problem
- Solution
- Discussion
- Using JavaScript
- Using server-side solutions
- See Also
- 8.9 Adding a Highlighting Effect on a Table Row
- Problem
- Solution
- Discussion
- See Also
- 8.10 Sample Design: An Elegant Calendar
- Page Layouts
- 9.0 Introduction
- 9.1 Building a One-Column Layout
- Problem
- Solution
- Discussion
- See Also
- 9.2 Building a Two-Column Layout
- Problem
- Solution
- Discussion
- See Also
- 9.3 Building a Two-Column Layout with Fixed-Width Columns
- Problem
- Solution
- Discussion
- See Also
- 9.4 Creating a Flexible Multicolumn Layout with Floats
- Problem
- Solution
- Discussion
- See Also
- 9.5 Creating a Fixed-Width Multicolumn Layout with Floats
- Problem
- Solution
- Discussion
- See Also
- 9.6 Creating a Flexible Multicolumn Layout with Positioning
- Problem
- Solution
- Discussion
- See Also
- 9.7 Creating a Fixed-Width Multicolumn Layout with Positioning
- Problem
- Solution
- Discussion
- See Also
- 9.8 Using Floats to Display Columns in Any Order
- Problem
- Solution
- Discussion
- The markup
- Defining the columns
- Creating whitespace
- Adjusting the order of columns
- Page layout algorithm
- Faking columns
- An alternative solution
- See Also
- 9.9 Designing an Asymmetric Layout
- Problem
- Solution
- Discussion
- See Also
- 10.0 Introduction
- 10.1 Creating a Printer-Friendly Page
- Problem
- Solution
- Discussion
- Using @import when assigning media types
- Using @media when assigning media types
- See Also
- 10.2 Making a Web Form Print-Ready
- Problem
- Solution
- Discussion
- Using attribute selectors to differentiate form elements
- Adding user friendliness
- See Also
- 10.3 Displaying URIs After Links
- Problem
- Solution
- Discussion
- Placing the domain name before absolute links
- See Also
- 10.4 Inserting Special Characters Before Links
- Problem
- Solution
- Discussion
- See Also
- 10.5 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
- Hacks, Workarounds, and Troubleshooting
- 11.0 Introduction
- 11.1 Isolating Styles for Netscape Navigator 4.x
- Problem
- Solution
- Discussion
- Caio hack
- @media workaround
- Descendant selectors
- See Also
- 11.2 Delivering Specific Styles to Internet Explorer 5.x for Windows
- Problem
- Solution
- Discussion
- Star HTML hack
- Another approach: Tantek's box model hack
- See Also
- 11.3 Removing Web Page Flicker in Internet Explorer 5.x for Windows
- Problem
- Solution
- Discussion
- See Also
- 11.4 Keeping Background Images Stationary in Internet Explorer 6 for Windows
- Problem
- Solution
- Discussion
- See Also
- 11.5 Using Internet Explorer for Windows' Conditional Comments to Deliver Styles
- Problem
- Solution
- Discussion
- See Also
- 11.6 Keeping CSS Rules from Internet Explorer 5 for Macintosh
- Problem
- Solution
- Discussion
- See Also
- 11.7 Setting Up an Intelligent Hack Management System
- Problem
- Solution
- Discussion
- See Also
- 11.8 Diagnosing CSS Bugs and Browser Issues
- Problem
- Solution
- Discussion
- See Also
- 11.9 Testing a Site Design on More Than One Platform with Only One Computer
- Problem
- Solution
- If you own a PC
- If you own a Macintosh
- If you own a Linux Workstation
- Discussion
- See Also
- 11.10 Installing More Than One Version of Internet Explorer for Windows on a Computer
- Problem
- Solution
- Discussion
- See Also
- 11.11 Testing a Web Site with a Text Browser
- Problem
- Solution
- Discussion
- See Also
- Designing with CSS
- 12.0 Introduction
- 12.1 Enlarging Text Excessively
- Problem
- Solution
- Discussion
- See Also
- 12.2 Creating Unexpected Incongruity
- Problem
- Solution
- Discussion
- See Also
- 12.3 Combining Unlike Elements to Create Contrast
- Problem
- Solution
- Discussion
- See Also
- 12.4 Leading the Eye with Contrast
- Problem
- Solution
- Discussion
- See Also
- 12.5 Checking for Enough Color Contrast
- Problem
- Solution
- Discussion
- See Also
- 12.6 Emphasizing a Quotation
- Problem
- Solution
- Discussion
- See Also
- Resources
- General HTML and CSS Instruction
- Dave Shea's Roadmap to Standards Essay
- Web Page for Designers' CSS Tutorial
- Community MX's Basics of CSS Positioning
- CSS Float Property Tutorial
- CSS Selectors Tutorial
- Design Resources
- A List Apart: CSS Topics
- BlueRobot.com Layout Reservoir
- CSS-Edge
- CSS Zen Garden
- Glish.com CSS Layout Techniques
- Microformats
- Real World Style
- SimpleQuizes
- Typetester
- Discussion Groups
- Babble List
- css-discuss
- Usenet Stylesheets Newsgroup
- www-style (W3C Style Mailing List)
- References
- CSS Browser Support Charts
- W3C's Recommended DTDs
- W3C's CSS Page
- CSS 2.1 Specification
- HTML 4.01 Specification
- XHTML 1.0 Specification
- Tools
- BrowserCam
- iCapture
- SelectORacle
- W3C CSS Validator
- W3C HTML Validator
- Web Developer Browser Extension
- Xyle Scope
- CSS 2.1 Properties and Proprietary Extensions
- CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements
- Styling of Form Elements
- Checkboxes
- File Input
- Radio Buttons
- Text Fields
- multiple options
- Select Element
- Submit Button
- Textarea Element
- Index
