CSS

cascading style sheets

HTML, on its own, does a good job of conveying information. That's what it's supposed to do.

The trouble is, html looks flat and boring. It's possible to specify fonts and colors and styles within html tags, but it would be much simpler to style the tags themselves. Then, every time that tag appears, its contents could be given the same treatment as all the other tags of its kind.

Let's use the little bit of html found in my monograph on html, elsewhere among the manifestos. The html renders a title, an image, and a caption, with a link in the caption (I made the link a recursive, self-referential dummy, by having the anchor refer to #, rather than a web address - it's still a link, but it goes nowhere, and is useful for testing purposes, and for ours):

01. <h3>Green Fly on Barberry</h3>
02. <img src="images/green-fly.jpg"width="200"height="200" />
03. <br />
04. You can see my reflection on the back of that <a href="#">fly</a>.

In our example, I could apply styles to the image. Here's how it renders, now:

Green Fly on Barberry

Doesn't the image look like it could use a bit of breathing room? With CSS, I can tell the image to have a margin of, say, ten pixels - and why not give it a black border of three pixels?

I can apply the styles directly to the <img /> tag, like this:

02. <img src="images/green-fly.jpg"width="200"height="200"style="border:3px solid black;margin:10px;" />

But each time I want to apply those styles to an image, I have to add that to the html for each image.

However, with a style tag, I can create a style that will apply to all <img /> tags, like this:
<style> img {border:3px solid black; margin:10px;} </style>

I put that in the body, right at the beginning, so it applies to all instances of the <img /> tag in the html that follows. This cascade, in that it applies down the line, is the derivation of the name, Cascading Style Sheets.

The <style> tag can contain as many styles as the designer wants, and is known as an Internal Style Sheet.

Even better, though, is an External Style Sheet, in which all the style information is kept in a separate file. That way, if the designer decides to give all the images a different border (we'll try one), and across an entire website of multiple pages, it's easier to keep that data in one place, rather than having to modify each page, as with Internal Style Sheets, or each instance of a tag, with Inline Styles.

The style data is linked to the html document with - as you may have anticipated - a <link> tag, in the head section of the html file. A link to a stylesheet looks like this:

<link rel=stylesheet href="style.css" type="text/css" media=all>

The stylesheet is right there, next to the image directory, so the link is relative and nearby.

CSS has special syntax, too, which is similar to html and other languages. The properties of the tag which is being styled are found on separate lines, separated by a semicolon. The property is declared, followed by a colon, followed by the style being applied to the property. It's simple. Here's the external stylesheet for our example - just like the internal version, but not within an html tag:

img { border:3px solid black; margin:10px; } Now, when the page loads, it links to the stylesheet, and the styles are applied as the html is rendered on the page, like this:

Green Fly on Barberry

You can see my reflection on the back of that fly.

With CSS, I can take this a bit further, and style the image so it looks a bit more like a photograph. Here's the new stylesheet:

img { margin:10px; padding:15px; border-top:1px solid #ccc; border-right:1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #ccc; background:#f9f4f4; }

margin is pretty self-explanatory, and padding might be, as well. If you imagine the <img /> element as a box, then the margin is the space around the outside (I've requested ten pixels of it in my stylesheet), and the padding is the space around the inside, between the edge of the box (the border) and the content (fifteen pixels of that).

In our case, I applied a one-pixel border all the way around, but used hexadecimal color codes to specify a light gray and a dark gray, like highlights and shadows on the edges of a picture. The padding is between the border and the image itself, contributing to the effect of an actual photograph.

For a bonus, I threw in a background color, which shows through in the padding, between the image and the border, further contributing to the actual-photo look.

This is only the beginning of what CSS can do. For example, I could style the <h3> tag in the stylesheet so that the font was Impact, 40 pixels high, and purple. The revised stylesheet:

h3 { Font:40px impact; Color:purple; } img { margin:10px; padding:15px; border-top:1px solid #ccc; border-right:1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #ccc; background:#f9f4f4; }

Should I try it? Let's see what it looks like - here it is, styled and rendered:

Green Fly on Barberry

You can see my reflection on the back of that fly.