CSS Decorating

Content is king. Right? It matters more what you say than how it is presented? Substance over style?

Ultimately, yes. Flashy looks won't hold an audience for long without something substantial inside. But alas--the opposite is also true: you'll also lose a sizeable part of your audience with long pages of unadorned text. And that old saw about "First Impressions" is true no matter what you think of it.

Hue and Cry

A small thing that makes a world of difference to a boring page are a few well-chosen colors. For the next section, we'll simulate a 'plain' look as found on the most basic of web pages.

Seen it a million times, right? The "plain ol' baloney sandwich" web page. The only spot of color the occasional link.

After a while, the eye gets tired. A little COLOR goes a long way towards catching the users eye and breaking up a sea of black text. With CSS you can also set the background color of text, creating highlighter effects or attention getting 'labels'.

The two main CSS attributes used here are color, which specifically refers to the foreground color or font color, and background, which refers to the space behind the text.

There are several ways you can specify colors in CSS. The most common is the use the same six-digit hex color codes you're used to using in HTML (Note: you can put quote around the value for a tag's STYLE attribute, but no quotes are allowed around the color value! color:"#ff63a1" is an illegal value!)

CSS also allows a compact three-digit hex code variation. Codes such as #90f are interpreted as #9900ff: each digit is simply repeated to form a valid six-digit code.

Before I talk about more options, I should take a moment to briefly discuss what those numbers mean for those who are not yet familiar w/ standard HTML colors. Colors on computers are expressed in terms of three combined values representing the amount of red, green, and blue. In a six-digit code, each pair of digits represents a value in hexadecimal notation from 0 (00) to 255 (FF). Each pair represents a different part of the color value: RRGGBB. So, #FF9900 represents 255 for red (highest value), 153 for green (60%), and 0 for blue. This all combines to make a shade of orange.

If you don't immediately see how red + 60% green makes orange; well, it just takes a little practice. It helps to learn what colors result from having 100% of any two colors:

Trust me, it does make sense when you talk about mixing light. If it looks strange, you are probably thinking of the formulas for mixing pigments (like paints: R+Y=Orange, R+B=Purple, Y+B=Green). Learning the three simple formulas above gets you half way to understanding why #FF9900 is orange!

We look at that middle pair of #FF9900 and see that it isn't either 0 or 100%, so we determine that #FF9900 is partway between #FF0000 and #FFFF00. Here's where you can use that "Roy G. Biv" thing they taught you in grade school: between red and yellow on the spectrum is... #FF9900 - orange!

Now for the other ways of defining colors in CSS. You can also use what looks like a function to specify colors in decimal or percentage. To illustrate, we'll write our favorite orange color out four different ways:

The above lines should all have an identical orange background, specified four different ways. Personally, I find the latter two only useful for people writing color-changing scripts. If you're going to simply hard-code a color into your page or style sheet, the first two are much shorter and (with a little practice) just as readable.

You can also use the named colors supported by most browsers. Notice I said 'most'. Personally, I say "why take chances?" Everything understands hex codes. On a related note, for the webmaster who doesn't want their page to stand out, CSS also has special named colors that access the user's system desktop colors. A neat trick if you can think of a use for it.

One final aside: most current browsers support the CSS2 standard - the 'second generation', so to speak. They're already talking about CSS3. Some of the interesting ideas they have for color in CSS3 are an hsl() function (similar to the rgb()) to specify in relative hue-saturation-luminance values (a more intuitive system) and, most intriguing, the possibility to specify an alpha-channel value. In one word: translucency. Imaging a crisp photo background; too busy to use under text normally, but with a semi-transparent white section floating over it which 'washes' out the color sufficient to make text readable. Stop and consider what kind of other interesting effects you could come up with... it could be applied to text, or borders, or...

In Square Circle

CSS lets you put borders around anything with a rectangular shape/area on the page (which is, of course, every visible thing!) The border on this <P>aragraph is defined as border:#ff0 outset 5px;padding:5px;, which specifies a 5px thick yellow border, shaded to look beveled 'up' from the page. There is an additional 5px padding specified on all sides to keep the text from smashing up against the border. The actual effect may vary from browser to browser... Mozilla is a simple highlight/shadow scheme, whereas IE renders the border with two tones on each edge.

It's also possible to put a border around smaller elements lile bold text or larger elements like <BODY> or <DIV> (don't bother looking, I didn't do an example of those two.)

But much more fun than that, it's possible to control the appearance of the border on each side separately (which can create some interesting fake underline effects.) Yeah, the 'box' around this section is hideous, exaggerating the possibilities. Different thicknesses, colors and styles. And the top edge still has no border. For the curious, the code that created this mess is repeated below. (it's wrapped to two lines to fit the page better, you wouldn't really do that in the source)

<P style="border-left:#f0f solid 5px;border-right:#ccc solid 35px;
      border-bottom:#c60 groove 8px;padding:5px;">

Each side of the border is specified with it's own name, simply by adding -left, -right, or -bottom to the border attribute (as you might guess, -top is the missing one.) For each attribute, there are three values specified: one representing the color, one representing the thickness (here given in px but any unit can be used), and another specfying a style. Samples of the styles are given below. The other valid value is none, which I took the liberty of not illustrating...

All styles defined as "border:#0c0 10px ___", where ___ is the style listed below.
solid double inset outset
ridge groove dotted dashed

Specific Weirdness

The border attribute is shorthand for all the border- properties combined, but it's also shorthand for individual specific border properties for -color and -style, as well as -width which can be broken down four more ways. The following style definitions are all the same: 

.BorderA {
   border:3px solid #00f;
}
.BorderB {
   border-left:3px solid #00f;
   border-right:3px solid #00f;
   border-top:3px solid #00f;
   border-bottom:3px solid #00f;
}
.BorderC {
   border-width:3px;
   border-style:solid;
   border-color:#00f;
}
.BorderD {
   border-left-width:3px;
   border-right-width:3px;
   border-top-width:3px;
   border-bottom-width:3px;
   border-style:solid;
   border-color:#00f;
}
In this case, bigger is not better! The ultra-specific properties like border-left-width are not as widely supported as the simpler border or border-left. So, use the style demonstrated in .BorderA if the border is to be the same on all four sides, and vary the values for the attributes in .BorderB if the sides need to be different.

There is also shorthand for specifying top-right-bottom-left values in a series when using the -width, -style and -color attributes. The style for this paragraph is defined below.

.Yucky {
  border-width:1px 3px 5px 8px;
  border-color: #0f0 #f0f #f00 #00f;
  border-style:solid dotted
}

The values are listed in this order: top, right, bottom, left. To help you remember it: start from the top and move clockwise around the box. Also note that you don't have to specify all four. The -style attribute lists only solid (top) and dotted (right.) The bottom and left borders automatically match their opposite sides.

Finally, you may be asking is you have to include all three characteristics for a border every time. The answer is no. Width and color will default to something, but you MUST specify a style or css will not draw the border!

All that glitters is not #ffd700

Color is nice, it's simple, there's a wide variety of it, and it loads quickly. But if you want to sacrifice a little speed for more variety, you want graphics.

We pull a graphic into CSS with the url() function. For example, this section has a background from a graphic called whitewood.jpg. The background is defined in CSS as:

<DIV style="background:url(whitewood.jpg)">

Now, it's important to note that we specified just the filename because:

  1. The style is defined on this page, not in a style sheet.
  2. The graphic is in the same folder as this page

Here's the rule for determining paths to files in the url() function: If the style is defined in a stylesheet, the path is relative to the location of the stylesheet, not the page. For example, the style sheet for this page is in the 'root' of the site, and this page is in a folder called CSS. The border graphic is in another folder off the root called 'grfx'. Which means that the graphic is defined in the stylesheet as url(grfx/logoedge.gif). But if I wanted to use the same graphic in a style defined on this page I would have to use url(../grfx/logoedge.gif). The practical upshot of all of this is that I don't have to have separate stylesheets for each directory on my site! Whee-la!

Netscape 4.x users: Upgrade, already! Get the latest Netscape or Mozilla, or even IE if you're ready to join the throng. But NS4.x has a bug (gee, really?) which incorrectly thinks the path in the url() function is relative to the page, which means you can't see my border graphic on any pages not on the root of the site. Granted, my border graphic may not be a big deal to you, but I wonder what else you're missing? Sure, I could use a full path to the file for them: url(http://www.blueknot.com/grfx/logoedge.gif) - but I think this just makes the page load a tad slower for everyone else who upgraded when they were supposed to.

If the path or filename contains spaces, you must enclose the whole path inside the url() parentheses in single quotes: background:url('My Favorite Background.jpg'). If is also important to note that while CSS is not case-sensitive, the filenames can be. If the DIV above had specfied background:url(WhiteWood.jpg) it would not have worked, as my server is case-sensitive. WhiteWood.jpg does not exist on that machine, even though whitewood.jpg does.

Lagniappe*

Background isn't the only attribute that can use the url() function (though it's certainly the most common.) You can also use it to make graphic bullets with the list-style-image attribute for lists (or the shorthand list-style version). The following is taken from the bk.css stylesheet which this page imports: 

UL.G
{
    LIST-STYLE-IMAGE: url(grfx/grcheck.gif);
    VERTICAL-ALIGN: middle
}
LI.X
{
    LIST-STYLE-IMAGE: url(grfx/redx.gif);
}
Now by simply adding CLASS=G to my <UL> tag I can have green checkmarks. Adding Class=X to a <LI> in that list overrules the green checks with a red X's (the rule cascades!)

So what have we learned today?