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 8. Professional CSS Book Site: Using Transparent PNGs

	What passes for woman's intuition is often nothing more than man's transparency.
	--George Jean Nathan

In this chapter you learn how to use Transparent PNGs while designing a Web site. As a practical example, the sample that will be used will be the home page of www.procssbook.com, shown in Figure 8-1. The page was designed with the use of Transparent PNGs.

Before learning how to use Transparent PNGs, it's important to discuss why Transparent PNGs can be useful when laying out a design for a Web site.

Like GIFs and JPEGs, PNG images are ideal for Web use. Like GIFs, the PNG is great for displaying small images with few colors, such as logos and icons. Also, PNGs sport a few advantages over GIF images. Most notably, they support alpha-transparency. What is alpha-transparency? GIF files are only capable of displaying a pixel as either completely transparent or completely opaque: this is known as binary transparency. When an image contains alpha layers, however, parts of an image can be partially transparent. You can specify a level of transparency from 0 to 255. Figure 8-2 shows a comparison of images with layers of varying transparency.

When working with most images and graphic files, you will find that a PNG is able to achieve greater compression than a GIF. PNGs provide for a much greater range of transparency options than GIFs. Alpha-channel transparency is the number one option available. A PNG can also provide for a ...

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 8. Professional CSS Book Site: Using Transparent PNGs

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.