Style Sheets

The Easy Way To Stylize Your Web Pages

“CSS is an easy way to effect sweeping stylistic changes in your web pages without much effort.”

Finally, style separated from structure!

Have you ever come across a web page that was “stylish” to the point of illegibility? Of course you have. As a web surfer, have you ever wished you could turn off web author’s “style” and view content the way you please? As a web author, have you ever wished there were a way to stylize your web pages without having to resort to using hundreds of extended tags like all over the place? Haven’t we all! Now there is an alternative to all this nonsense: Cascading Style Sheets (CSS). CSS is an easy-to-use document formatting language developed by the The World Wide Web Consortium (W3C). CSS uses common terminology known to anyone familiar with typography, and was designed to give web publishers nearly as much creative control in their web pages as in printed material. The beauty of CSS is that it works right along with proper, structural HTML (HyperText Markup Language, used in writing web pages). Web pages written in proper HTML reveal the logical structure and outline of your document, and are guaranteed to display properly in any browser, regardless of platform or system configuration. Documents written in proper HTML enhanced with style sheets give viewers freedom of choice. CSS support can be toggled on and off by the user, so that, if your readers don’t like your style, but still want to read your content, they can turn off your “kewl” blue on black color scheme, and read your offerings in a more palatable palette. 😉 With style sheets, both web developers and web surfers have more control than ever. Developers have even more control with CSS than they had with extended HTML markup, and viewers finally have the freedom to view web content as they please, without having illegible styles forced upon them. This divorcement of style from structure is also a very good thing for the visually disabled, (including the color-blind!) who rely on text-to-speech synthesizers, and/or special color schemes and enlarged text to make Web content accessible. CSS allows for this by keeping out of the way of HTML.

“CSS takes style specification much further than extended HTML, kludges, and hacks ever could.”

Much more powerful than extended markup!

CSS takes style specification much further than extended HTML, kludges, and hacks ever could. With CSS, you can control not only the font face, size, and color, but also the line height, line spacing, and even letter and word spacing! You can create fancy effects like overlapping text. You can specify text color, background color (or image), border style, border thickness, border color, margins, padding, etc. for every single element of the document, not just for the body! CSS is an easy way to effect sweeping stylistic control in your web pages without much effort. Rather than inserting extended markup tags everywhere you want to change font face, color, size, etc., you make one declaration that applies to every instance of an element. For example, to achieve the level-three header effect on this page, I simply made a single CSS declaration for the H3 element in my style sheet, and every level-three header is affected the same throughout the document! Any time I change my mind, and want to change the style of my document, all I have to change is a line or two in my style sheet; I don’t have to touch the actual page at all! In fact, you can even create one style sheet to use for all the pages in your web site, which saves a lot of formatting time, reduces document size and download time, and brings design unity to your pages.

Some peeks at CSS…

You may look at the style sheet that’s stylizing this page. You will see how relatively simple it is to create a style sheet that determines the style of a plain HTML document.

Want to view this page in different “themes”?

If your browser supports user selection of style sheets, you can select from a number of CSS style sheets I’ve written. See the magic of CSS as the page transforms before your very eyes! (In Mozilla browsers, for example, you go to the menu bar and select View, Page Style…) [I actually wrote five different style sheets for this so that people could view the page and see the changes, but now I’m taking it easy and letting the nice people at WordPress.com do the CSS for me.]

What they say about this page…

• “‘There are some really great improvements in CSS2,’ said Web developer Daniel Greene, who has been working with the style sheets since they were introduced.” —Chris Oaks, Wired News
• “Besides Microsoft’s dubious CSS Gallery, Daniel’s pages were one of the first places to see Style Sheets in action, back in the early days. : )” —Sue Simms, CSS Pointers
• “Esta es una de las primeras páginas que hizo uso real de CSS1, realizada por Daniel Greene.” —Juan R. Pozo, HTML con Clase [Translation: This is one of the first pages that made actual use of real CSS1, brought to you by Daniel Greene.]
• “Daniel Greene’s Style Sheets demo page has a column of ivy down the left hand side of every page. He’s used this gif to create the effect.” —WestCiv, learn web standards :: side panels
• “Naked Sites: Shedding tables and running free” —Donimo Shriver of Web Nouveau and meryl.net present…, css collection web sites without tables

They’re also talking about…

• My CSS Font Properties Test
• My Features of Good Web Design

Bibliography

These are the resources I used to learn CSS and HTML, and to validate my documents:

• The newsgroup comp.infosystems.www.authoring.html
• The W3C’s XHTML 1.1 Specification
• The W3C’s HTML Validation Service
• The W3C’s Cascading Style Sheets Level 2.1 Specification
• The W3C’s CSS Validation Service
• The W3C’s CSS1 Test Suite
• The W3C’s Style Sheets in HTML Documents
• Tobias Brown’s Web Site Development Information
• John Pozadzides and Liam Quinn’s Introduction to Cascading Style Sheets
• Warren Steel’s Hints for Web Authors
• Stephen Traub’s Designing for Multiple Browsers Without Being Bland

Browser support

When I first wrote this page in 1996, only one browser (Microsoft Internet Explorer) supported CSS. As more browsers supported CSS, I maintained an updated list. Now, I don’t know of any browser that doesn’t support CSS! Browsers don’t all render CSS in the same way, however, and they never have. It’s no wonder I was one of the first people on the Web to publish in CSS; I was an amateur and I wasn’t going to lose any money or business if certain people couldn’t read some of my pages. It was all experimental! You can see how dangerous it was to publish with CSS by looking at the following:

A description of a Bug in Backgrounds for DIV Elements from the early days