1. 0. CSS Menu
2. 1. Colors & Images
3. 2. Cascading
4. 3. Layout I
5. 4. Layout II
6. 5. Layout III
7. 6. Custom Options

Creating an Atlas Quest Theme

Colors and Images

Not only do colors and images dominate the CSS for themes, but most of those changes are to just three different properties: color, background-color, and background-image. Since those three are so critical in creating Atlas Quest themes, let's take an exhaustive look at them.

Color

At the very simplest, you can change the color of regular text by following this example:

It has three distinct parts. The p is the selector, or what part of the page the style should be applied to. In this case, p is an HTML tag that encloses a paragraph. color is the property to be applied to the selector—in this case, the text color. red is the value for the property, red. Click the Apply button to see the style in action on this page.

Officially, there are only sixteen predefined colors: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, and aqua. All modern browsers support far more color options than that, however, so if you have need of another color, give it a try—it's probably supported. Use the test box in the lower right corner to try various colors.

The named colors aren't very precise. Most of the time, you'll want to select a specific shade for a color. For instance, are you looking for a regular green, a dark green (how dark?), a light green (but how light?), a forest green (but what shade is that?), a grass green (is that different from forest green?), etc. The lack of precision is a problem, so CSS allows you to get very specific about exactly what color you want to use by 'mixing' your own colors.

On computer monitors, all colors are made of three primary colors: red, green and blue, often abbreviated as RGB. (Painters will tell you that the three primary colors are red, yellow and blue, but in the world of computers, we use red, green, and blue. The why doesn't really matter—just know that yellow is not a primary color, and you get it by mixing red and green in equal quantities.)

Degrees of intensity range from 0 to 255, where 0 is "no intensity" and 255 is "full intensity," so, for instance, a bright red color without any hint of green or blue would be rgb(255,0,0). As an example of 'mixing' a color, you can get a nice purple color with moderate amounts of red, no green, and lots of blue: rgb(128,0,255). In all, you can mix 16,777,216 (256 x 256 x 256) different colors, which should be plenty for your purposes. Black is rgb(0,0,0) and white is rgb(255,255,255).

I like purple, so let's mix our color with 128 parts red, 0 parts green, and 255 parts blue:

This works, but it's rather verbose, so programmers tend to use a shorthand method for writing the same thing. This method uses what is called hexadecimal numbers, a base 16 number. You normally work with base 10 numbers—after you reach 9, you carry the 1 over and get 10. In hexadecimal counting, counting still goes to 10, but it takes a bit longer to get there: 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F, 10. For those of you not familiar with the hexadecimal system of counting, this probably looks strange, scary, and just plain wrong. Don't worry, though—you don't have to understand the hexadecimal numbers, you just have to look them up in a color chart. That way, you can find the exact shade of color you want to use and the corresponding hexadecimal number that represents it.

So a shorthand way of saying rgb(128,0,255) is converting the numbers into hexadecimal numbers, then jamming them all together and marking it with a pound sign (#) to indicate it's a hexadecimal number: #8000FF.

Just to be clear, the colors rgb(128,0,255) and #8000FF mean exactly the same thing and represent exactly the same color—just two different ways of saying it.

In case colors weren't confusing enough, there's another shorthand way of specifying some hexadecimal numbers. If you end up with a hexadecimal number such as #AABBCC, where the red, green, and blue double-digit numbers happen to be the same number, it can be shortened to #ABC. This particular shorthand only works if each color components has the same double digits, so it's not possible to shorten a hexadecimal number such as #ABABAB. Even if two of the color components have repeating digits such as #ABCCDD, it cannot be shortened further.

So we can't shorten our hexadecimal purple #8000FF since the red component doesn't have repeating digits, but we can get pretty close to it by using 77 or 88 as the red value: #8800FF = #80F or #7700FF = #70F. #80F and #70F are so close to #8000FF, you'd have a difficult time picking out the change with the naked eye.

So there you have it, all the various ways to specify colors.

Background Colors

Everything that applies to text color also applies to background colors, except the property name is background-color instead of color. Check it out:

One special color to be aware of: transparent. In certain cases, you want the color (or image) behind your selected element to show through. The default background color normally is transparent, so that's what you see if you specify no background color. Many elements on Atlas Quest have that default changed, however, so if you need to have the background behind an element show through, mark the background color as transparent.

Background Images

Setting the text color and background color can set the overall tone of a theme, but it has one major drawback: Only solid colors are allowed. Images give you an infinite number of designs and options to work with. At the most basic, you designate a background image with the aptly named background-image property.

The background image can be any valid URL on the Internet. In this example, the domain name is not specified so it's assumed to be the domain you're currently on—in this case, the full URL for the image is http://www.atlasquest.com/tutorials/css/pattern.gif.

You can also specify no background image at all by using the keyword none:

One downside to using background images is that they take longer to download. Especially those who use dial-up connections, there will be a noticeable gap between when the page itself loads and when the background images load. If you absolutely must use a background image, keeping them as small as possible is critical for speedy websites.

CSS provides a lot more options for setting background images such as how to position them on the page, whether they should repeat or not, and so forth, but we'll leave those details for another time. The key point to take away for now is that every theme on Atlas Quest is created almost entirely with just three properties: color, background-color, and background-image. We'll end this page with examples of how real Atlas Quest themes style the content section of each page.

1. 0. CSS Menu
2. 1. Colors & Images
3. 2. Cascading
4. 3. Layout I
5. 4. Layout II
6. 5. Layout III
7. 6. Custom Options