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.
Chapter 1 General
Using CSS with HTML
Using Different Selectors to Apply Styles
Determining When to Use Class and ID Selectors
Understanding CSS Properties
Understanding the Box Model
Understanding DOCTYPES and Effects on Browser Layout
Associating Styles to a Web Page
How to Use Different Types of Style Sheets
Adding Comments Within CSS
Organizing the Contents of a Style Sheet
Organizing Style Sheet Files
Working with Shorthand Properties
Setting up an Alternate Style Sheet
Using Floats with Images
Using Absolute Positioning
Using Relative Positioning
Using CSS in Adobe Dreamweaver
Using CSS in Microsoft Expression Web Designer
Chapter 2 Web Typography
Specifying Font Measurements and Sizes
Gaining More Control over Font Sizes
Enforcing Font Sizes
Setting Text to Be Justified
Removing Space Between Headings and Paragraphs
Setting a Simple Initial Cap
Setting a Larger, Centered Initial Cap
Setting an Initial Cap with Decoration (Imagery)
Creating a Heading with Stylized Text
Creating a Heading with Stylized Text and Borders
Stylizing a Heading with Text and an Image
Creating a Pull Quote with HTML Text
Creating a Pull Quote with Borders
Creating a Pull Quote with Images
Setting the Indent in the First Line of a Paragraph
Setting the Indent of Entire Paragraphs
Creating a Hanging Indent
Styling the First Line of a Paragraph
Styling the First Line of a Paragraph with an Image
Creating a Highlighted Text Effect
Changing Line Spacing
Adding a Graphic Treatment to HTML Text
Placing Shadow Behind Text
Adjusting the Spacing Between Letters and Words
Chapter 3 Images
Placing a Border Around an Image
Removing Borders Set on Images by Default in Some Browsers
Setting a Background Image
Creating a Line of Background Images
Placing a Background Image on a Web Page
Using Multiple Background Images on One Selector
Creating a Stationary Background Image
Overlaying HTML Text on an Image
Replacing HTML Text with an Image
Replacing HTML Text with Flash Text
Using Multiple PNGs with Transparency
Building a Panoramic Image Presentation
Combining Different Image Formats
Rounding Corners with Fixed-Width Columns
Rounding Corners (Sliding Doors Technique)
Rounding Corners (Mountaintop Technique)
Placing a Drop Shadow Behind an Image
Placing a Smooth Drop Shadow Behind an Image
Making Images Scalable
Making Word Balloons
Hindering People from Stealing Your Images
Inserting Reflections on Images Automatically
Using Image Sprites
Chapter 4 Page Elements
Eliminating Page Margins
Coloring the Scrollbar
Techniques for Centering Elements on a Web Page
Placing a Page Border
Customizing a Horizontal Rule
Adding a Lightbox
Chapter 5 Lists
Changing the Format of a List
Writing Cross-Browser Indentation in Lists
Place Dividers Between List Items
Creating Custom Text Markers for Lists
Creating Custom Image Markers for Lists
Inserting Large Custom Image Markers for Lists
Making a List Presentation Rich with Imagery
Creating Inline Lists
Making Hanging Indents in a List
Moving the Marker Inside the List
Chapter 6 Links and Navigation
Removing Underlines from Links (and Adding Other Decorations)
Changing Link Colors
Changing Link Colors in Different Sections of a Page
Placing an Icon at the End of the Link
Creating Text Navigation Menus and Rollovers
Building Horizontal Navigation Menus
Building a Navigation Menu with Access Keys
Creating Breadcrumb Navigation
Creating Image-Based Rollovers
Creating Collapsible Menus
Creating Contextual Menus
Making Tool Tips with the Title Attribute
Designing a Dynamic Visual Menu
Apply Styles Dynamically to a Web Page
Chapter 7 Forms
Modifying the Spacing Around a Form
Setting Styles for Input Elements
Applying Different Styles to Different Input Elements in the Same Form
Setting Styles for textarea Elements
Setting Styles for Select and Option Elements
Creating a Macintosh-Styled Search Field
Styling Form Buttons
Creating an Image Submit Button
Setting Up a Submit-Once-Only Button
Creating a Submit Button That Looks Like HTML Text
Making an HTML Text Link Operate Like a Submit Button
Designing a Web Form Without Tables
Designing a Two Column Form Without Tables
Highlighting Form Fields
Integrating Form Feedback with a Form
Styling Access Keys in Web Forms
Grouping Common Form Elements
Entering Data into a Form Like a Spreadsheet
Sample Design: A Login Form
Sample Design: A Registration Form
Chapter 8 Tables
Setting the Cell Spacing
Setting the Borders and Cell Padding
Setting the Style for Caption
Setting the Styles Within Table Cells
Setting Styles for Table Header Elements
Removing Gaps from Images Placed in Table Cells
Eliminating Gaps Between Table Cells
Creating Alternating Background Colors in Table Rows
Adding a Highlighting Effect on a Table Row
Sample Design: An Elegant Calendar
Chapter 9 Page Layouts
Building a One-Column Layout
Building a Two-Column Layout
Building a Two-Column Layout with Fixed-Width Columns
Creating a Flexible Multicolumn Layout with Floats
Creating a Fixed-Width Multicolumn Layout with Floats
Creating a Flexible Multicolumn Layout with Positioning
Creating a Fixed-Width Multicolumn Layout with Positioning
Using Floats to Display Columns in Any Order
Designing an Asymmetric Layout
Chapter 10 Print
Creating a Printer-Friendly Page
Making a Web Form Print-Ready
Displaying URIs After Links
Inserting Special Characters Before Links
Sample Design: A Printer-Friendly Page with CSS
Chapter 11 Hacks, Workarounds, and Troubleshooting
Isolating Styles for Netscape Navigator 4.x
Delivering Specific Styles to Internet Explorer 5.x for Windows
Removing Web Page Flicker in Internet Explorer 5.x for Windows
Keeping Background Images Stationary in Internet Explorer 6 for Windows
Using Internet Explorer for Windows’ Conditional Comments to Deliver Styles
Keeping CSS Rules from Internet Explorer 5 for Macintosh
Setting Up an Intelligent Hack Management System
Diagnosing CSS Bugs and Browser Issues
Testing a Site Design on More Than One Platform with Only One Computer
Installing More Than One Version of Internet Explorer for Windows on a Computer
Testing a Web Site with a Text Browser
Chapter 12 Designing with CSS
Enlarging Text Excessively
Creating Unexpected Incongruity
Combining Unlike Elements to Create Contrast
Leading the Eye with Contrast
Checking for Enough Color Contrast
Emphasizing a Quotation
Appendix A Resources
General HTML and CSS Instruction
Appendix B CSS 2.1 Properties and Proprietary Extensions
Appendix C CSS 2.1 Selectors, Pseudo-Classes, and Pseudo-Elements
The animal on the cover of CSS Cookbook is a grizzly bear (Ursus arctos horribilis). The grizzly's distinctive features include humped shoulders, a long snout, and long curved claws. The coat color ranges from shades of blond, brown, black, or a combination of these; the long outer guard hairs are often tipped with white or silver, giving the bear a "grizzled" appearance. The grizzly can weigh anywhere from 350 to 800 pounds and reach a shoulder height of 4.5 feet when on all fours. Standing on its hind legs, a grizzly can reach up to eight feet. Despite its large size, the grizzly can reach speeds of 35 to 40 miles per hour.
Some of the grizzly's favorite foods include nuts, berries, insects, salmon, carrion, and small mammals. The diet of a grizzly varies depending on the season and habitat. Grizzlies in parts of Alaska eat primarily salmon, while grizzlies in high mountain areas eat mostly berries and insects.Grizzlies are solitary, and prefer rugged mountains and forests. They can be found in the Canadian provinces of British Columbia, Alberta, Yukon, and the Northwest Territories; and the U.S. states of Alaska, Idaho, Wyoming, Washington, and Montana.
The grizzly is considered a threatened species: only about 850 bears exist in the lower 48 states. Before the West was settled, the grizzly bear population was estimated to be between 50,000 and 100,000. Threats to the survival of the grizzly bear include habitat destruction caused by logging, mining, and human development, as well as illegal poaching.
The cover image is a 19th-century engraving from the Dover Pictorial Archive. The cover font is Adobe ITC Garamond. The text font is Linotype Birka; the heading font is Adobe Myriad Condensed; and the code font is LucasFont's TheSans Mono Condensed.
That's my first O'Reilly title, and it feels so good!
I can't be agree with the reviews stating that you can't learn CSS using it, as I think it's way better than the references I learnt CSS from.
Also, I guess I'd like some more stuff for the advanced user. For the new comers, Learning CSS or CSS: The Missing Manual would do.
And don't you think that a color format should be adopted for this kind of books? I mean... they write something like border-color: green, and place a non-color image. What should I understand from that? oO
Other than that, I've got nothing to comment. It simply rocks, I may say it's above my expectations.
Looking forward to more O'Reilly titles, because I'd like to see how is it doing it for me, on a new language.
CSS Cookbook 2nd Ed by Christopher Schmitt O'Reilly $44.99 http://www.oreilly.com/catalog/cssckbk2/index.html
What i like about this book is that it gives you practical solutions for everyday web layout and design challenges. Gives insight on how you can use CSS so that your web page will be more intuitive..so that visitors are less likely to think.. about what your web page is about.
The section i like is that it briefly discusses how you can use your CSS with Dreamweaver. Since the web is relating too many information the typography section will help you emphasize key information in your web page.
Over all this is a wonderful book to have if you are creating web pages. You will realize..that there are somethings that you can easily do in CSS
Unfortunately, the book contains some organizational flaws. The "General" chapter, which is meant to serve as an introduction to CSS, is a brief background to concepts and tools, but it doesn't always point out that certain selectors are not supported in every browser (child selectors and pseudo-elements are the most notable). I think it'd be helpful to state straight-up that many aspects of CSS are interpreted differently in various browsers, if supported at all, and then note which browsers support each feature as the feature is introduced to the reader. To their credit, they do include a "pitfalls/warnings" icon at the end of some sections, but it'd be helpful to know about them before you continue on to work through one of their examples, only to discover later that it doesn't work in IE6. Since most people would like to design for a cross-browser experience, they might just want to skip over certain CSS features that are not widely supported, so indicating browser support up-front would be very helpful. And I wonder how valuable it is to mention something like "text-shadow" if it is only currently supported by one browser? In addition, some important concepts are buried in the book (such as the fundamental concept of inheritance and the !important rule) - they might be better placed in the "General" chapter (introduction).
Though this book does have its flaws, I have to say that it does assemble some nice formatting tricks. I have previously scoured the Web searching for many of the techniques that are all nicely packaged in one place in the "Images" chapter, so I am sure this would be a real time-saver for many, as the leg-work is already done for you. Among some commonly sought out techniques are rounded corners, dropshadows, and the lightbox effect. The "Lists" and "Navigation" chapters are also pretty useful. The "recipes" this book includes are not only a means to accomplish a particular goal, but the solutions are creatively achieved so that you start thinking about using CSS in less out-of-the-box ways. And kudos to them for mentioning accessibility/usability in the "Typography" chapter - those concepts often fall to the wayside in comparison to glitzier topics.
The CSS Cookbook is written for those starting out with CSS and advanced users. It is not written as a tutorial in order to learn CSS but anyone with a basic grip on CSS will find the book a valuable companion. The clear explanations of many of the pitfalls we come across when writing CSS are simply stated in an easy to look up format.
Even though you may not want to read the book front to cover I think its a great experience to just pick your chapters by what interests you most and to work through a complete chapter following along and rewriting the code as indicated in order to get a good feel of what problems are solved so that if along the way you run in to a problem you find it back without mach ado. You might learn things you never knew where that simple ore useful. For those who are transitioning from table based layouts to CSS it might not be to book to get familiar with CSS because it is a technical book, a little to dry for just getting into using CSS. Once you have gone through the initial learning curve using books like Head First: HTML and CSS from O'Reilly or Eric Meyers on CSS from New Riders you will be ready to use the book as it is intended: A constant companion within reach whenever the going gets tough,
Chapter 9 on page layout for example clearly explains what took me a long time to understand when starting out trying to use floats for layout. A common problem like columns floated to the left being shorter then the second column located on the right and the resulting overflow of this right column below the left -floated column, I almost forgot that that took me hours to solve when starting out with CSS. In "CSS Cookbook" these behaviors/problems are explained almost in order of appearance as we are working to accomplice more complicated layouts using relative or absolute positioning. There are many resources out on the web but wadding through them is time consuming and being able to find your solutions in a one or two page example including code and images are a big time saver. After each problem there is almost always a "See Also" referral to either another recipe in the book or a link to a more detailed explanation online directing you not only to reliable CSS resources but also to the direct location of the particular problem at hand within these CSS online community resources.
In the same chapter on layout Christopher Schmitt takes us trough as step-by-step tutorial on Alex Robinson's influential article on creating the "any order Columns" published at postitioniseverything.com. A great exercise in understanding floats and how to be creative with code.
In chapter 4 on page elements you will find a great example on some creative ways to add java in your pages and I really appreciate the precise instructions here since that is still kind of new to me. The results are truly beautiful, and would inspire any visual designer and can even be applied to background images placed from a style sheet as you can see applied at frankklaver.com/qualitygardening a small testing / playground of mine.
A whole chapter is dedicated to forms, another to print.
You will find a clear explanation of how to run multiple versions of i.e. and how to install them. I always new where to find them, just could not get them to work until now! I wish the same simple explanation were given on how to implement Shaun Inmans "clearing a float" in a absolute positioned design since it still is not working for me. (patience, patience,)
The books focus is on solving CSS problems so don~Nt expect all files/example that accompany the book to be validating. I find that a bit of a draw back since the document type used is XHTML Strict in most example files. I think the book as well as the accompanying files may need someone to go through them one more time with a fine comb to correct some of the minor coding errors.
It's really not to be picking but the book is meant for those familiar with code looking to switch over to CSS and for those more advanced. Using a XTML strict Doc declaration in most documents, would it not be neater if the document where written and validated as such? Text without a paragraph surrounding it or a inside a paragraph, missing closing tacks, make it hard for those who are starting out to find confidence when the CSS is somehow not working. Is it I, is it the book? Honestly, when I get stuck I like to know it's something I did wrong and not the book I am learning from. I did however not find any CSS errors in any of the samples I worked trough!
I never read the first edition of the CSS Cookbook but with the release of IE 7 the book has been updated.
In chapter 3 on images it is stated that at press time IE 5x and 6 do not support a fixed background image in a header to receive a particular effect. I tested in IE 7 and its now is now behaving as it should, so the book I think was released before IE 's 7 official release. Would it have been wiser to wait for this? I think there would have been a more structured outline then of what is still missing and a clearer picture of what to expect in the future working with multiple browsers and demands.
In a ocean of resources in print and online, in the midst of so many tutorials and inspirational articles written on CSS we need a book that works like a Swiss Army Knife to help us solve the problems and issues we come across when we are working on a project and don~Nt have the time to wade trough some of the indeed fascinating and very valuable recourses we can find online. We need a direct solution...We need to know that when we do get stuck or want to push the boundaries that there is a resource that is not lost in a endless list of valuable bookmarks, however well organized, one we can access immediately. Therefore it can be a valuable reason to work through the chapters of interest so that when time is of the essence we know where to go.
Especially when working on commercial project and when we are not at liberty to suggest that, well maybe IE users will not get the full experience of some more advanced and also very popular browsers, but...
In short it is imported to know what works or not and
to have some workarounds or at least to hide from those browsers who don~Nt support what you are doing.
Me personally, I am passionate in my belief and the reasoning behind it, to not letting a product of lesser quality hold down a development,.
And especially because of this is it so important to have the tools at hand to know when to support or bypass older browsers to know what works and what not etc.
I almost want to keep the book a secret just because of the fantastic light box example in chapter 4.6. What a beauty. The book really makes you want to explore and experiment with some more java code added in to your designs. A true gem released a bit to hasty. I don't want a refund and you cannot borrow my copy!
How many times have you visited a website and thought to yourself, "Gee, that looks cool. I wonder how they do that?" Well, chances are this book can answer that question. The examples and solutions are pretty clear, which is good. Color images would have been nice (granted, expensive), seeing as how color plays a big role in styling.
Note that this book doesn't teach you CSS, nor does it profess to. If you're looking to learn about CSS there are better books out there, for example, O'Reilly's "Head First HTML & XHTML with CSS" (which is in color). This book serves a "I know what I want to do - how do I do it" purpose, and it does that well.