CSS is an easy way to effect sweeping stylistic changes in your web pages without much effort.
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 <FONT> </FONT> 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.
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.
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. Or you may view screen shots of either an early version of this page as rendered in Microsoft Internet Explorer 3 or the current page style as it was rendered in Opera 3.6.
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…)
These are the resources I used to learn CSS and HTML, and to validate my documents:
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: