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.
Table of contents:
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
3.18 Placing a Drop Shadow Behind an Image
3.19 Placing a Smooth Drop Shadow Behind an Image
3.20 Making Images Scalable
3.21 Making Word Balloons
3.22 Hindering People from Stealing Your Images
3.23 Inserting Reflections on Images Automatically
3.24 Using Image Sprites
4. Page Elements
4.1 Eliminating Page Margins
4.2 Coloring the Scrollbar
4.3 Techniques for Centering Elements on a Web Page
4.4 Placing a Page Border
4.5 Customizing a Horizontal Rule
4.6 Adding a Lightbox
5. Lists
5.1 Changing the Format of a List
5.2 Writing Cross-Browser Indentation in Lists
5.3 Place Dividers Between List Items
5.4 Creating Custom Text Markers for Lists
5.5 Creating Custom Image Markers for Lists
5.6 Inserting Large Custom Image Markers for Lists
5.7 Making a List Presentation Rich with Imagery
5.8 Creating Inline Lists
5.9 Making Hanging Indents in a List
5.10 Moving the Marker Inside the List
6. Links and Navigation
6.1 Removing Underlines from Links (and Adding Other Decorations)
6.2 Changing Link Colors
6.3 Changing Link Colors in Different Sections of a Page
6.4 Placing an Icon at the End of the Link
6.5 Changing Cursors
6.6 Creating Rollovers Without JavaScript
6.7 Creating Text Navigation Menus and Rollovers
6.8 Building Horizontal Navigation Menus
6.9 Building a Navigation Menu with Access Keys
6.10 Creating Breadcrumb Navigation
6.11 Creating Image-Based Rollovers
6.12 Creating Collapsible Menus
6.13 Creating Contextual Menus
6.14 Making Tool Tips with the Title Attribute
6.15 Designing a Dynamic Visual Menu
6.16 Apply Styles Dynamically to a Web Page
7. Forms
7.1 Modifying the Spacing Around a Form
7.2 Setting Styles for Input Elements
7.3 Applying Different Styles to Different Input Elements in the Same Form
7.4 Setting Styles for textarea Elements
7.5 Setting Styles for Select and Option Elements
7.6 Creating a Macintosh-Styled Search Field
7.7 Styling Form Buttons
7.8 Creating an Image Submit Button
7.9 Setting Up a Submit-Once-Only Button
7.10 Creating a Submit Button That Looks Like HTML Text
7.11 Making an HTML Text Link Operate Like a Submit Button
7.12 Designing a Web Form Without Tables
7.13 Designing a Two Column Form Without Tables
7.14 Highlighting Form Fields
7.15 Integrating Form Feedback with a Form
7.16 Styling Access Keys in Web Forms
7.17 Grouping Common Form Elements
7.18 Entering Data into a Form Like a Spreadsheet
7.19 Sample Design: A Login Form
7.20 Sample Design: A Registration Form
8. Tables
8.1 Setting the Cell Spacing
8.2 Setting the Borders and Cell Padding
8.3 Setting the Style for Caption
8.4 Setting the Styles Within Table Cells
8.5 Setting Styles for Table Header Elements
8.6 Removing Gaps from Images Placed in Table Cells
8.7 Eliminating Gaps Between Table Cells
8.8 Creating Alternating Background Colors in Table Rows
8.9 Adding a Highlighting Effect on a Table Row
8.10 Sample Design: An Elegant Calendar
9. Page Layouts
9.1 Building a One-Column Layout
9.2 Building a Two-Column Layout
9.3 Building a Two-Column Layout with Fixed-Width Columns
9.4 Creating a Flexible Multicolumn Layout with Floats
9.5 Creating a Fixed-Width Multicolumn Layout with Floats
9.6 Creating a Flexible Multicolumn Layout with Positioning
9.7 Creating a Fixed-Width Multicolumn Layout with Positioning
9.8 Using Floats to Display Columns in Any Order
9.9 Designing an Asymmetric Layout
10. Print
10.1 Creating a Printer-Friendly Page
10.2 Making a Web Form Print-Ready
10.3 Displaying URIs After Links
10.4 Inserting Special Characters Before Links
10.5 Sample Design: A Printer-Friendly Page with CSS
11. Hacks, Workarounds, and Troubleshooting
11.1 Isolating Styles for Netscape Navigator 4.x
11.2 Delivering Specific Styles to Internet Explorer 5.x for Windows
11.3 Removing Web Page Flicker in Internet Explorer 5.x for Windows
11.4 Keeping Background Images Stationary in Internet Explorer 6 for Windows
11.5 Using Internet Explorer for Windows' Conditional Comments to Deliver Styles
11.6 Keeping CSS Rules from Internet Explorer 5 for Macintosh
11.7 Setting Up an Intelligent Hack Management System
11.8 Diagnosing CSS Bugs and Browser Issues
11.9 Testing a Site Design on More Than One Platform with Only One Computer
11.10 Installing More Than One Version of Internet Explorer for Windows on a Computer
11.11 Testing a Web Site with a Text Browser
12. Designing with CSS
12.1 Enlarging Text Excessively
12.2 Creating Unexpected Incongruity
12.3 Combining Unlike Elements to Create Contrast
12.4 Leading the Eye with Contrast
12.5 Checking for Enough Color Contrast
12.6 Emphasizing a Quotation
A. Resources
B. CSS 2.1 Properties and Proprietary Extensions
C. CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements
D. Styling of Form Elements
Index
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.
Table of contents:
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
3.18 Placing a Drop Shadow Behind an Image
3.19 Placing a Smooth Drop Shadow Behind an Image
3.20 Making Images Scalable
3.21 Making Word Balloons
3.22 Hindering People from Stealing Your Images
3.23 Inserting Reflections on Images Automatically
3.24 Using Image Sprites
4. Page Elements
4.1 Eliminating Page Margins
4.2 Coloring the Scrollbar
4.3 Techniques for Centering Elements on a Web Page
4.4 Placing a Page Border
4.5 Customizing a Horizontal Rule
4.6 Adding a Lightbox
5. Lists
5.1 Changing the Format of a List
5.2 Writing Cross-Browser Indentation in Lists
5.3 Place Dividers Between List Items
5.4 Creating Custom Text Markers for Lists
5.5 Creating Custom Image Markers for Lists
5.6 Inserting Large Custom Image Markers for Lists
5.7 Making a List Presentation Rich with Imagery
5.8 Creating Inline Lists
5.9 Making Hanging Indents in a List
5.10 Moving the Marker Inside the List
6. Links and Navigation
6.1 Removing Underlines from Links (and Adding Other Decorations)
6.2 Changing Link Colors
6.3 Changing Link Colors in Different Sections of a Page
6.4 Placing an Icon at the End of the Link
6.5 Changing Cursors
6.6 Creating Rollovers Without JavaScript
6.7 Creating Text Navigation Menus and Rollovers
6.8 Building Horizontal Navigation Menus
6.9 Building a Navigation Menu with Access Keys
6.10 Creating Breadcrumb Navigation
6.11 Creating Image-Based Rollovers
6.12 Creating Collapsible Menus
6.13 Creating Contextual Menus
6.14 Making Tool Tips with the Title Attribute
6.15 Designing a Dynamic Visual Menu
6.16 Apply Styles Dynamically to a Web Page
7. Forms
7.1 Modifying the Spacing Around a Form
7.2 Setting Styles for Input Elements
7.3 Applying Different Styles to Different Input Elements in the Same Form
7.4 Setting Styles for textarea Elements
7.5 Setting Styles for Select and Option Elements
7.6 Creating a Macintosh-Styled Search Field
7.7 Styling Form Buttons
7.8 Creating an Image Submit Button
7.9 Setting Up a Submit-Once-Only Button
7.10 Creating a Submit Button That Looks Like HTML Text
7.11 Making an HTML Text Link Operate Like a Submit Button
7.12 Designing a Web Form Without Tables
7.13 Designing a Two Column Form Without Tables
7.14 Highlighting Form Fields
7.15 Integrating Form Feedback with a Form
7.16 Styling Access Keys in Web Forms
7.17 Grouping Common Form Elements
7.18 Entering Data into a Form Like a Spreadsheet
7.19 Sample Design: A Login Form
7.20 Sample Design: A Registration Form
8. Tables
8.1 Setting the Cell Spacing
8.2 Setting the Borders and Cell Padding
8.3 Setting the Style for Caption
8.4 Setting the Styles Within Table Cells
8.5 Setting Styles for Table Header Elements
8.6 Removing Gaps from Images Placed in Table Cells
8.7 Eliminating Gaps Between Table Cells
8.8 Creating Alternating Background Colors in Table Rows
8.9 Adding a Highlighting Effect on a Table Row
8.10 Sample Design: An Elegant Calendar
9. Page Layouts
9.1 Building a One-Column Layout
9.2 Building a Two-Column Layout
9.3 Building a Two-Column Layout with Fixed-Width Columns
9.4 Creating a Flexible Multicolumn Layout with Floats
9.5 Creating a Fixed-Width Multicolumn Layout with Floats
9.6 Creating a Flexible Multicolumn Layout with Positioning
9.7 Creating a Fixed-Width Multicolumn Layout with Positioning
9.8 Using Floats to Display Columns in Any Order
9.9 Designing an Asymmetric Layout
10. Print
10.1 Creating a Printer-Friendly Page
10.2 Making a Web Form Print-Ready
10.3 Displaying URIs After Links
10.4 Inserting Special Characters Before Links
10.5 Sample Design: A Printer-Friendly Page with CSS
11. Hacks, Workarounds, and Troubleshooting
11.1 Isolating Styles for Netscape Navigator 4.x
11.2 Delivering Specific Styles to Internet Explorer 5.x for Windows
11.3 Removing Web Page Flicker in Internet Explorer 5.x for Windows
11.4 Keeping Background Images Stationary in Internet Explorer 6 for Windows
11.5 Using Internet Explorer for Windows' Conditional Comments to Deliver Styles
11.6 Keeping CSS Rules from Internet Explorer 5 for Macintosh
11.7 Setting Up an Intelligent Hack Management System
11.8 Diagnosing CSS Bugs and Browser Issues
11.9 Testing a Site Design on More Than One Platform with Only One Computer
11.10 Installing More Than One Version of Internet Explorer for Windows on a Computer
11.11 Testing a Web Site with a Text Browser
12. Designing with CSS
12.1 Enlarging Text Excessively
12.2 Creating Unexpected Incongruity
12.3 Combining Unlike Elements to Create Contrast
12.4 Leading the Eye with Contrast
12.5 Checking for Enough Color Contrast
12.6 Emphasizing a Quotation
A. Resources
B. CSS 2.1 Properties and Proprietary Extensions
C. CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements
D. Styling of Form Elements
Index
"Das Kochbuch hat eine sehr gekonnten Aufbau und kann durch seinen sehr praktischen problemorientierten Ansatz sehr viel leisten:
Mit gekonnter Seitengestaltung per CSS erreicht der Leser, dass seine Website den Besuchern Appetit macht und die Inhalte in schmackhafter Form dargeboten werden. Damit er aber nicht stundenlang ausprobieren muss und das eine oder andere dann doch nicht gelingt. Er kann sich die Rezepte in Christopher Schmitts "CSS Kochbuch" ansehen und diese ausprobieren.
Hier erfährt er in angenehm lesbarer Form, wie sich bestimmte Probleme auf einfache Weise mit CSS lösen lassen. Ob es um horizontale Menü-Leisten mit Hover-Effekt geht, ansprechende und intuitiv nutzbare Formulare, mehrspaltige Seitenlayouts ohne Einsatz von Tabellen - hier dürfte für jeden etwas dabei sein. Und wenn er die Rezepte alle mal ausprobiert - und nachgekocht - hat, ist er soweit fit in CSS, dass ihm neue Problemstellungen keine Probleme mehr bereiten werden. Denn oft wird es genügen, die Zutaten aus verschiedenen Rezepten miteinander zu kombinieren. Also: "Guten Appetit!"" -- php-nuke.de, Juni 2010
"[...] wer bereits eine Einführung zu CSS gelesen hat, findet hier die ideale Ergänzung. Das Buch kann jedem CSS-Entwickler empfohlen werden." -- VISUAL-X, Vol. 16/2007
"Das hier besprochene Buch von Christopher Schmitt kann helfen, das Leben des CSS-Entwicklers wieder angenehmer zu machen. Nach einem Überblick über eher allgemeine CSS-Themen werden nacheinander alle wichtigen Themen, mit denen man sich im CSS-Alltag beschäftigen muss, behandelt. [...] Mit den im Buch vorgestellten Vorschlägen sollte man schneller zum Ziel kommen. [...] Die Beispiele sind einfach nachzuvollziehen. [...] Das Buch kann jedem CSS-Entwickler empfohlen werden." -- PHP Magazin, Ausgabe 2/2007
"Wie die anderen Bände der Cookbook-Reihe eignet sich auch dieser vor allem für Designer, die nicht unbedingt eine Einführung suchen, sondern die Lösung bestimmter Aufgaben vor sich haben. [...]" -- iX, Ausgabe 2/2007
Mit gekonnter Seitengestaltung per CSS erreicht der Leser, dass seine Website den Besuchern Appetit macht und die Inhalte in schmackhafter Form dargeboten werden. Damit er aber nicht stundenlang ausprobieren muss und das eine oder andere dann doch nicht gelingt. Er kann sich die Rezepte in Christopher Schmitts "CSS Kochbuch" ansehen und diese ausprobieren.
Hier erfährt er in angenehm lesbarer Form, wie sich bestimmte Probleme auf einfache Weise mit CSS lösen lassen. Ob es um horizontale Menü-Leisten mit Hover-Effekt geht, ansprechende und intuitiv nutzbare Formulare, mehrspaltige Seitenlayouts ohne Einsatz von Tabellen - hier dürfte für jeden etwas dabei sein. Und wenn er die Rezepte alle mal ausprobiert - und nachgekocht - hat, ist er soweit fit in CSS, dass ihm neue Problemstellungen keine Probleme mehr bereiten werden. Denn oft wird es genügen, die Zutaten aus verschiedenen Rezepten miteinander zu kombinieren. Also: "Guten Appetit!"" -- php-nuke.de, Juni 2010
"[...] wer bereits eine Einführung zu CSS gelesen hat, findet hier die ideale Ergänzung. Das Buch kann jedem CSS-Entwickler empfohlen werden." -- VISUAL-X, Vol. 16/2007
"Das hier besprochene Buch von Christopher Schmitt kann helfen, das Leben des CSS-Entwicklers wieder angenehmer zu machen. Nach einem Überblick über eher allgemeine CSS-Themen werden nacheinander alle wichtigen Themen, mit denen man sich im CSS-Alltag beschäftigen muss, behandelt. [...] Mit den im Buch vorgestellten Vorschlägen sollte man schneller zum Ziel kommen. [...] Die Beispiele sind einfach nachzuvollziehen. [...] Das Buch kann jedem CSS-Entwickler empfohlen werden." -- PHP Magazin, Ausgabe 2/2007
"Wie die anderen Bände der Cookbook-Reihe eignet sich auch dieser vor allem für Designer, die nicht unbedingt eine Einführung suchen, sondern die Lösung bestimmter Aufgaben vor sich haben. [...]" -- iX, Ausgabe 2/2007