Webdesign Tutorial - Chapter 4: Basic Page Layout (CSS)

If you read the previous chapter about creating the XHTML code for our basic page template, you'll remember it didn't end so well. Our page looked pretty awful and boring when viewed in plain XHTML with no graphic styling. That's what we're going to provide a cure for in this chapter.

First, let's refresh our memory with what we wanted our design to look like:



Right, let's see what we can do to get it there! First of all, one more addition to our XHTML code is necessary, and that is a small addition to our <head> segment that includes our .css file. After this addition, our full head will look like this:

<head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <title>My page</title>
  <style type="text/css" media="all">
    @import "example.css";
  </style>
</head>

Now, it's time to start working on our example.css file!



1. Styling the body

As before, we'll start at the far outside, or rear, of our design. The body background is our base plate upon which the rest of the design is built one layer at a time, therefore we start with that first. And in this case it's really a no-brainer as it only consists of a flat color.

However, one more thing we're going to do is to cancel out any paddings or margins that might exist by setting them to zero. We do this because web browsers usually have defult values for these things, and in order to get the design exactly the way we want it, we have to set our own values for them - even if we want them to be set to "nothing".

The first little block of our "example.css" file will thus look like this:

body{
  background-color: #447799;
  padding: 0px;
  margin: 0px;
}




2. The main "container" <div> element

For the first non-mandatory element of our code, our "container" <div>, we want to accomplish a few things at once. First, for the sake of graphic styling, we want it to have a black border. Second, we also want it to have a drop shadow on the bottom and right side. Third, we also want to use it to set the full width our site is allowed to occupy on the screen. Lastly, we want to center it in the middle of the browser window.

Let's break these four points up into two steps. Let's start our definition with four lines that take care of our shadow and our border all at once:

div#container{
  border-right: 4px solid #225577;
  border-bottom: 8px solid #225577;
  background-color: #000000;
  padding: 2px;
}

Do you see how it was done? First, the shadow is constructed by simply drawing a border line, 4 pixels thick on the right side, and 8 pixels thick below the bottom edge. Since we've already used the "border" property we can't use that again for our actual black border surrounding the design, so we instead "fake" it by setting the background color of the whole <div> element to black, and padding its internal content in by 2 pixels, meaning that that particular space of 2 pixels wide around the edges can never be overlapped by the rest of the design and hence, creates the border for us!

Moving right along, we'll throw in the property for width which is a simple "700px" value, but the centering is a bit trickier. The way to center a <div> element with CSS is to set its side margins to "auto", adapting the distance to the browser edge equally on both sides of the page.

However, instead of typing out margin-left: auto; and margin-right: auto; we're going to use the short hand form. By using the short hand, margin: X Y will basically make the top and bottom margins X, and the left and right margins Y. In this case I'll pick 20 pixels for the top and bottom values:

div#container{
  border-right: 4px solid #225577;
  border-bottom: 8px solid #225577;
  background-color: #000000;
  padding: 2px;
  width: 700px;
  margin: 20px auto;
}




3. Our "logo" at the top of the page

While the logo might not be too pretty, it at least tells the world that this is our page and that its version number is 1.0. Remember that we added a span with a class to our XHTML specifically for the version number? That's what we're going to define now. But first, let's start with the "logo" <div>:

div#logo{
  background-color: #bb0000;
  padding: 5px 15px;
  font-family: Times New Roman, Georgia, serif;
  font-size: 50px;
  font-weight: bold;
  line-height: 70px;
  color: #ff8800;
  height: 70px;
}

Whoa, lots of code all at once! Well, it isn't overly tricky to decipher. The first line is a pretty logic setting of the background color, to a red tone. Then follows a short hand distance setting, this time for padding instead of margin, telling the browser that we want the content within this <div> element to start 5 pixels from top and bottom, and 15 pixels from the left and right edges.

Next we have a bunch of font stuff. Font-family sets our preferred typeface to Times New Roman, and if that doesn't exist, to Georgia, or the plain serif font family. We then set the font-size to 50 pixels high, followed by a bold value to get our large logo text.

Setting the "line-height" is mostly a formality as something appropriate will generally be set automatically, but in this case I'd like to decide myself that the text should occupy a space of exactly 70 pixels height-wise. The "color" value in the definition sets the text color to a bright orange tone.

Last, the height of the <div> is set to 70 pixels. In a way, this isn't "really" necessary since we only have a few words in the element and line-height already takes care of their height, but I like to throw a general height setting in there anyway for good measure. Also, keep in mind that width and height settings are set without considering any padding, so in this case where we have a top and bottom padding of 5 pixels, in reality it makes the whole logo element 80 pixels high.

All that's left in the "logo" element is to make the "v1.0" text a bit smaller. This is done by a simple one property declaration of the span class:

.versionText{
  font-size: 25px;
}




4. The main menu

The time has come to deal with the dreaded navigational menu. Just as it was the most advanced part of the XHTML code, it is also going to require the most CSS code to work as we want it to. Five different declarations are necessary, with lots of properties in each. We need to set first the <div> element, then the <ul> list element, its individual <li> list items, and finally the <a> links in both their "inactive" state as well as how they should behave when hoved over by the mouse pointer.

Let's deal with the <div> first:

div#menu{
  border-top: 2px solid #000000;
  border-bottom: 2px solid #000000;
  background-color: #ff8800;
  padding: 0px;
  height: 25px;
}

Pretty straightforward stuff here. We set both a top and bottom border to 2px and black, which borders it off against the logo and the content area. A background color is set to orange - the same color we used for the logo text. After making sure no padding is set and that the height will be 25 pixels exactly, we move on to the <ul> unordered list element:

#menu ul{
  width: 100%;
  list-style: none;
  padding: 0px;
  margin: 0px;
}

For the general settings of the whole list object, we first specify that we want the list (our menu) to use, if needs be, the full width of its parent element. Then comes something called list-style: none; which is used to cancel out the little bullet dots that our unordered list would otherwise consist of - something we wouldn't want in our top menu.

After cancelling out any margin or padding values, we move on to the list items:

#menu li{
  display: inline;
  padding: 0px;
  margin: 0px;
}

List items (<li>), like <div>'s, are per default a block element, meaning they fill the full width of the available space and each item appears on a new line. By changing the display property we can convert its behaviour to that of an inline element instead, meaning each item will appear in a row on the same line. This is what makes our menu horisontal instead of vertical!

So by now we've told our menu list to not display the typical bullet points, and for each link item to appear in the same row, filling the menu to the right. Now it's time to set the final properties - those that determine how the links should behave. This is done in two steps, first we set a bunch of "general" properties that apply to all of the anchor tags (<a>) in the menu whether they're being hovered over by the mouse or not:

#menu a{
  display: block;
  width: auto;
  float: left;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 13px;
  font-weight: bold;
  line-height: 25px;
  text-decoration: none;
  background-color: transparent;
  color: #aa0000;
  padding: 0px 15px;
}

Phew, quite a bunch of settings. Let's pick them apart one line at a time shall we? What we do first is to tell our links to behave as block elements, whereas their default behaviour is as an inline element. In other words, we're doing the exact opposite to what we did to the list item settings! But, wouldn't this make them fill the full width of the screen and end up on top of eachother since all block elements start on a new line?

The answer is of course yes, but - by setting their width to auto (adapting to whatever the width of their content is) and floating the tags to the left, we make them "hover" side by side and thus, even though the link items themselves behave like big blocks, they still all fit neatly in one row.

There isn't much to say about the next four lines, they tell the browser which typeface to use, what its size should be, that it should be bold, and what the full height of a line of text should be.

Since we don't want any underlining of our menu links, we use the text-decoration: none; setting to cancel that out. We then proceed to set our default background color to transparent (meaning it will be the background color of the menu <div>), the text color to a red tone, and finally a padding setting that - while being zero for top and bottom - adds a little space on each side of the text within the link "blocks". 15 pixels to be precise.

OK, time to tell the browser what to do when our mouse pointer hovers the links:

#menu a:hover, #menu a:active, #menu a:focus{
  background-color: #dd4400;
  color: #ffff00;
}

That wasn't difficult was it? All we really want to change is to make the background color a darker orange, and the text color bright yellow instead of red, as in the screenshot at the top of the page.

One thing that's new though is that now, we're setting the behaviours of three different things at once, separated by commas. They are simply different "states" that the links could be in, being "hover", "active" and "focus". If you want to see what their individual differences are, you can try setting them one by one instead with different values for each, and then play around with the menu on your page to see how they change.



5. The content area

That was a lot of stuff we just went through just to create the main menu. Fortunately it gets a lot easier from here on out. We have now reached the content area of our page, which we'll start off by first defining our "content" <div>:

div#content{
  border-top: 5px solid #dddddd;
  background-color: #ffffff;
  padding: 20px;
}

A plain white background color is selected and the padding around the whole page is set to 20 pixels. I also threw in a 5 pixel wide light grey border line at the very top of the page, creating a slightly tacky little "shadow" effect under the menu.

Next, we want to tell the browser how to handle our topic and text paragraphs:

h1{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  line-height: 30px;
  margin-top: 0px;
  margin-bottom: 30px;
}

p{
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  line-height: 18px;
}

By now, these settings should be fairly self-explanatory. If you are unsure about what a specific property does or why I've set them a certain way, just play around with it and try changing a few things around and see what it does!

There is one thing we have left to do. Remember "vulputate"? That's right, the word I decided to make a link out of. We want to tell the browser how to treat this as well. Instead of defining it as specifically within #container though, I'm going to leave out the id name and just define a general behaviour for all links on the page, like so:

a{
  font-weight: bold;
  background-color: transparent;
  text-decoration: underline;
  color: #0000dd;
}

a:focus, a:active, a:hover{
  background-color: #aaddff;
}

This will not affect our menu since that's defined within a specific <div> area, but I still consider it good practice to put any such "general" (using only the tag name) declarations at the top of the .css file, to avoid having them accidentally override any of our more specific settings such as the link settings in the menu.

As for the settings themselves, again they should contain no surprises. I don't specify any typeface but will let the link just go with whatever the text it's found within uses, although I do make sure it gets displayed in bold text. I give it a certain text color, underline it, and make the background color change from nothing ("transparent") to a lighter blue on hover. Done!

Well, not entirely done of course. We still have the footer to take care of before we can call it a day on both the XHTML and the CSS.



6. The footer

Setting up the footer <div> itself is pretty straightforward as it looks a lot like the top menu:

div#footer{
  border-top: 2px solid #000000;
  background-color: #ff8800;
  font-family: Verdana, Geneva, sans-serif;
  font-weight: bold;
  font-size: 13px;
  line-height: 25px;
  padding: 0px 15px;
  height: 25px;
  color: #bb0000;
}

Lots of settings, but nothing too strange. A black top border separating the footer area from the content, the same background color as the top menu bar, some font settings, a little padding on the sides, making sure the height of the element is the same as the line-height which makes the text center itself vertically, and finally a red text color.

But then, there was that small issue of getting one line of text to the left and the other to the right. We set up two <div>'s for this, "lowerleft" and "lowerright", so let's tell them how to behave:

div#lowerleft{
  height: 25px;
  float: left;
}

div#lowerright{
  height: 25px;
  float: right;
}

That's all we need! One is floated left, and one is floated right. I also specifically set the height to make sure they'll fit within the height of their parent element.

The one, very last thing left with our CSS code now, is the footer links. We want that e-mail address on the right to be clickable, but instead of defining the link within the #lowerright element, we'll just set a link behaviour within the general #footer <div> instead. That way, if we later on would want a link on the left as well, we'll know it'll behave the same way.

The last code snippet for the footer links:

#footer a{
  background-color: transparent;
  text-decoration: underline;
  color: #aa0000;
  padding: 0px 5px;
}

#footer a:hover, #footer a:active, #footer a:focus{
  background-color: #aa0000;
  text-decoration: none;
  color: #ffff00;
  padding: 0px 3px;
}



And that's it! If you've entered all the XHTML and CSS codes as described, you should now have a working, completely valid web page template file. If you don't like look that I picked for it, you can easily change the colors, fonts, border widths and other properties in your .css file and change it around as you wish!

I will certainly admit that, although good for introductory purposes, pure code based designs really aren't much to look at or attract an audience with. To spice it up a bit, you could for example make some nice graphics and add those as background images to the body and <div> element, as well as switch the "logo" out for a nicer drawn one. There's lots of things you could do, but they are unfortunately outside of the scope of this tutorial. Instead, we're going to start looking at how to optimize our site for the search engines!





< Previous: Basic page layout (XHTML)

robert@eagleowl.se     +46 (0)26-16 13 61     www.eagleowl.se
©2019 EagleOwl