CSS Cookbook

by Christopher Schmitt

Overview

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.

Product Details

ISBN-13:	9780596554682
Publisher:	O'Reilly Media, Incorporated
Publication date:	10/17/2006
Series:	Cookbooks (O'Reilly)
Sold by:	Barnes & Noble
Format:	eBook
Pages:	544
File size:	22 MB
Note:	This product may take a few minutes to download.

About the Author

Christopher Schmitt has been working with the Web since 1993. He is the author of several books on web design and digital imaging, including earlier editions of CSS Cookbook, and is a contributing writer to many web development magazines.

Table of Contents

	Foreword	ix
	Preface	xi
1.	Web Typography	1
1.1	Specifying Fonts and Inheritance	2
1.2	Specifying Font Measurements and Sizes	5
1.3	Enforcing Font Sizes	9
1.4	Setting a Simple Initial Cap	10
1.5	Setting a Larger, Centered Initial Cap	11
1.6	Setting an Initial Cap with Decoration (Imagery)	13
1.7	Creating a Heading with Stylized Text	15
1.8	Creating a Heading with Stylized Text and Borders	17
1.9	Stylizing a Heading with Text and an Image	19
1.10	Creating a Pull Quote with HTML Text	21
1.11	Creating a Pull Quote with Borders	22
1.12	Creating a Pull Quote with Images	24
1.13	Setting the Indent in the First Line of a Paragraph	27
1.14	Setting the Indent of Entire Paragraphs	28
1.15	Setting Text to Be Justified	31
1.16	Styling the First Line of a Paragraph	32
1.17	Styling the First Line of a Paragraph with an Image	33
1.18	Creating a Highlighted Text Effect	35
1.19	Changing Line Spacing	36
2.	Page Elements	38
2.1	Eliminating Page Margins	38
2.2	Coloring the Scrollbar	40
2.3	Centering Elements on a Web Page	43
2.4	Setting a Background Image	48
2.5	Creating a Line of Background Images	49
2.6	Placing a Background Image	50
2.7	Fixing the Background Image	53
2.8	Placing a Page Border	56
2.9	Customizing a Horizontal Rule	58
2.10	Example Design: Setting Up a Dynamic Splash Page	62
3.	Links and Navigation	67
3.1	Removing Underlines from Links	67
3.2	Setting Text to Blink	69
3.3	Setting Style Decorations Other Than Underlines	70
3.4	Changing Cursors	71
3.5	Creating Rollovers Without JavaScript	73
3.6	Creating Nongraphical Menus with Rollovers	74
3.7	Creating Collapsible Menus	78
3.8	Building Horizontal Menus	80
3.9	Creating Breadcrumb Navigation	85
3.10	Creating Image-Based Rollovers	88
3.11	Designing a Dynamic Visual Menu	92
3.12	Creating Contextual Menus	95
4.	Lists	99
4.1	Changing the Format of a List	100
4.2	Writing Cross-Browser Indentation in Lists	101
4.3	Creating Custom Text Markers for Lists	102
4.4	Creating Custom Image Markers for Lists	104
4.5	Creating Inline Lists	106
4.6	Making Hanging Indents in a List	107
4.7	Moving the Marker Inside the List	108
5.	Forms	111
5.1	Setting Styles for Input Elements	111
5.2	Setting Styles for textarea Elements	115
5.3	Setting Styles for Select and Option Elements	116
5.4	Creating Form Buttons	119
5.5	Setting Up a Submit-Once-Only Button	122
5.6	Designing a Web Form Without Tables	123
5.7	Sample Design: A Login Form	125
5.8	Sample Design: A Registration Form	129
6.	Tables	139
6.1	Setting the Cell Spacing	139
6.2	Setting the Borders and Cell Padding	141
6.3	Setting the Styles Within Table Cells	143
6.4	Removing Gaps from Table Cells with Images	144
6.5	Setting Styles for Table Header Elements	146
6.6	Sample Design: An Elegant Calendar	148
7.	Page Layouts	158
7.1	Developing Hybrid Layouts Using HTML Tables and CSS	159
7.2	Building a One-Column Layout	164
7.3	Building a Two-Column Layout	165
7.4	Building a Two-Column Layout with Fixed-Width Columns	170
7.5	Creating a Flexible Multicolumn Layout with Floats	173
7.6	Creating a Fixed-Width Multicolumn Layout with Floats	176
7.7	Creating a Flexible Multicolumn Layout with Positioning	179
7.8	Creating a Fixed-Width Multicolumn Layout with Positioning	182
7.9	Designing an Asymmetric Layout	184
8.	Print	188
8.1	Creating a Printer-Friendly Page	189
8.2	Making a Web Form Print-Ready	191
8.3	Inserting URLs After Links	194
8.4	Sample Design: A Printer-Friendly Page with CSS	195
9.	Hacks and Workarounds	204
9.1	Hiding Certain Styles from Netscape Navigator 4.x	205
9.2	Delivering Alternative Values to Internet Explorer 5.x for Windows	207
9.3	Removing Web Page Flicker in Internet Explorer 5.x for Windows	210
9.4	Keeping Background Images Stationary in Internet Explorer 6 for Windows	211
9.5	Keeping CSS Rules from Internet Explorer 5 for Macintosh	212
10.	Designing with CSS	213
10.1	Enlarging Text Excessively	213
10.2	Creating Unexpected Incongruity	215
10.3	Combining Unlike Elements to Create Contrast	218
10.4	Leading the Eye with Contrast	219
10.5	Building a Panoramic Image Presentation	222
10.6	Combining Different Image Formats	225
10.7	Making Word Balloons	230
10.8	Emphasizing a Quotation	233
10.9	Placing a Drop Shadow Behind an Image	236
Appendix	Resources	239
	Index	245

Editorial Reviews

The Barnes & Noble Review
The first CSS “recipe” you steal from CSS Cookbook will pay for the book several times over. After that, it will all be gravy.

So which one would you like to start with? A recipe for setting initial caps or creating pull quotes? For creating rollovers without JavaScript? Placing background images or page borders? Changing list formats? Creating form buttons? Creating printer-friendly pages? Hiding styles from (arrgh!) Netscape 4.x, or CSS rules from (arrgh!) IE5/Mac? Add 75 more recipes, and you’ve got the drift.

Each chapter includes a complete sample design. You’ll find them for typography, controlling page elements, links/navigation, lists, forms, tables, page layouts, printing, and more. If you want to do CSS right, but you’re on a deadline, this can’t be beat. Bill Camarda

Bill Camarda is a consultant, writer, and web/multimedia content developer. His 15 books include Special Edition Using Word 2003 and Upgrading & Fixing Networks for Dummies, Second Edition.

bn.com