Introduction to CSS

History of Electronic Publishing

Electronic publishing arose from a historical context of real-time story telling, asynchronous writing, and physical type setting that supported reproducible printing on paper. Computers have only been involved in the process for fifty or so years. We can look backward to get a sense of where our current CSS standard comes from, but I find it just as interesting is to look forward. New York Times Digital CEO Martin Nisenholtz suggests we are evolving towards a new realm of electronic publishing whereby:

• The means of production come into existence to empower a new creative class to tell stories that fluently combine all media types.
• This storytelling is done in a non-linear format, as databases are woven seamlessly into the fabric of the story, unencumbered by news hole or broadcast time frame.
• These stories are continuous and are aggregated into a kind of universe where users can join "views" from around the world. These views are an audio/visual window into place and topic, with multiple sub-views branching off the main view. The sub-views can involve different places, analyses and discussions.
• The role of the aggregator is to build and maintain this news universe. To paraphrase photographer Henri Cartier-Bresson, the heart will always beat faster in some places than in others. The aggregator must always be responsible for this editorial judgment. But now he can draw from so much more.
• Finally, the boundaries of the medium extend into social networks supported by online reputation systems. The character of a publication is respected as much for its audience interactivity as it is for its content.

This seems important to keep in mind while we entrench ourselves in CSS. With CSS, we can extract the look and feel of our presentation from the content — and, so, we should ask ourselves how CSS would evolve to support the world view of Martin above (since he will likely have gained some respect and power to help drive change quickly). Will CSS continue to help present a mixed, multimedia-based media? Ask yourself "how far we have already moved towards this view?" Then, ask yourself "if you like the vision or not?"

History of Cascading Style Sheets

The W3C recommends you read their The CSS saga if you are interested in the history of CSS. Since the W3C coordinated the specification and made it a successful standard, they should know well how that all transpired.

Using Cascading Style Sheets with DIV elements

The following CSS layout primer (from here on to the bottom of this Web page) comes to you mainly through the courtesy of Ross Shannon.

The <div> tag was designed specifically to take over from tables as a layout tool. It is a block-level DIVision element that can hold whatever you need inside it. You can have blocks of text in divs and then put them together in a layout. You have immense freedom, with the ability to add these blocks, or layers, on top of each other. Check out this example.

The div tag has few attributes of its own (save for align="left | right | center"), with all of its formatting applied through stylesheets. To set up a simple navigation block, we would use code like this (with the CSS being in an external .css file or style block):

div#navigation {width: 200px; background: gray; padding: 10px; }

<div id="navigation">...navigation links...</div>

This example code uses some very simple CSS code. All block-level elements can have a width property, specified in units or as a percentage, and then I just added a background color and some padding space around the div content.

Floating Elements

Since divisions are block-level (i.e. they default to 100% of the available screen width and add line breaks between each other), they will all just stack up underneath one another unless you position them in some way. The simplest way to do this is to use the CSS float property, the backbone of most CSS layouts. You can float any element left or right, and it will align itself over to the side of whatever element it is contained within.

To create columned layouts, you simply float all of the column divisions to the same side and they will line up beside each other, as long as they fit. Laying out content in this way has immediate benefits such as progressive downloading (as the text is loaded it is displayed onto the page immediately, so your visitor can read as the page is forming around the text). You can also give each column specific margins and padding, giving you greater freedom to space your content out.

With these floating elements you can mimic a table structure, and have your page in a traditional layout without all the drawbacks of tables. But CSS wasn't content to merely emulate the layout mechanisms of the past, now you can control the position of elements on the page down to the pixel.

CSS Positioning

There are two types of positioning: absolute and relative. The codes you'll be using are:

tag {position: choice; top: 0px; bottom: 0px; left: 0px; right: 0px; }

Absolute Positioning

If you position an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. Say I wanted a graphic to appear 46 pixels from the top of the page and 80 pixels in from the right, I could do it. The CSS code you'll need to add into the image is:

img {position: absolute; top: 46px; right: 80px; }

You just add in which method of positioning you're using at the start, and then push the image out from the sides it's going to be closest to. You can add the CSS directly into the tag using the style attribute (as shown in the introduction to stylesheets), or you can use classes and ids and put them into your stylesheet. It works the same way. The recommended method is to add classes for layout elements that will appear on every page, but put the code inline for once-off things.

The image would appear like so. As you can see, it is possible to have things overlapping with absolute positioning.

Positioning Layers

To create what we call layers with the div tag, use code like this:

<div style="position: absolute; left: 610px; top: 80px; height: 400px; width: 100px; padding: 1em;">layer stuff</div>

First you specify the position of the layer, then its dimensions (which is optional, the layer will resize itself). If you want to give color to the layer's background, add the background-color: red; attribute in with the rest of your CSS code. As usual, you can use websafe colors, or named colors.

Anything that could go on a normal page can be positioned with divs. They load far faster than, say, a table layout. Tables do not display on-screen until they have been downloaded in their entirety. With layers, all the information a browser needs is contained in the style attributes you've added. Therefore, it will display as soon as any part of it is downloaded.

To get layers overlapping each other you need to use the z-index command. Add z-index: 1 in with the positioning code and this element will appear above everything without this command. If you want something else to go over this layer too, add z-index: 2 and so on. The higher the index, the closer the div will appear to the front of the page.

Put the layer that holds your page's content at the top of your code. This is what readers want to see immediately. Your navigation and other presentational components can then load around this, allowing your reader to begin reading as soon as possible and making your navigation available when it is most likely to be used: after the page has been read.

To see some examples of designs laid out with both float and absolute positioning, have a look-see at my redesigns section.

Relative Positioning

When you position something relatively, you are modifying its position from where it would have been if you hadn't changed anything. I find that to be the easiest way of thinking about it. For instance, in the next sentence, I'll offset some words 12px down and 22px right relative to their start position.

Well, here are some words (some words)

The words in parentheses are the words in their original positions, and the bold ones are the moved words. The CSS code to move them is:

<span style="position: relative; top: 12px; left: 22px;">some words</span>

You should notice that if you want to move something left, you use the right code, and push it away from that side and vice-versa.

To override an inherited position property, and make the element just a normal part of the page again, set it to position: static.

Horizontal Centering

Centering a div or any other block-level element horizontally is a special case for CSS layout, even moreso because there is a bug in Internet Explorer’s implementation of the standard way of doing it. The standard way is to set the element’s horizontal margin values to auto, like so:

#wrapper {width: 760px; margin: 0 auto; }

That will work in browsers like Firefox, Safari or Opera. However, this will have no effect in versions of Internet Explorer below 7. There is a hack we can use though, so that we get horizontal centering in all browsers. To whit, IE incorrectly centers block-level elements if the element that they’re contained in has text-align: center applied. So we can apply this property to the body element, and all the elements within it will be centered.

body {text-align: center; }

One final step is then necessary. The line above will, of course, center all the text inside the centered elements as well, which is generally not what we want, so we need to align the text within back to the left. So here’s all the code:

body {text-align: center; }
#wrapper {width: 760px; margin: 0 auto; text-align: left; }

Easy when you know how, eh? Be careful if you’re planning on mixing absolute positioning and this centering method in the same layout. If you want other elements to be absolutely positioned inside the wrapper, make it relatively positioned first.

#wrapper {position: relative; width: 760px; margin: 0 auto; text-align: left; }

This will make an inner element that you absolutely position at, for example, top: 0; left: 0; appear at the top left corner of the wrapper, and not of the the top left of the entire window.