Cascading Style Sheets: The Definitive Guide
Add a single line to each of your web pages and you suddenly have full control over the stylistic appearance of your web pages from a central file:
- <link rel="StyleSheet" href="/css/reviews.css" type="text/css" media="screen">
If you then add, in your /css/reviews.css file, a set of lines like:
[toggle code]
-
h1 {
- font-family: Bahamas,Kids, sans-serif;
- font-variant: small-caps;
- color: Green;
- }
Suddenly all of your web pages that reference this file will show level one headlines in Bahamas, small caps, and green text. Add another line that says “text-align: right;” and your level one headlines will all be aligned to the right--no re-uploading of all thirty-six review pages, you upload the one style sheet and all your review pages immediately change their styles.
Even more cool is that you can set “sub-types” of styles. So if you want to have a special paragraph style for author line in your reviews, you would make your paragraph code be “<p class="author">” instead of just “<p>” and then add the following set of lines to your style sheet:
[toggle code]
-
p.author {
- text-align: right;
- font-style: italic;
- }
Now, every paragraph whose class is “author” will follow this style. Later on, if you want it centered, or in a different font, or bold instead of italic, you can make the change to your single style sheet, and it will apply to all web pages which reference that style sheet.
And style sheets allow you to do much, much more. They give you more control over the stylistic presentation of your web pages while at the same time they remove the need for style code within your web pages. You can concentrate on making your web pages present content and content-based markup, and put the style-based markup elsewhere, where it belongs.
Eric A. Meyer is one of the experts who worked on creating the cascading style sheets standard. His “Cascading Style Sheets: The Definitive Guide” is published by O’Reilly, who make so many of the best “definitive guides” for web design and computer programming. (The cover has two salmon on it.)
The book starts with a description of the differences between a structural language, which is what HTML was supposed to be, and a presentational language, which it has become, to the detriment of universal readership. Meyer goes into detail about why it is important to separate structure from presentation. Structural markup makes it easier to find things on the web; it makes it easier for alternative browsers to develop--browsers that let users view the web through an outline mode instead of a page mode, or browsers that let the blind hear web pages, or that display web pages on tiny screens such as most PDAs.
And because HTML wasn’t really designed for presentational markup, it doesn’t do a good job of it. But CSS provides for a very rich set of stylistic markups. It can position, for example, our headlines not only aligned to the right as you can do with HTML, but also boxed to the right, with an image behind it, and the paragraph text it applies to wrapping around it on the left and a solid black border between the text and the headling. Not just possible, but easy.
[toggle code]
-
h1 {
- float: right;
- width: 25%;
- border-left: medium solid;
- background-image: url(/Graphics/Backgrounds/Flock-Grey.gif);
- text-align: right;
- }
Problems? Sure. The above won’t display as you expect it to in browsers that don’t support cascading style sheets, or that don’t support them fully. But if you’re a real web designer, that isn’t really a problem. Because you’ve used h1 as the base markup, all web browsers will display the headlines as headlines. They won’t be displayed as a bordered sidebar, but they will be displayed as headlines--whether the display is on a computer screen, a PDA readout, a television screen, a reader for the blind, or a search engine’s indexing routines.
You get the best of both print and non-print: you can specify styles that give you nearly full control, and you can do so in a manner that works in all browsers. (There is also a very short discussion of the fact that style sheets are not limited to ‘standard’ browsers. You can have style sheets for different types of browsers; one for computers, one for PDAs, one for printers, one for voice readers, etc., if you want to.)
With this power comes greater responsibility. In the past, you had to try hard to make your pages unreadable to large numbers of readers. With CSS, you can make your pages unreadable to those whose browsers support CSS much more easily. You can very easily start setting tiny font sizes, incompatible background and foreground colors, and text positions that overlap, to the point that it looks really cool at first glance and completely unreadable for anyone who actually might want to purchase something from you.
The rest of the book after the first chapter goes through how to use cascading style sheets in your documents, starting with the very basic rules for creating style sheets and applying them to your HTML markup.
When you understand the structure of HTML (as explained in chapter 2) you will be able to best use style sheets. In the past, we’ve been allowed to make very unstructured HTML documents: not closing our “<p>” paragraph tags, for example, and not closing “<li>” list item tags. With style sheets, we need to be more careful: anything that can take a style needs to have a closing tag, so that the browser knows where the style ends.
How to tell how well your browser supports styles? If it supports styles well, this paragraph will be displayed so as to standout from the rest of the paragraphs. It will have an italicized first line and a red stylized drop-cap for the first letter. I did this by specifying a style for the “first-letter” and “first-line” pseudo-elements of a “sidebar” class. This paragraph will also be indented on both the right and left, and have solid black bars on the top and bottom. If it doesn’t work, you’ll see this paragraph as a perfectly readable normal paragraph. (You can view the source of this document to see the included style sheet.)
After the basics, he discusses the importance of “units and values”. In the past we have often made the mistake of specifying exact values for things like the size of our page, resulting in odd looking pages as monitors get both bigger (for computers) and smaller (as browsers become available for television sets and PDAs). There are absolute units, such as inches or centimeters, and relative units, such as percentages, and the ‘em’ and ‘ex’ units. I used the ‘percentages’ unit above to make the drop-cap three times the height of the line. No matter what font or font size is used, the drop cap will (almost always) be a three-line drop. There are also specifications for color and for sound for browsers that read).
After those two introductory chapters, he gets into the nitty-gritty of modifying text properties, box properties, fonts, colors, headings, background colors and images, and an indepth discussion of margins and padding for your ‘boxes’ (similar to tables, but solely for laying out pages).
The back of the book contains a reference to style sheet properties, and a “support chart” that describes how well each property is supported by the major visual browsers.
If you’re doing web pages that use stylistic enhancements, you should really be using style sheets and this book will get you there. If you understand HTML, you will find CSS a snap to use.
- Eric A. Meyer
- “Eric A. Meyer has been working with the Web since late 1993 and is an internationally recognized expert on the subjects of HTML and Cascading Style Sheets (CSS).”
- Cascading Style Sheets: The Definitive Guide: Eric A. Meyer
- If you’re doing web pages that use stylistic enhancements, you should really be using style sheets and this book will get you there. If you understand HTML, you will find CSS a snap to use. This is a well-written book by the number one CSS expert.
More CSS
- MacHeist bundle: Taskpaper, CSSEdit, and Awaken
- MacHeist is running a bundle of several applications for $49. It includes Taskpaper, CSSEdit, Awaken, and several other games and utilities.
- Style Sheets and HTML, Part Two
- This second half of the style sheet draft tutorial covers adjacent elements, pseudo-elements, and floating elements.
- Cascading style sheets and HTML
- You can use style sheets to simplify your web pages, making them readable across a wide variety of browsers and situations, without sacrificing presentation quality.
- Webmaster in a Nutshell
- Without doubt the best reference work for webmasters that you’ll find. It contains the “reference” part of most of O’Reilly’s web-relevant nutshell books. You can find references for HTML 3.2, the CGI standard, JavaScript, Cascading Style Sheets, PHP, the HTTP 1.1 protocol, and configuration statements and server-side includes for the Apache/NCSA webservers.
More HTML
- Nisus “clean HTML” macro
- The Nisus macro language is Perl; this means we can use all of Perl’s strengths as a text filter scripting language in Nisus.
- Flash on iPhone not in anybody’s interest
- Flash on iPhone is not in the interest of people who buy iPhones. The only people who really want it are poor web designers who can’t get out of 1992.
- Web display of Taskpaper file
- It is easy to use PHP to convert a Taskpaper task file into simple HTML conducive to styling via CSS.
- ELinks text-only web browser
- If you need a text browsers on Mac OS X, the ELinks browser compiles out of the box.
- iPhone development another FairPlay squeeze play?
- Why no iPhone-only applications? Is it short-sightedness on Apple’s part, or are they trying to encourage something big?
- Six more pages with the topic HTML, and other related pages