Chimeric Dream

Quick Navigation:

• Step 0: Introduction and Creating Your First CSS File
• Step 1: CSS Reset
• Step 2: Default Styles
• Step 3: Breaking Up the Page
• Step 4: Positioning
• Summary

Default Styles

What do I mean by "default styles"? Simply, the default styles for the web page are the basics such as background and text colors, font family and size, and link colors. You should pick color sets that are complementary, and if your design eye is legally blind (as mine is), do not fret! There are many handy resources to help you with your color choices. Here are a few that I have used in the past:

• ColorCombos.com has a large variety of pre-defined color combinations
• Color Mixers lets you define your primary color with an intuitive slider interface
• EasyRGB. Though it isn’t quite as "easy" to use as the options above, this tool can come in handy if you have a primary color that you are required to base your theme around.
• Instant Color Schemes. This site is very handy if you have an idea for a theme, but no set colors. You enter your search terms (such as "blue sky" or "southwest"), and the tool grabs prominent colors from a related image search on Yahoo Images.

For this sample page, I will be using the Color Mixers tool with the following RGB values: 50, 50, 175. I am a fan of blues and grays, so that will be my preferred route. Your colors may vary, but I will try to describe the general ideas as I go.

Main Background and Text Colors

For the primary background, I will use a light gray color (#8 on the CM pallette, if you are using the same scheme as me). For my text, I will be changing the black to a very dark gray to soften it a bit.

Here is the basic body styles I will be using:

Font Family & Size

When choosing a font to use on your website, you should try to specify a font that most users are likely to have installed on their computers. If they don’t, you should provide appropriate fallback fonts (called a font stack) so that your design doesn’t break entirely if alternate fonts are used.

Here is a good article on font stacks, from which I chose the Cambria…serif stack, which you can see below.

You may notice that I have specified a point size for the font as well. By specifying 12pt font in the body declaration, we can use ems or percent for our unit of measure for everything else. Ems and percent are functionally equivalent and can be used interchangeably. For example, 1em is like saying 100%, so if something is 1em tall, it is “1 12pt line tall”. 1.2em is equivalent to 120%, or “1.2 12pt lines”.

Links

Last but not least, we need to provide basic styles for our links. Go back to your color pallette and choose a color that contrasts with both your background as well as your main text color. Then select a second, similar color for the active state of the link. You may choose additional colors for visited links and "focused" links (i.e. links highlighted by the keyboard but not hovered over by a mouse), but I will be styling those differently.

Here is the style I will be using for the CSS file for the demo page:

I did a couple things besides just changing the color of links in various states. For example, I set the links to have a dotted bottom border instead of an underline, and I gave visited links a strike-through to help the user quickly identify links they have already clicked on. In addition, I made sure that active and hovered links behaved the same whether they were visited or not. These things help keep your styles consistent. Remember, it’s the little things.

Other Styles

Lastly, we will specify the default styles for headings, paragraphs and lists, and a bit of simple margins / padding around elements. While there can be an infinite number of ways to style these, we will stick with some fairly basic styling for this tutorial.

Here is all of the CSS code added during this step of the tutorial.

See what the page now looks like in a separate window.

Continue on to the next step to see how you will be breaking up the page into manageable chunks for positioning in Step 4.