COM271, Week 1

Cascading Style Sheets (CSS) for Layout

Syllabus | Table of Pages | Assignments | References and Useful Links

The Need for Common Browser Standards: mid 1990s

When Tim Berners-Lee developed his html for the world wide web, remember that he lived in a world of slow-transmission technologies where the focus was on sharing text documents to be viewed on monochrome monitors. That changed when the graphics capabilities of Mosaic appeared in 1993. As personal computers became more affordable and internet transmission rates steadily faster, the 1990s exploded with opportunities for web developers.

More and more, the focus shifted to development of pages with careful layout, placing images here, text there, in pixel-perfect precision. A pixel is the smallest unit of a monitor screen or a printed page; today, monitors typically have at least 72 pixels ("dots") per inch, and even the average home printer features 1200-2400 tiny pixels per inch. Do the math: how many dots make up one square inch on a monitor or on a printed page? That's a lot of individual bits of information!

To use the new capabilities of the web to full advantage, browser makers and web developers found new ways to add color, take advantage of font families, and to position elements as they were displayed on the page. By late 1995, the original Mosaic group had spawned Netscape, which issued its own browser, full of new and unique elements, and Microsoft had released its first browser, Internet Explorer 1.0. As browser makers began implementing new (and generally proprietary and not compatible) capabilities, it became apparent to all that a better, coordinated system was needed to guide how content was displayed on a screen. Seeing the coming clashes between industry leaders, the world wide web consortium was formed in late 1994 in an attempt to develop common standards for html and for any new elements as they developed.

(You may not realize it, but you are fortunate to be learning about web development today. If you were taking this course in 1995, for example, you would have to deal with competing browsers. You would have to learn how to design a page full of special scripts to determine whether your page was being interpreted by a Netscape or a Microsoft browser, and then deciding whether to use elements like <layer> (available only on Netscape for a while, but not on IE!); some of the newer features which you might have wanted to incorporate on your page might not work at all on certain browsers, and you had to figure all of that out. If only these blasted browser makers could learn to play nice together!)

Cascading Style Sheets

To take advantage of steadily improving technology for web and personal computers, developers wanted more complex pages. In the late 1990s, this meant a great expansion of use of html to provide variety in fonts (sizes, font families like verdana or Georgia, and images. Web pages began to fill with html tags, each tag spilling over with attributes for color, etc. A few words of content often generated 6-8 times as much html code for presentation. Coded web pages were a mess, and developers had too many headaches. The solution was Cascading Style Sheets.

Styles affect the way in which a page is rendered, which means how the text and images appear on the browser screen. Style sheets provide a way to effect styles to the entire page or to its various parts, contained within html tags.

Normal rendering: Web pages contain content. Browsers normally render this content from top to bottom, in the order in which the content is written on the web page, first things appearing at the top of the page, etc. Unlike printed pages, web pages appear inside of windows of varying sizes, on monitors of varying sizes, at resolutions of various density. The web developer has very little control over this highly plastic medium! But don't panic. Like a swimmer caught in a powerful surf, you merely need to relax, learn to catch the wave, and to go with the flow (very zen-like, isn't it?).

Given no instructions other than the html structures that you have used to mark up your content (text and images), a browser will start displaying your text, from left to right for as wide a window as you have open, at the resolution that your computer uses (as you once established through your operating system's "display settings," remember?). When the html </p> tag signals that you have reached the end of a paragraph, the browser will skip down a little distance and begin to display whatever is next, more text or an image. Images appear, taking up as much space as the image's size (remember, at 72 dpi, dots per inch), followed by whatever comes next.

HTML attributes (we'll come to these soon) might allow an image to "float" to the right or left, and the browser (since the late 1990s) will flow text around the image. Within lines of text, you can add italics or boldface elements, or even links (this link goes nowhere; but it is a link, technically). But in the world of strict html, this is cumbersome and limited, a bit like tying your shoe laces while wearing mittens.

Work on a single system to styling pages began at the W3C in November, 1995, according to Raggett's history, with the goal, "...that everyone would soon be able to write simple styles for HTML, as one would do in Microsoft Word and other desktop publishing software packages."

Embedded styles: Much of our time will be spent looking at how this works today, but for now let me provide a simple illustration. Suppose that I wanted to make the next paragraph look unique, setting it off with different margins, a boarder, some space between the border and the text, and a nice background color. Oh, and I'd like to have a different color text, one that compliments the background color. Here's how I'd do it, by using an html attribute, style=, and some style sheet attribute:value pairs:

<p style="margin:15px 0 15px 35px;width:80%;padding:10px;border:3px outset #f30;background-color:#a00;color:#fc0;text-align:center;font:bold italic 28px Verdana, san-serif;">Hot stuff, eh?</p>

Hot stuff, eh?

Style Sheets: This adds a lot of fancy complexity, but it's still a bit of a coder's nightmare. You have to look cross-eyed at the line of code to spot the actual text (only 3 words). This is not much of an improvement over just using a bunch of html attributes (e.g., <p color="#ffcc00; width="80%"...). One of the underlying philosophies of the W3C is that content and code should be simplied, and in this case it means isolating all of the style information to a separate part of the page. This is done by setting up a special section of the page for style instructions, using a selector (we'll come to this shortly) to tie the styles to the html element, and using an identifier for each element that we want a special style for.

Within the html head section of the page, we'd establish a style sheet, which would list rules for any styles that applied to elements on the page. It would look like this:

<style type="text/css">
p#cool{margin:15px 0 15px 35px;width:80%;padding:15px 0 20px;border:5px inset #999;background-color:#0FF;color:#003;text-align:center;font:28px Verdana, san-serif;font-size: 28px;font-variant:small-caps;text-decoration:underline;}

p#cool em{font-size:1.3em;font-weight:bold;color:#60c;}
</style>

Within the page, we'd identify any particular elements that we wanted styled, using the html id attribute, to which we would assign a unique identifying name (here, id="cool")

<p id="cool">Or do you prefer <em>Cool</em>?</p>

It would then render like this:

Or do you prefer Cool?

Notice that the part of the document that contains the content that we want to render is now much simpler, with markup needing about the same number of characters as the text itself; the point is that this is easier for you as developer to read. The html identifier is picked up in the CSS selector, p#cool, which you can read as "the paragraph with the id "cool," and then the CSS associates a set of rules, set off by the curly brackets, { and }. The rules consist of CSS attributes paired with values. Attributes are separated from values with a colon. Attribute:value pairs can be strung together inside the curly brackets, each pair separated by a semicolon.

In our example style sheet, we have a second selector, p#cool em. This you can read as "any emphasis (=italics) tag that is contained within a paragraph identified as cool". Here, we use this descendent selector to modify the <em> tag's contents within the unique paragraph.

Too much? I understand. I've bought a few "Dummies" books to learn things, and felt embarrassed at first because I was even intimidated by their simplified content! A few weeks later, however, I wondered why I'd wasted money on such simple stuff. You'll be a zen master of html and css very soon. Don't worry if you run into a few of those "howzat?" moments as things get started. All you need to understand at this point is that you will learn to write rules that allow you very precise control over parts of your page, even down to single words (or characters!).

Our task this semester will be to learn how to set up the html structure and to set off unique elements (or groups of elements that share a common style; the groups are referred to as classes) and to learn how to write CSS selectors and their corresponding rules made up of pairs of attributes and values. With these, we can pretty much design a page with pixel-level precision and absolute control over spacing, color, fonts, etc.

But what if we want to allow the user to alter some of the page properties after the page is loaded into the browser (say, to change colors, open a temporary window, or to check entries in an html form before sending its information back to the server)? We have one more thing to learn, programming through javascript, which I'll introduce next.