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.
Learn how to solve the real problems you face with CSS. This cookbook offers hundreds of practical examples for using CSS to format your web pages, and includes code samples you can use right away. You'll find exactly what you need, from the basics to complex hacks and workarounds.
Each recipe explains how to customize a solution to meet your needs, and each chapter features a sample design that showcases the topics discussed. You'll learn about the behavior of the latest browsers-including IE 8, Firefox 3, Safari 4, and Google Chrome - and how you can resolve differences in the ways they display your web pages. Arranged in a convenient format for quick reference, this third edition is a valuable companion for anyone working with CSS. Learn the basics, such as the CSS rule structure Work with web typography and page layout Create effects for images and other page elements Learn techniques for configuring lists, forms, and tables Design effective web navigation and create custom links Get creative by combining CSS with JavaScript Learn useful troubleshooting techniques Explore features of HTML5 and CSS3
Inhaltsverzeichnis
Preface
1. General
1.1 Using CSS with HTML
1.2 Using Different Selectors to Apply Styles
1.3 Determining When to Use Class and ID Selectors
1.4 Understanding CSS Properties
1.5 Understanding the Box Model
1.6 Understanding DOCTYPES and Effects on Browser Layout
1.7 Associating Styles to a Web Page
1.8 How to Use Different Types of Style Sheets
1.9 Adding Comments Within CSS
1.10 Organizing the Contents of a Style Sheet
1.11 Organizing Style Sheet Files
1.12 Working with Shorthand Properties
1.13 Setting up an Alternate Style Sheet
1.14 Using Floats with Images
1.15 Using Absolute Positioning
1.16 Using Relative Positioning
1.17 Using CSS in Adobe Dreamweaver
1.18 Using CSS in Microsoft Expression Web Designer
2. Web Typography
2.1 Specifying Fonts
2.2 Specifying Font Measurements and Sizes
2.3 Gaining More Control over Font Sizes
2.4 Enforcing Font Sizes
2.5 Centering Text
2.6 Setting Text to Be Justified
2.7 Removing Space Between Headings and Paragraphs
2.8 Setting a Simple Initial Cap
2.9 Setting a Larger, Centered Initial Cap
2.10 Setting an Initial Cap with Decoration (Imagery)
2.11 Creating a Heading with Stylized Text
2.12 Creating a Heading with Stylized Text and Borders
2.13 Stylizing a Heading with Text and an Image
2.14 Creating a Pull Quote with HTML Text
2.15 Creating a Pull Quote with Borders
2.16 Creating a Pull Quote with Images
2.17 Setting the Indent in the First Line of a Paragraph
2.18 Setting the Indent of Entire Paragraphs
2.19 Creating a Hanging Indent
2.20 Styling the First Line of a Paragraph
2.21 Styling the First Line of a Paragraph with an Image
2.22 Creating a Highlighted Text Effect
2.23 Changing Line Spacing
2.24 Adding a Graphic Treatment to HTML Text
2.25 Placing Shadow Behind Text
2.26 Adjusting the Spacing Between Letters and Words
3. Images
3.1 Placing a Border Around an Image
3.2 Removing Borders Set on Images by Default in Some Browsers
3.3 Setting a Background Image
3.4 Creating a Line of Background Images
3.5 Placing a Background Image on a Web Page
3.6 Using Multiple Background Images on One Selector
3.7 Creating a Stationary Background Image
3.8 Overlaying HTML Text on an Image
3.9 Replacing HTML Text with an Image
3.10 Replacing HTML Text with Flash Text
3.11 Using Multiple PNGs with Transparency
3.12 Building a Panoramic Image Presentation
3.13 Combining Different Image Formats
3.14 Rounding Corners with Fixed-Width Columns
3.15 Rounding Corners (Sliding Doors Technique)
3.16 Rounding Corners (Mountaintop Technique) 3.17 Rounding Corners with JavaScript