First time visitor? The tutorials start here.

A More Coherent Design

Aside from some nifty links in the sidebar, our practice page is still looking pretty drab at this point. Well, let’s finally start making it look a bit nicer, shall we? 🙂

You should know the drill by now, but in case you don’t, open practice1.htm in a browser, and style.css in Crimson Editor. As always, we will be doing our styling in the CSS, so there is no need to open practice1.htm in Crimson.

Before we do anything else, I want to make sure you can see where #header starts and ends, and where #links starts and ends. To do this, get rid of the background color in #header and replace it with a border.

Here is what the CSS for that currently looks like:

#header, #links { background: #eee; padding: 1px 0; }

Since we don’t want them both to have the same attributes now, we’ll need to target #header and #links separately:

#header { border: 1px solid #f00; padding: 1px 0; }
#links { background: #eee; padding: 1px 0; }

Now save your CSS and refresh the page in your browser. Once you can see where one ends and the other begins, you can take the background and border out completely. For this, you may re-combine them:

#header, #links { padding: 1px 0; }

Hmm, there appears to be a background color behind the ordered list. Out of the following CSS, can you figure out where to get rid of that background color?

ul, ol { margin: 1em 0; padding-left: 0; }
ol li { margin-left: 2.75em; background: #eee; }
ul { list-style: none; }

Ah, the background color was actually behind the list items within that ordered list, not behind the ordered list itself. If you can’t figure out what to change, highlight the solution below:

ul, ol { margin: 1em 0; padding-left: 0; }
ol li { margin-left: 2.75em; }
ul { list-style: none; }

Now, out of the page body, #container, #header, #content, and #links, the only two sections that should have a background color are the body (light gray) and #content (white). Let’s fill that bordered #container area with an almost-black color.


#container { border: 3px solid #777; margin: 0 auto; width: 900px; }

That line is getting a little long, so when we add our background color, let’s break the CSS up into a list format to make it a little easier to read.

#container {
	background: #111;
	border: 3px solid #777;
	margin: 0 auto;
	width: 900px;

Save, refresh, view. Now, the area above and to the left of the #content area is nearly black, which matches the links in the sidebar a little better. But now that we’ve done that, some of the text is difficult to read, so we’ll need to lighten the text in the #header and #links areas.


#header, #links { padding: 1px 0; }


#header, #links { padding: 1px 0; color: #ddd; }

Save, refresh, view. As you can see, the big heading at the top is still dark. Since the <h1> heading had a specific color defined for it, you’ll need to lighten that on its own:


h1, h2, h3 { color: #777; }
h1 { font-size: 180%; }
h2 { font-size: 150%; }
h3 { font-size: 120%; }


h2, h3 { color: #777; }
h1 { font-size: 180%; color: #999; }
h2 { font-size: 150%; }
h3 { font-size: 120%; }

Notice that both the 1st line and the 2nd line of this CSS is changed. Also notice how h2 and h3 still share the same color, so we can keep those two grouped together when defining their color. If we wanted to, we could have gotten rid of the first line completely, then added color: #777 to where h2 and h3 are defined separately.

Save, refresh, view.

Now that we can read all of the text again, let’s create some breathing room in the #header…


#header, #links { background: #eee; padding: 1px 0; color: #ddd; }

Since the padding in the #header is going to be different than the padding in the #links, we’ll need to separate those…

#links { background: #eee; padding: 1px 0; color: #ddd; }
#header { background: #eee; padding: 0.5em 2em 2em 2em; color: #ddd; }

Save, refresh, view.

Remember, when listing 4 measurements like this, the first one is for the top, the 2nd for the right, the third for the bottom, and the fourth for the left. Just remember a clock, starting at noon or midnight, then going to 3, 6, and finally 9.

See how the background color and text color are the same for both #header and #links? We can actually combine #links and #header for those two attributes, and define padding separately, like so:

#links, #header { background: #eee; color: #ddd; }
#links { padding: 1px 0; }
#header { padding: 0.5em 2em 2em 2em; }

Save, refresh, view. As you can see, it didn’t matter whether we defined background and text color separately or together, and it works the same both ways.

One last tweak to the unordered list

It’s been bugging me to see that customized list dropping down in the sidebar like that, so let’s remove its top margin. Find this in your CSS:

ul { list-style: none; }

If you don’t know how to remove the top margin, highlight the solution below:

ul { list-style: none; margin-top: 0; }

In the next segment, we will start with padding the #content. Since there is a width defined for the #content, it will be time to do some basic math. Don’t worry, I’m only talking about addition and subtraction, not calculus. 🙂

Onward to A More Coherent Design, Part 2..

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!

Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.