ptg16476052436 LESSON 15: Advanced CSS: Page Layout in CSS
from viewing styles. But if you are designing just for CSS-enabled browsers, such
as recent Chrome, Firefox, Safari, or Opera versions, those workarounds become
less important. Even the latest versions of Internet Explorer have good support for
HTML5 and CSS3.
n Are you using positioning CSS for layout? It’s relatively easy to use CSS for
formatting text, controlling fonts, and setting colors. Using it for layout is trickier,
especially with inconsistent browser support among some of the older versions.
n Will you use embedded or linked style sheets? Here, I’ll give you advice: Use
linked style sheets whenever you can. Some of the examples in this book may use
embedded style sheets, but that’s mainly because it’s easier to give you one listing
than two.The preceding list isn’t exhaustive; you’ll encounter more choices to make when design-
ing and using CSS, but you should have learned enough by now to answer them.Style Sheet Organization
The way you organize your style sheet can affect how easy it is for you to use and main-
tain your CSS, even if the effects are not evident in the presentation. This becomes even
more critical if you’re in a situation whereby someone else may have to use your styles in
the future. You may work with an organization in which multiple people will be working
on the same site, or perhaps when you move on to another job your successor will inherit
your style sheets.
To make a great style sheet, be organized and clear in what you’re doing, and above
all, use comments. Web developers often overlook comments in CSS, but if you have
to come back later and try to figure out why you did something, they’re invaluable.
Comments can also be used to group related styles into sections.
A comment in CSS is written /*, then the text of your comment, and then */ to close it.
You can enclose entire blocks of CSS inside a comment if you want to prevent it from
being used.
Reasonable names for class and id attributes can make your style sheet easier to read;
choose names for these important selectors that reflect the functions of the elements. If
you can, avoid selectors based solely on appearance characteristics, such as the boldtext
or redbox classes. Instead, try something descriptive of why you’ve chosen those styles,
such as definition or sidebar. That way, if you change your page styles later, you
won’t have to rewrite your HTML. There are few things as confusing as a rule, like the
following:
.redbox { color: blue; background-color: white; }