book

Professional CSS: Cascading Style Sheets for Web Design, Second Edition

Name: Professional CSS: Cascading Style Sheets for Web Design, Second Edition
ISBN: 9780470177082

by Christopher Schmitt, Todd Dominey, Cindy Li, Ethan Marcotte, Dunstan Orchard, Mark Trammell

May 2008

Intermediate to advanced

319 pages

7h 26m

English

Wrox

Read now

Unlock full access

Copyright
About the Authors
Credits
Acknowledgments
Introduction
Whom This Book Is ForHow This Book Is StructuredConventionsSource CodeErratap2p.wrox.com
1. Best Practices for XHTML and CSS
1.1. Shoehorning Structure and Presentation Together1.2. Learning to Love Your Markup1.2.1. XHTML: The New Hotness1.2.1.1. Beginning with the DOCTYPE Declaration1.2.1.2. Keeping Your Markup Well Formed1.2.1.3. Closing Every Element1.2.1.4. Setting Elements and Attributes to Lowercase1.2.1.5. Requiring a Value for Every Attribute1.2.2. Abstracting Style from Structure1.2.2.1. Avoiding Divitis and Classitis1.2.2.2. Moving toward Well-Meaning Markup1.2.2.3. Familiarizing Yourself with Other Markup Elements1.2.2.3.1. Better Know Headers1.2.2.3.2. Better Know Paragraphs1.2.2.3.3. Better Know Unordered Lists1.2.2.4. Take Stock of Your Content, Not Your Graphics1.3. CSS: Adding a Layer of Style1.3.1. Better Know Selectors1.3.1.1. Type Selectors1.3.1.2. The Universal Selector1.3.1.3. Descendant Selectors1.3.1.4. Class Selectors1.3.1.5. id Selectors1.3.2. Other Selectors1.3.2.1. Child Selectors1.3.2.2. Attribute Selectors1.3.3. Combining Multiple Declarations1.3.4. Grouping Selectors1.3.5. Indulging in Inheritance1.3.5.1. Examining Element Hierarchy1.3.5.2. Overriding Inheritance1.3.6. Putting It All into Action1.4. Understanding the Cascade1.4.1. Discovering Style's Origin1.4.2. Sorting by Specificity1.4.3. Sorting by Order1.5. Putting Theory into Practice1.5.1. Building to a Reliable Browser1.5.2. Rationalizing the Need for Hacks1.5.2.1. The Bug1.5.2.2. The Solution1.5.2.3. The Road Is Long1.5.2.3.1. CSS-Discuss1.5.2.3.2. Position Is Everything1.5.3. The Problem with Hacks1.5.4. Hacking Artfully for Fun and Profit1.6. Summary
2. Google's Blogger.com: Rollovers and Design Touches
2.1. Interviewing the Designer2.2. CSS-Enabled Rollovers2.2.1. Changing the Color and Background Color of Links (Simple)2.2.1.1. The XHTML2.2.1.2. The CSS2.2.2. Changing the Color and Background Color of Links (Complex)2.2.2.1. The XHTML2.2.2.2. The CSS2.2.2.3. The Images2.2.2.4. What Does It All Mean?2.2.3. Changing the Background Color of Table Rows2.2.3.1. The XHTML2.2.3.2. The CSS2.2.3.3. What Does It All Mean?2.2.4. Changing the Color of Text2.2.4.1. The XHTML2.2.4.2. The CSS2.2.4.3. Images2.2.4.4. What Does It All Mean?2.2.4.5. Dealing with Internet Explorer2.2.5. Changing the Background Position on Links2.2.5.1. Making Rollovers from Embedded Images2.2.5.2. The XHTML2.2.5.3. The CSS2.2.5.4. The Images2.2.5.5. What Does It All Mean?2.2.5.6. Dealing with Internet Explorer2.3. Summary
3. The Classic U.S. PGA Championship Web Site
3.1. Developing the Drop-Shadow Effect3.1.1. Creating the Illusion3.1.2. Adding Extra Realism3.2. Creating CSS Drop-Down Menus3.2.1. Customizing the Positioning of Drop-Down Menus3.2.2. Customization: Styling the Drop-Down Menus3.2.2.1. Important Caveat3.2.2.2. Understanding Usage3.2.2.3. The Bottom Line3.3. Engineering Web Standards–Compliant Flash Embedding3.3.1. Using the Flash Satay Method3.3.2. Writing the object/embed Tags Using JavaScript3.3.3. Knowing the SWFObject3.4. Summary
4. The University of Florida's UFL.edu
4.1. Looking Back at UF's First Web Site4.1.1. Reflecting on Its Revisions4.1.2. Examining the Current Site4.2. Defining the Site4.2.1. Building the Team4.2.2. Starting with User Research4.2.3. Examining Ourselves4.2.4. Defining Technical Specs4.2.4.1. Utilizing Web Standards4.2.4.2. Incorporating Accessibility4.3. Creating a Main Navigational Structure4.3.1. The XHTML4.3.1.1. Unordered Lists4.3.1.2. Nested Unordered Lists4.3.1.3. Weighting for Semantics4.4.4.4.1. The CSS4.4.2. The Images4.4.3. Brick by Brick4.4.3.1. Building the Box4.4.3.2. Styling the Section Headers4.4.3.3. Styling the Lists4.5. Making the Supplementary Navigation4.5.1. The XHTML4.5.1.1. Utility Navigation4.5.1.2. Role-Based Navigation4.5.1.3. Wrapping the Two Together4.6.4.6.1. The CSS4.6.1.1. Styling the Supplementary Navigation4.6.1.2. Styling the Utilities4.6.1.3. That Tricky Box Model4.6.1.4. Styling the Roles4.6.1.5. The Final Outcome4.7. Revisiting Flash Embedding4.7.1. Back to Flash Satay4.7.2. Server-Side Detecting with Flash Satay4.7.2.1. Apache and the BrowserMatch Directive4.7.2.2. Drawbacks and Barriers to Flash Satay with Server-Side Detection4.8. Looking for Missteps4.8.1. Leading Only by Example4.8.2. "Force of Habit" or "Who Moved My Input Field?"4.9. Summary
5. Stuff and Nonsense Ltd.: Strategies for CSS Switching
5.1. Laying the Foundation5.2. CSS Switching5.3. The Mechanics: How It's Supposed to Work5.3.1. Persistent Style Sheets5.3.2. Preferred Style Sheets5.3.3. Alternate Style Sheets5.3.4. Another Solution You (Almost) Can't Quite Use5.4. The Reality: How It Can Work Today5.4.1. Jumping on the JavaScript Bandwagon5.4.2. Gathering Requirements5.4.3. Building the Switching Function5.4.4. Baking a JavaScript Cookie5.4.5. Down with PHP5.4.6. Creating the Script5.4.7. Eating the Cookie5.5. CSS beyond the Browser5.5.1. Media Types: Let the Healing Begin5.5.2. The Problem with Choice5.6. Stuff and Nonsense: Building a Better Switcher5.7. Meet the Designer: Andy Clarke5.8. Summary

6. Adventures of CindyLi.com: Blog Modifications
6.1. Blogs6.2. CSS: Cindy Li Starts to Blog6.3. Design Elements6.3.1. Creating a Layout6.3.2. Laying Out the Design6.4. Creating the Site6.4.1. Designing the Navigation Bar6.4.1.1. Sizing6.4.1.2. Coloring6.4.1.3. Text6.4.2. Making the Rollover Graphics6.4.3. Setting Up the Navigation Markup and CSS6.4.4. Integrating the Rollovers6.5. Setting the Speech Bubble6.5.1. Coding the Speech Bubble6.5.2. Reapplying the Effect6.5.3. Putting on the Flickr Badge6.6. Check Box Styling6.7. Summary
7. AIGA Cincinnati: HTML Email Templates
7.1. Dealing with HTML Email7.2. Producing the Template7.2.1. Printing the Design7.2.2. Creating the HTML Table Layout7.2.3. Adjusting the Design7.2.4. Exploring the Effects of CSS Rules on an HTML Email Template7.3. Embedding Styles7.4. Using Preflight for HTML Email7.5. Summary
8. Professional CSS Book Site: Using Transparent PNGs
8.1. PNGs and Browser Support8.1.1. Image Filter Workaround for Using PNGs with IE68.1.2. HTC Script Workaround for Using PNGs with IE68.1.3. Color Issues with PNGs8.2. Using Alpha-Transparency8.2.1. Better Shadows8.2.2. Using Color Shades8.3. Summary
9. Building CSS Layouts
9.1. On Grids and Layouts9.2. Doing What Print Can't9.3. CSS Positioning: The Fundamentals9.3.1. Absolutely Fabulous Positioning9.3.2. Positioning That's Absolutely Relative9.4. Building Three Columns: Laying the Foundation9.4.1. Writing the XHTML: From Mockup to Markup9.4.2. A Layer of Style9.4.2.1. Get Your Offset On: Introducing the Positioning Rules9.4.2.2. Remembering to Keep It Absolutely Relative9.5.9.5.1. Battling Browser Bugs9.5.1.1. Macintosh Internet Explorer 59.5.1.2. Windows Internet Explorer 5.x+9.6. Setting Some Boundaries: The max-width Property9.7. Summary
A. HTML 4.01 Elements
B. Rules for HTML-to-XHTML Conversion
B.1. The XML DeclarationB.2. Picking Your Comfort LevelB.3. Rules for XHTMLB.3.1. Don't Forget the Namespace AttributeB.3.2. Quoting Attribute ValuesB.3.3. No Attribute MinimizationB.3.4. Terminating Empty ElementsB.3.5. Cleaning NestsB.3.6. XHTML with CSS and JavaScript FilesB.3.7. Lowercase Element and Attribute NamesB.3.8. Introduce ID When Using nameB.3.9. Encode AmpersandsB.3.10. When in Doubt, Validate
C. CSS 2.1 Properties
D. CSS Troubleshooting Guide
D.1. ValidationD.1.1. HTMLD.1.2. CSSD.2. Manipulating the ElementsD.2.1. Zeroing Out the Padding and MarginsD.2.2. Applying Color to Borders and BackgroundsD.2.3. Placing Variations in Property ValuesD.2.4. Playing Hide and SeekD.2.5. Validating AgainD.3. Bringing in Outside HelpD.3.1. Web Site ResourcesD.3.1.1. positioniseverything.netD.3.1.2. Web Developer ToolbarD.3.1.3. FirebugD.4.D.4.1. Mailing ListsD.4.1.1. css-discussD.4.1.2. Babble List

Content preview from Professional CSS: Cascading Style Sheets for Web Design, Second Edition

Chapter 2. Google's `Blogger.com`: Rollovers and Design Touches

	Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.
	--Jeffery Veen

In August 1999, a small company known as Pyra Labs released a new product called Blogger to the Web. Not only would it go on to earn that team fame and fortune, it would also kick-start the blogging revolution.

Blogger lets people such as you, your friends, and really anyone publish a Web site, or more specifically, a blog. It makes this process simple, fast, and really very friendly indeed. It's also free, which is a bit of a bonus on the Web, where no one wants to pay for anything.

In February 2003, a company called Google (you might have heard of it) whipped out its checkbook and acquired Pyra Labs, bringing Blogger into the Google fold. Along with the contracts and funding came something rather nice as far as the Blogger Team was concerned: the appearance of a BlogThis! button on the Google Toolbar. The overwhelming number of people using the Google Toolbar each day has enabled blogger.com to experience a huge surge in traffic. Sign-ups should have gone through the roof. But they didn't. What was going on?

A few phone calls later and user-experience experts Adaptive Path were on the case. With them came designer and CSS maestro Douglas Bowman of Stopdesign. Together they would examine the behavior of visitors to blogger.com and realize that something fundamental ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.

Read now

Unlock full access

More than 5,000 organizations count on O’Reilly

O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.

Julian F.

Head of Cybersecurity

I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.

Addison B.

Field Engineer

I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.

Amir M.

Data Platform Tech Lead

I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.

Mark W.

Embedded Software Engineer

Smashing CSS: Professional Techniques for Modern Layout

Publisher Resources

ISBN: 9780470177082Purchase book

Cloud Computing

Data Engineering

Data Science

AI & ML

Programming Languages

Software Architecture

IT/Ops

Security

Design

Business

Soft Skills

Professional CSS: Cascading Style Sheets for Web Design, Second Edition

by Christopher Schmitt, Todd Dominey, Cindy Li, Ethan Marcotte, Dunstan Orchard, Mark Trammell

Chapter 2. Google's `Blogger.com`: Rollovers and Design Touches

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.