Build Cool Sites Faster And Dodge Common CSS Problem
by Richard Mansfield
CSS Web Design For Dummies®
Published by
Wiley Publishing, Inc.
111 River Street
Hoboken, NJ 07030-5774
Published by
Wiley Publishing, Inc.
111 River Street
Hoboken, NJ 07030-5774
 |
| CSS Web Design for Dummies |
Richard Mansfield was the editor of COMPUTE! Magazine from 1981 to 1987.
During that time, he wrote hundreds of magazine articles and two columns.
From 1987 to 1991, he was editorial director and partner at Signal Research.
He began writing books full-time in 1991 and has written 36 computer books
since 1982. Of those, four became bestsellers: Machine Language for Beginners
(COMPUTE! Books), The Second Book of Machine Language (COMPUTE!
Books), The Visual Guide to Visual Basic (Ventana), and The Visual Basic
Power Toolkit (Ventana, coauthored by Evangelos Petroutsos). His books
combined have sold more than 500,000 copies worldwide and have been
translated into 12 languages.
Richard’s recent titles include Office 2003 Application Development All-in-One
Desk Reference For Dummies, Visual Basic .NET All-in-One Desk Reference
For Dummies, Visual Basic .NET Weekend Crash Course, Visual Basic .NET
Database Programming For Dummies, Visual Basic 6 Database Programming
For Dummies (all published by Wiley), Hacker Attack (Sybex), and The Wi-Fi
Experience: Everyone’s Guide to 802.11b Wireless Networking (Pearson
Education, coauthored by Harold Davis).
TEAM
Author’s Acknowledgments
I want to thank acquisitions editor Katie Feltman for her thoughtful and helpful advice. I’ve worked with Katie before, and she knows her stuff. I was also lucky to have two strong editors improve this book. Project editor Linda Morris asks the right questions, makes lots of good suggestions, and overall stands in as a representative of the reader. She requests clarification when necessary, and ensures that the reader will find consistent, useful information. She deserves credit for her taste and the high quality of her editing.
The technical editor, Vanessa Williams, reviewed the entire manuscript for technical quality. For that I thank her. I’m happy to report that she found few flaws in the programming code, but I’m certainly glad to have an opportunity to fix the few flaws she did spot. Vanessa also suggested alternative CSS techniques
and additional resources, deepening the technical information available in the book.
To these, and all the other good people at Wiley who contributed to the book,
my thanks for the time and care they took to ensure quality every step along
the way to publication.
Introduction
Welcome to the world of Cascading Style Sheets (CSS). With CSS, you
can design gorgeous and highly effective Web sites. CSS offers power
and flexibility to Web site developers and designers. This book shows you
how to use CSS to make your Web pages come alive.
Marketing experts like to say that the box helps sell the jewelry. CSS does
several useful things, but one of the most important is to help you design
much more attractive packages to hold your Web page contents.
Creating Compelling Designs
CSS allows you to separate presentation from content when building a Web
site. Put another way, HTML itself is rather limited in what it can effectively
display. It’s fine for holding or describing content (such as a paragraph of
text), but the appearance of raw HTML Web pages isn’t very stylish (to put it kindly).
With HTML, you often can’t find an easy way — or any way at all — to display
the content so that it looks really good when someone views it in a browser.
Using CSS techniques, you can often make your site much more attractive,
and at the same time, enforce style rules that help unify the entire site’s
appearance across all its pages.
In this book, you find out how to wrap your online content in appealing visual
designs using CSS, including special dramatic effects such as animated transitions
between images or entire pages. Style sheets can provide striking, welldesigned
containers into which relatively plain HTML content is poured.
The best Web pages aren’t merely efficient, logical, and stable — they also
look really cool. The end result of employing CSS is a more attractive Web site
with a more coherent, effective overall design.
Separating Content from Style
CSS also improves efficiency by allowing you to separate content from the
styles that control the content’s appearance. You can describe your CSS styles
in the header section of a Web page — thereby moving them up and out of
the HTML code. Or you can even put your CSS style rules in entirely separate
files. A Web page’s HTML resides in one file. It merely includes a link specifying
the location of the independent CSS file that contains the style rules
(how a Heading 1 headline or paragraph elements are supposed to look,
where they’re positioned, how big they are, what texture underlies them, and so on).
If you’re a designer working on a Web page with a programmer, it’s more
efficient for you to separate your code from the programmer’s HTML or
script code. A designer can work on an external CSS style sheet, rather than
wading through the programmer’s HTML files and trying to manage style
attributes embedded within the HTML code. The HTML programmer will
appreciate this, and so will you, the CSS designer. No more stepping on each other’s toes.
Of course, many Web sites are designed by a single person wearing many
hats: HTML, script, and CSS can all be written by one talented individual. This
book doesn’t neglect that audience. Most of the CSS examples in this book
are contained within HTML pages, demonstrating how the entire page works
in harmony. You can just load the book’s examples into your browser and see
the delightful results immediately. An entire chapter is even devoted to
scripting, so that you can get your feet wet with interactive dynamic CSS effects as well.
Benefiting from the Cascade
CSS offers various kinds of benefits. For example, a single style sheet can cascade
its effects through all the pages in a Web site. One side of effect of this is
that if you decide to change your site’s default body font from Arial to Times
New Roman, you need make that change only once within the style sheet,
rather than hunting down all the attributes throughout the entire set of HTML
code files that make up your site. Another benefit of using CSS is that the style
sheet only needs to be downloaded once to the user’s computer. Thereafter,
it’s called up from a local cache, resulting in smaller HTML pages. Your Web
pages load faster into the user’s browser — still a major consideration for the
60 percent or so of online Americans who still don’t have broadband highspeed
Internet connections.
If you’ve already worked with CSS, this book will sharpen your skills and
show you lots of new techniques. You’ll take your Web design to the next
level. If you’re new to CSS, you’re in the right place: You’ll find just what you
need here to build unified, attractive, inviting Web sites.
This book shows you, the CSS designer, how best to exploit, expand, administer,
and write code for Web pages. The book covers all the essentials of CSS,
with many step-by-step examples showing how to manage the various elements
of CSS, including:
How to design Web pages without using tables
Understanding CSS inheritance
Best coding techniques
Page elements (spacing, fonts, colors, and so on)
Practical ways to integrate CSS into new or existing Web sites
Syntax rules, properties, and values
How CSS works together with HTML and scripting
Embedded and external style sheets
Advanced visual effects such as transitions
Selectors and declarations
The latest CSS3 features
The End of the Browser Wars
CSS has been available for several years, but, like DHTML (dynamic HTML for
Web page animation effects), CSS languished because of the browser wars.
Basically, Netscape’s Navigator and Microsoft’s Internet Explorer attempted
to enforce different, proprietary standards. Now that Netscape is all but dead
in the marketplace and standards have become relatively stable because of
the dominance of Internet Explorer, CSS has become a major technology for
the creation and design of first-rate Web sites. Some incompatibility issues
still exist, but this book deals with them only occasionally. Why? Because often
you need not write complex, workaround code to take into account an audience
so small that, practically speaking, many Web pages simply ignore them.
That said, I realize that some designers are forced to deal with browser compatibility
issues, so I do explore the topic in some depth in Chapter 17. You
see how to detect which browser and version the user has and how to take
appropriate steps to deal with it in your Web page code. I also tell you where
to find the best compatibility charts online; how to see what your page looks
like and test its behavior in non-compliant browsers; and how to automatically
redirect a browser to a different Web page or Web site if that browser
can’t deal with your CSS code.
A few years ago, people were moving from Netscape to Internet Explorer, but
a large percent of your Web site’s audience was still using Netscape. You had to
write CSS (and HTML and scripting) that worked effectively in both browsers.
That’s simply no longer true. The migration is over; Netscape is merely a
ghost wandering the halls of the computer history museums.
Most CSS books waste lots of space on compatibility issues. I’ve decided to
greatly reduce coverage of that topic for precisely the same reason that
today’s newspapers infrequently devote space to the Gulf War of 1991. That
war’s over. Same with Netscape and the other, minor browsers like Opera
that have a small user base. History and popular opinion has elected Internet
Explorer (IE) as the standard — who are we to argue? One exception is Mozilla
Firefox, which is coming out of left field and could eventually challenge
Internet Explorer’s dominance in the browser arena.
Firefox is an “open source” — in other words, “no charge” — piece of software.
Of course, Internet Explorer is also sometimes described as free. True, it
comes “free” with Windows, but as we all know, that’s not precisely the same
as no charge. You do buy Windows, and its browser is a feature of Windows
that you get bundled into the operating system.
Another meaning of open source is that the code, the programming underlying
the Firefox browser, is available to anyone. Lots of good programmers are
writing interesting plug-ins and modifications that you can add to Firefox to give it new features.
Firefox is fast, sleek, and overall pretty stable. In fact, it’s not under constant
attack by hackers, as is IE. There are two reasons for this: not too many
people are using Firefox (yet), so the payoff of using it to spread viruses is
rather poor. Second, virus authors are frequently in sympathy with the ideals
of the open source software community, and, shall we say, less inclined to appreciate Microsoft.
So, watch out, IE. Firefox, or something similar, could eventually gain market
share and, possibly, eventually become the browser standard. But for now,
more than 95 percent of browser users are looking at your Web page through
IE, so you can generally ignore the problems that arise when you try to make
your CSS code work with all possible browsers and all possible versions of
those browsers. IE is likely to continue to dominate for at least the next few years.
Just relax and assume that your Web page visitors are either using IE, or are
accustomed to the penalties for sticking with a fringe browser. But if you
must face the compatibility issue, take a look at Chapter 17.
Who Should Read This Book
This book is designed to satisfy a broad audience, including both Web programmers
and designers. The book shows how to exploit CSS by developing
solutions to common Internet coding and Web-page design problems.
Programmers discover how to more effectively control browser elements in
order to build Web clients that are as interactive and efficient as traditional
Windows applications. Designers see how to create attractive, coherent Web
sites. Beginners will find the book to be an effective tutorial introduction to
CSS; experienced users will find it a useful, up-to-date reference.
How This Book Is Organized
The overall goal of CSS Web Design For Dummies is to provide an enjoyable
and understandable guide for the CSS designer. This book is accessible to
people with little or no CSS experience.
The book is divided five parts. But just because the book is organized doesn’t
mean you have to be. You don’t have to read the book in sequence from
Chapter 1 to the end, just as you don’t have to read a cookbook in sequence.
In fact, if you want to see what’s coming up in CSS3, just go to Chapter 15 right away.
If you want to find out how to create well-designed Web pages without resorting
to the traditional HTML tables to hang your elements on, just flip over to
Chapter 12, which explains how to build pages using only CSS positioning features.
You’re not expected to know what’s in Parts I or II to get results in Part
III. Similarly, within each chapter, you can often scan the headings and jump
right to the section covering the task that you want to accomplish. No need
to read each chapter from start to finish. I’ve been careful to make all the
examples and CSS code as self-contained as possible.
Each of them works, too. They’ve been thoroughly tested.
All of the source code for all the examples in this book is downloadable from
this book’s Web site at www.dummies.com/go/csswebdesign.
The following sections give you a brief description of the book’s five main parts.
Part I: The ABCs of CSS
This first Part introduces CSS, explaining its purposes and fundamental
nature. You see how common tasks are accomplished and find out all about
the elements of CSS design. You also discover how CSS improves on HTML
and find out how to build practical style sheets for real-world Web site solutions.
You figure out how to think beyond HTML — putting together Web
pages that have style and grace — all because of the added power that CSS
gives a designer. Topics in this part include starting from scratch, migrating
from HTML to CSS, understanding the meaning of the cascade, and getting
your feet wet with the major building blocks of CSS behavior: selectors and
inheritance. You also consider what kind of editor (if any) you might want to
use to assist you in building CSS styles.
Part II: Looking Good with CSS
Part II begins with some practical exploration of the details of CSS design: how
you position the pages various zones, conditional formatting, relative positioning,
absolute and fixed elements, and stacking flow. You go on to see all about
handling text: a refresher course for designers who need to brush up on classic
fonts, weights, special effects, and good text design principles in general.
This section also serves as a course in text display techniques for those new
to the subject. All the essentials are covered, from simple concepts such as
font size, to advanced subjects like the uses of the various font families (and
why you should avoid some of them like the plagues that they are). This book
also covers the kinds of values you can provide to CSS properties, like color
and position. You explore the units of length and measurement, color values,
percentages, and related positioning and sizing specs. Part II concludes with
a chapter where you play around with some great designer secrets: kerning,
leading, custom backgrounds, adding textures, and using graphics applications
to improve the quality of some of your page elements. In general, you
find out how to achieve striking, compelling design and how to manage something
equally important: avoiding vulgarity in your designs.
Part III: Adding Artistry: Design
and Composition with CSS
Part III picks up and expands the topics that concluded Part II: how to make
beautiful Web pages using CSS. You consider the elements of good page composition,
the secrets of Web design gurus, and the issues involving symmetry.
(Is severely symmetrical layout ever a good idea, outside of debutante-ball
and wedding invitations?) You also find out how to take a new look at your
overall design, abstracting the shapes so that you’re not reading any text or
viewing any photos. Instead, you’re looking at the black, white, and gray rectangles
(and hopefully other shapes) that compose your page.
In this Part, you go on to manipulate margins, padding, borders, lines, and
frames. These elements allow you to build effective zones within your page,
cuing the viewer about the nature of each zone and collecting related information
inside separate zones. For example, a caption and the photo it describes
can be considered a logical zone, so you might want to frame them, or use a
line beneath them, or add some margins around them.
This Part also explores the best way to display tables and lists and how to
get rid of tables that are not displayed. (Traditionally, tables have been used
as hooks on which to hang the other elements of a Web page, allowing designers
to position things. Now, you can get that job done better with pure CSS.)
Part III concludes with some cool transition effects. You see how to gently
fade in some text or graphics. (You’ve seen the effect on the better-designed
Web pages: One element gradually grows dim as a second element underneath
it becomes visible.) You also discover other special effects like those
seen in movies and TV. Do you want to add some of these animations and
transitions to your own pages? You can.
Part IV: Advanced CSS Techniques
Part IV focuses on various sophisticated techniques for those of you who
have mastered the CSS basics, beginning with an exploration of the ways that
CSS styles cascade, the tree structure, and inheritance in general. You also
discover the latest cutting-edge selectors, pseudo-elements (they’re not as
pseudo as they might seem), and how CSS3 will redefine the way CSS behaves.
You find out how to employ scripting, which for many designers is their first
exposure to true computer programming. True, any time you communicate
with a computer (CSS included), you’re using a computer language and, in a
technical sense, programming. But scripting is hard-core programming. You
can tell the Web page to do pretty much anything you want it to do with
scripts. You learn about dynamic code (changing CSS properties and styles
while your page is in the user’s browser), timers, animation techniques, toggling,
and other cool effects possible only via scripts.
You need not go on to become a script programmer, however, to put these
effects into your Web pages. You can just copy and paste — monkey see,
monkey do fashion — and the scripts do their jobs just as well as if you knew
what you were doing. Part IV concludes with how to fix ailing CSS and HTML
code. Called validating, parsing, or more accurately, debugging, you find out
the best way to track down and repair Web pages that misbehave and don’t
do what you want them to do.
Part V: The Part of Tens
This is the smallest Part in the book, but it’s moist and succulent. It includes
various tips, tricks, techniques, and topics that I wanted to include in the
book but didn’t quite find a perfect place for elsewhere.
Sure, it’s a grab-bag — I’m not hiding that fact — but you might find the just
tip you’ve been looking for here. The topics include a utility that you can use
to understand complex CSS selectors (it translates complicated CSS code
into ordinary English); how to avoid common CSS coding errors; a browserindependent
way to center headlines, text, or graphics; fixing script problems;
some of the best CSS online resources, including a site that offers excellent,
understandable tutorials on the more baffling aspects of advanced CSS
coding; an explanation of why you should consider using Visual Studio as a
CSS editor; an online site that specializes in ways to use CSS to build columns
into your pages; and more. Each tip was chosen for its succulence.
Screenshot
Purchase Now !
Just with Paypal
Just with Paypal
Product details
Price
|
|
|---|---|
File Size
| 12,788 KB |
Pages
|
385 p |
File Type
|
PDF format |
ISBN
| 0-7645-8425-1 |
Copyright
| 2005 by Wiley Publishing, Inc |
Contents at a Glance
Introduction
Part I: The ABCs of CSS
Chapter 1: CSS Fulfills a Promise
Chapter 2: Getting Results with CSS
Chapter 3: Up and Running with Selectors
Part II: Looking Good with CSS
Chapter 4: Taking a Position
Chapter 5: All About Text
Chapter 6: Managing Details in Style Sheets
Chapter 7: Styling It Your Way
Part III: Adding Artistry: Design and Composition with CSS
Chapter 8: Web Design Basics
Chapter 9: Spacing Out with Boxes
Chapter 10: Organizing Your Web Pages Visually
Chapter 11: Designing with Auto and Inline Elements
Chapter 12: Handling Tables and Lists (And Doing Away with Tables)
Chapter 13: Creating Dramatic Visual Effects
Part IV: Advanced CSS Techniques
Chapter 14: Specializing in Selection
Chapter 15: CSS Moves into the Future
Chapter 16: Programmatic CSS
Chapter 17: Testing and Debugging
Part V: The Part of Tens
Chapter 18: Ten Great CSS Tips and Tricks
Chapter 19: Ten Topics That Don’t Fit Elsewhere in the Book (But Are Important)
Index
Table of Contents
Introduction..................................................................1
Creating Compelling Designs .........................................................................1
Separating Content from Style .......................................................................1
Benefiting from the Cascade ..........................................................................2
The End of the Browser Wars ........................................................................3
Who Should Read This Book .........................................................................4
For designers, would-be designers, programmers,
and developers alike .........................................................................5
Making do in a shaky economy ...........................................................5
Plain, Clear English .........................................................................................6
How to Use This Book ....................................................................................6
Foolish Assumptions ......................................................................................7
How This Book Is Organized ..........................................................................8
Part I: The ABCs of CSS .........................................................................8
Part II: Looking Good with CSS ............................................................9
Part III: Adding Artistry: Design and Composition with CSS ............9
Part IV: Advanced CSS Techniques ...................................................10
Part V: The Part of Tens ......................................................................10
Conventions Used in This Book ..................................................................11
Special symbols ...................................................................................11
Avoid typos: find all the code online ................................................12
What you need to get started ............................................................12
Icons used in this book .......................................................................12
Part I: The ABCs of CSS ..............................................13
Chapter 1: CSS Fulfills a Promise . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
Improving HTML ...........................................................................................15
Getting Efficient with CSS .............................................................................17
Changing Web design for the better .................................................17
Being ready for anything ....................................................................18
Designers Want to Design ............................................................................20
Where CSS Fits with the Tools You Already Use .......................................22
Getting Practical ............................................................................................24
Look for CSS features in your current software ..............................24
Resources on the Web ........................................................................24
Avoiding Browser Compatibility Problems ................................................25
Getting Dramatic with Filters .......................................................................26
Chapter 2: Getting Results with CSS . . . . . . . . . . . . . . . . . . . . . . . . . . .31
Starting from Scratch ....................................................................................31
Selectors and Such: CSS Syntax ...................................................................33
Properties refer to attributes .............................................................34
Grouping ...............................................................................................35
Showing Some Class .....................................................................................35
Specifying All-Purpose Properties ..............................................................37
Using an ID Selector ......................................................................................38
Specifying more than one class .........................................................40
Capitalizing on case-sensitivity .........................................................40
Just stay in lowercase .........................................................................41
When Styles Cascade ....................................................................................41
Visualizing specificity .........................................................................41
Understanding CSS specificity ...........................................................43
Grasping Inheritance ....................................................................................45
Chapter 3: Up and Running with Selectors . . . . . . . . . . . . . . . . . . . . . .47
Working with Universal Selectors ...............................................................48
Using Multiple Declarations .........................................................................49
Using Attributes as Selectors ......................................................................50
The Simplest Attribute Selector ..................................................................52
Matching attribute selection types ...................................................53
Matching partial attribute values ......................................................53
Matching exact attribute values ........................................................54
Building Your First Style Sheet ....................................................................54
Transforming a Word document into a Web page ...........................55
Visualizing levels of specificity ..........................................................57
Creating an External Cascading Style Sheet ..............................................59
The importance of !Important ...........................................................60
The importance of being closest .......................................................62
Omit semicolons ..................................................................................62
Everything must be important ..........................................................62
Adding New Selectors ...................................................................................63
When Cascades Collide ................................................................................64
Part II: Looking Good with CSS ...................................67
Chapter 4: Taking a Position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69
Relativity Explained ......................................................................................72
Flow Versus Positioning, Floating Versus Coordinates ............................73
Controlling Layout with Offsetting .............................................................76
Moving Deeper into Positioning ..................................................................79
Stacking Elements on Top of Each Other with the Z-Axis ........................81
Combining Stacking with Translucence .....................................................82
Chapter 5: All About Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .85
Thinking About User Interfaces ..................................................................85
Substituting Fonts .........................................................................................86
Types of Type ................................................................................................87
Avoiding monospace ...........................................................................90
Using system styles .............................................................................91
All Roads Lead to Rome ...............................................................................92
Simplicity above all .............................................................................92
When you’re not too picky about typeface .....................................94
Using Font Variants .......................................................................................94
Specifying Font Weight .................................................................................95
Using the Font-Variant for Small Caps ........................................................96
Simple Font-Style ...........................................................................................96
Choosing the Right Typeface Size ...............................................................97
Specifying relative sizes ......................................................................97
Controlling font size with greater precision ....................................98
Specifying Absolute Measured Sizes ..........................................................99
Font: The All-Purpose Property .................................................................100
Adjusting Line Height .................................................................................101
Decorating Text with Underlining and Strikethrough ............................103
Transforming Text with Capitalization .....................................................104
Shading with Drop-Shadowing ...................................................................105
Chapter 6: Managing Details in Style Sheets . . . . . . . . . . . . . . . . . . .107
Specifying Size and Position ......................................................................107
Measuring length ...............................................................................108
Understanding little em ....................................................................109
Figuring the Percentages ............................................................................111
Adding a Bit of Color ...................................................................................113
Creating special paragraph styles ...................................................115
Calculating color ...............................................................................115
Using the color list ............................................................................116
Coloring borders ...............................................................................118
Using inset border colors .................................................................119
Where does light come from? ..........................................................121
Coloring the Background ...........................................................................123
Chapter 7: Styling It Your Way . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127
Kerning for Better Headlines .....................................................................127
True kerning .......................................................................................129
Ultra kerning ......................................................................................131
Vertical Tightening ......................................................................................133
Adjusting percentages ......................................................................133
Understanding baselines ..................................................................135
CSS3 Introduces Kerning Mode .................................................................135
Word spacing ...............................................................................................135
Aligning Text ................................................................................................138
Vertical aligning .................................................................................138
Using descriptive values ..................................................................139
Aligning by percentages ...................................................................140
Horizontal Alignment ..................................................................................141
Indenting Text ..............................................................................................142
Texturing ......................................................................................................143
Setting Individual Background Properties ...............................................147
No background inheritance ..............................................................148
Special repeats ...................................................................................148
Background Positioning .............................................................................149
Part III: Adding Artistry: Design and Composition with CSS ........153
Chapter 8: Web Design Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155
Organizing with White Space .....................................................................156
Take a second look ............................................................................156
Getting on balance ............................................................................156
Emphasizing an Object with Silhouetting ................................................159
Adding Drop Caps .......................................................................................160
Trapping White Space ................................................................................163
Following the Rule of Thirds ......................................................................164
The four hot spots .............................................................................165
Background image positioning ........................................................166
Keeping It Appropriate ...............................................................................168
Chapter 9: Spacing Out with Boxes . . . . . . . . . . . . . . . . . . . . . . . . . . .169
Getting a Grip on Boxes ..............................................................................169
Adding a border .................................................................................171
Adding padding .................................................................................171
Adding a margin .................................................................................172
Vertical Positioning .....................................................................................173
Horizontal Positioning ................................................................................176
Breaking Up Text with Horizontal Lines ...................................................178
Chapter 10: Organizing Your Web Pages Visually . . . . . . . . . . . . . . .183
Managing Borders .......................................................................................184
Specifying a simple border ...............................................................184
Choosing from lotsa border styles ..................................................186
Mixing and matching styles .............................................................188
Specifying border width ...................................................................189
Coloring a border ..............................................................................190
Floating About .............................................................................................191
Canceling a Float with Clear ......................................................................194
Chapter 11: Designing with Auto and Inline Elements . . . . . . . . . . .197
Employing Auto to Control Layout ...........................................................197
Specifying margins ............................................................................200
Centering ............................................................................................201
Using !DOCTYPE to force IE to comply ...........................................201
Vertical Positioning with Auto ...................................................................202
Handling Inline Elements ............................................................................203
Chapter 12: Handling Tables and Lists (And Doing Away with Tables) . . . . .207
List Styles O’ Plenty ....................................................................................208
Getting exotic with the list-style-image property ..........................210
Positioning lists .................................................................................211
Putting it all together ........................................................................213
Managing Tables ..........................................................................................213
Stalking invisible .gifs ........................................................................213
Employing the table-layout property .............................................214
Avoiding properties not supported by IE .......................................216
Doing Without Tables .................................................................................216
Positioning where you will ...............................................................217
Placing content willy-nilly ................................................................217
Loving your layout a little too much ...............................................222
Creating Columns that Resize with the Browser .....................................224
Building Fixed Columns ..............................................................................228
Chapter 13: Creating Dramatic Visual Effects . . . . . . . . . . . . . . . . . . .233
Impressing with Static Filters ...................................................................234
Dazzling with Transition Filters ................................................................238
Fading Between Images ..............................................................................243
Transitions between Pages ........................................................................246
Part IV: Advanced CSS Techniques ............................251
Chapter 14: Specializing in Selection . . . . . . . . . . . . . . . . . . . . . . . . . .253
Getting Specific with Inheritance ..............................................................253
Grasping tree structure ....................................................................254
Parents versus ancestors .................................................................254
When a root sits above the tree ......................................................255
The shaky tree ...................................................................................256
Offspring Inheriting .....................................................................................257
Contextual Selectors ...................................................................................257
Selecting by context rather than grouping ....................................258
Descending deeper ............................................................................261
Styling distant descendants .............................................................262
Thwarting Descendant Selectors ..............................................................263
Selectors Using Attributes .........................................................................264
Chapter 15: CSS Moves into the Future . . . . . . . . . . . . . . . . . . . . . . . .265
Getting to Know CSS3 .................................................................................265
Working with Mozilla-supported CSS3 features .............................266
Setting opacity ...................................................................................268
Discovering False Pseudo-Classes ............................................................269
Hyperlink formatting with pseudo-classes ....................................270
Hovering with pseudo-classes .........................................................272
Adding your own class name to a pseudo-class ............................272
Selecting first children ......................................................................273
Employing Fake Pseudo-Elements ............................................................273
Creating quick drop caps with first-letter ......................................274
Using the first-line element for special lines of text ......................275
The Future of Pseudo .................................................................................275
Enabling, disabling ............................................................................276
Checking radio buttons and check boxes ......................................276
Figuring Out Dubious Descendant Selectors ...........................................277
Chapter 16: Programmatic CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .279
Extending CSS with Scripting .....................................................................279
Executing Scripts Automatically upon Loading ......................................282
Using the Right Tools for the Job ..............................................................283
Modifying CSS Styles through Programming ...........................................284
Changing styles ..................................................................................284
Changing the rules ............................................................................288
Timing Things Right ....................................................................................290
Grasping countdown timers ............................................................293
Employing metronome timers .........................................................294
Chapter 17: Testing and Debugging . . . . . . . . . . . . . . . . . . . . . . . . . . . .297
Checking Punctuation .................................................................................297
Validating Your Work ..................................................................................300
Ignoring Fringe Browsers ...........................................................................301
Going back in time .............................................................................301
What if you must consider compatibility? .....................................301
Checking compatibility charts .........................................................302
Sniffing browsers ...............................................................................302
Forcing users to upgrade ..................................................................303
Trying Out the W3C Validator ...................................................................304
Hoping for helpful error messages ..................................................307
Identifying property value problems ..............................................308
Validating HTML ..........................................................................................309
Meeting some requirements ............................................................310
Finding a better bug trap ..................................................................314
Debugging Script .........................................................................................315
Part V: The Part of Tens ............................................317
Chapter 18: Ten Great CSS Tips and Tricks . . . . . . . . . . . . . . . . . . . . .319
Letting Users Control Font Size .................................................................319
Making Sure Your Borders Show Up .........................................................320
Watching Out for Color Clash ....................................................................320
Centering for Everyone ..............................................................................320
Timing Blurring and Other Effects ............................................................321
Debugging Script .........................................................................................323
Finding a List Apart (Get It?) .....................................................................324
Using Your Own Bullets in Lists ................................................................324
Specifying Graphics Locations ..................................................................325
Combining Classes ......................................................................................326
Aunt Mildred’s Glazed Carrots ..................................................................327
Chapter 19: Ten Topics That Don’t Fit Elsewhere in the Book
(But Are Important) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .329
Keeping Current via the Internet ...............................................................330
Upgrading HTML Web Pages to CSS .........................................................330
Finding Good Tutorials and Reference Information ...............................330
Remembering Inheritance ..........................................................................331
The SelectORacle: Getting Explanations About Complicated Rules ....332
Providing Alternatives ................................................................................332
Letting the User Decide ..............................................................................333
Exploring Visual Studio ..............................................................................335
Rediscovering Columns ..............................................................................336
Playing with Positions ................................................................................337
Index........................................................................339
●▬▬▬▬▬❂❂❂▬▬▬▬▬●
●▬▬❂❂▬▬●
●▬❂▬●
●❂●
═════● ●═════
