Portfolio Tutorial | CSS Enterprise

What you will learn:

The syntax for CSS, including the values and punctuation
About selectors, including tags, classes, and divs
About block vs inline elements
About positioning properties: Relative, Absolute, and Fixed
How to set up a "fixed-layout" website

CSS? Bring it on!

So, are you ready to tackle some CSS? Started with HTML, and can't get enough? Are you feelin' the burn? Good. Then, get your "grrr" face on, cause we're about to dive right in!

First, a little introduction: CSS is all about presentation. While HTML covers what is on the site, CSS handles how it looks. It handles things like text color, spacing of words, margins, background, font type, size, placement, centering, etc. To illustrate this, review the two examples below:

Example 1 is straight HTML—nothing special.
Example 2 is the same HTML document, but with some CSS applied.
Notice how the meaning of Example 2 does not change— the content is the same as Example 1. But I think that you'll agree, it's more interesting and appealing to look at.

This should give you an idea of what CSS can do. Now, let's learn how to use it . . .

First, the Syntax

CSS is handled differently than HTML in how it is written. It has its own syntax which looks something like this:


				p {

				   color: #FFA500;

				}

What we see here are three things:

A selector
A property
And, a value

. . . which are laid out as follows:


				selector {

				   property: value;

				}

It is important to know the names of these three components, as many tutorials refer to them by name, including this one. Though in mine, I will attempt to also include examples where possible. But do get familiar with using these terms. Say it with me, "selector, property, value . . . selector, property value . . . selector, property, value . . ." Good.

. . . more on this

Besides these three values, CSS also contains some punctuation. The first we encounter is an opening curly bracket, or {. This marks the beginning of the rules that we are about to apply to the selector. Next, comes the property to be changed, followed by a colon. This is like a word definition—first comes the word, then the description for that word. Same idea.

And finally, to mark the end of that definition, a semi-colon. I like to think of this as the "period" on the end of a sentence. Each rule applied to a selector ends with a "period," i.e., a semi-colon. And everything contained within the two curly brackets define—or "style"—that selector, like a bunch of sentences in a paragraph, with the selector acting as one, unifying topic.

Selectors

Classes

A class allows us to get more specific with our changes. Rather than changing everything, we can isolate what will change. What if I want just one, red sentence in a paragraph? I can pull this off by first placing what's called a span class in my HTML, and then creating a CSS rule for that class. The HTML would look like this: <span class="highlight">What if I want just one, red sentence in a paragraph?</span>

Then, instead of using a tag as the selector, you assign it any name that you like. For our example, I called it "highlight." The CSS, then, would look something like this:


				.highlight {

				   color: red;

				}

Notice the period just before the name. This is how a class name is established in CSS. It will always start with a period first. Also, notice that this time, rather than using a hexidecimal number for the color, I used the actual color name. Certain colors will allow you to do this. For a full list of these, refer to VR-Colors. The list of these colors is short, but often easier to remember than their hexidecimal counterparts.

Going back to the HTML, notice that "span" becomes the tag, rather than "class"; the class is only used to associate the span with a particular set of CSS rules, in this case "highlight." This always being the case, we then close up the tag as "/span" rather than "/class."

Divs

Both tags and classes are good as selectors, but when we want even greater control, we can use what's called a div. Divs are similar to classes in that names can be applied to them. In the case of a div, it's called an "id". But divs are different from classes because each id in an HTML document must be unique. For example, you could have the class of "highlight" occur more than once in a particular HTML document, but a div with an id of "navigation" should only occur once, within that same document. That's what an id is for: to act as a unique identifier. The HTML for a div looks something like this:


			<div id="navigation"><a href="homepage.html">Home</a>&nbsp;&nbsp;<a href="contact.html">Contact Us</a></div>

One thing that is great about divs is that they are often used for layout purposes, which brings us to our next section . . .

Layout

Before I get started, I would like to say a little bit more about divs. I like to think of divs as "building blocks". Using specific CSS rules, I can position them anywhere that I want to. I can put equal space between them or stack them tightly, one on top of the other. In fact, this is the default nature of divs: they can only stack vertically by default; never side to side unless you specifically tell them to. That's because a div is what's known as a "block" element.

Block

Block elements, by default, will only stack on top of each other, no matter how wide a person's browser view may be. They are "stuck" in this kind of formation. You may have noticed this with another kind of block element—heading tags. Heading tags typically always end up on top of paragraphs, or whatever code comes after them in the HTML. Paragraphs do the same thing, coming one after another down the page. Always staying in a vertical stack.

Inline

Conversely to block elements, inline elements will continue to flow along wherever they may be. For example, if you placed an inline tag within a sentence, it would continue with the flow of that sentence, whereas place a heading tag within that same sentence, and it would "break" the natural flow, "demanding" that it be put on its own line. An anchor tag, or "link," is an example of an inline tag. The "bold" tag is another inline tag.

The Box Model

It is important to understand the box model in order to do layout using CSS. Here's how it works:

A box has three components:
- Border
- Margin
- Padding
Border defines the size, or dimensions of the box
Margin is the cushioning outside of the border
Padding is the cushioning inside the border
- Note that a box's color goes from the inside, all the way to the border, so more padding would "increase" the colored area; increasing the margins would not.

This won't make a whole lot of sense until you've worked with CSS objects for a while. But just keep this reference in mind and come back to it when you need to.

Positioning

Besides the box model concepts, there are also different properties that can be given to a div, or any other object for that matter, which effect how that object positions in relationship to the viewable space of the browser. The first one is "relative"—the default:

Relative

Relative positioning indicates that the object will fall in line according to its location in the actual code. So if object A comes before object B, then object A will show up first, i.e., on top of object B, in the browser.

Absolute

Absolute positioning one could argue is the most ideal for laying out divs in a design. The reason for this is that it positions "absolutely" where you place it, no matter what. This type of positioning uses coordinate properties to "tell" the object where to go according to the browser view.

Fixed

Akin to absolute positioning is "fixed" positioning. Fixed positioning is what is used to "fix" something in place, making it always permenant in that view regardless of scrolling. Think of a typical MySpace layout: The background never moves even when the content is scrolled.

CSS Layout Tutorial

With a fundamental grasp of the box model, and an understanding of layout properties, we can move on to doing an actual layout. The following is a tutorial that will walk you through the process of doing a typical layout. This particular type of layout is called a "fixed" layout because it's dimensions are fixed (not to be confused with the "fixed" property referred to above.) This only works, if you know the exact dimensions of your design. The other type you can have is called a "fluid" design. The current tutorial that you are reading is considered a fluid layout because it "morphs" to fit both the content and the viewable space within the browser. Go ahead and resize your browser window horizontally right now, and you will see that everything on this page "manuevers" to fill the new space.

To start our tutorial, review the following image to see what the finished product will look like:

[Click to Enlarge]

Note that there are no images being used. It is all done by using CSS rules.

To start off with, go to the VR-HTML Template section, and copy the code you find there into a new text document, in your text editor. Now save it as "css_exercise.html".

Once it's saved, go back to it and somewhere inside the head tag, add the following code:

<style type="text/css">

<!--



-->

</style>

The <style type="text/css"> is, of course, defining that we are going to add CSS styles here. And the </style> tag closes it up. But what are the other characters for? Well, under normal conditions, "" define a comment in HTML. In fact, you could use these to make comments to yourself in your own code. But in this particular case, it is a way to hide the CSS rules from a browser that doesn't support CSS. That way, your page will still work in older browsers. Sure, the fancy styles will go away, but it will still be functional and usable. That's the important thing.

With our in-document CSS in place, we can now begin building our fancy-shmancy site. The first thing that we want to do is take away the default margins off of our HTML document, so that our design will fit nice and tight against the browser window's top edge. Put this code inside your CSS tags:


					body {

					     margin-left: 0;

					     margin-top: 0;

}

Now that that's done, let's center our document in the browser window. This is actually trickier than it seems. It will require us to set up some sort of container to be centered. So we will create a new CSS selector, a div, called "container". This will then hold all the "stuff" in our site design. Follow the example below:


					#container {

					}

Notice that, in order to establish a div id, we place a pound symbol in front of it. This is the difference between establishing a class name and establishing an id name for a div—class name has a period, and a div id has a pound sign.

With that set up, let's give it a width. For right now, we don't need to set a height. But we, will need to create two rules which will make the margins auto-fit; this is part of the trick that will allow our design to center properly. Also, while we're at it, let's add "centering" to our body tag. The width, by the way, will be 800px:


body {

     margin-left: 0;

     margin-top: 0;

     text-align: center;

}



#container {

     margin-left: auto;

     margin-right: auto;

     width: 800px;

}

With that out of the way, we have to add one more thing to our container div. The centering that we did with the body tag will also effect all of the elements within our container div including the paragraphs and such, which we don't want. So let's reset everything to position left within our container:


#container {

     margin-left: auto;

     margin-right: auto;

     width: 800px;

     text-align: left;

}

Ok, we're almost done with our setup. Why don't we go ahead and add a color to the background of the whole body. For the body, we will add the color #111122:


body {

     margin-left: 0;

     margin-top: 0;

     text-align: center;

     background: #111122;

}

Now we still have more setup to do with CSS, but let's go ahead and jump to the HTML now. Our body is already in there, but what about the container div? To add a div into the body of an HTML document, follow the example below:


<html>

     <body>

          <div id="container">

          </div>

    </body>

</html>

You can see by the example that a div tag is just that: a "div". Then the name that we gave the div is its "id". Now anything going inside the div will be sandwiched in between the opening and closing div tags. Keeping this in mind, let's set up another div. This div will be for our masthead. Let's set it up first in the HTML this time, and then in the CSS of our document's head. Go ahead and call it "masthead":


<body>

     <div id="container">

          <div id="masthead">

          </div>

     </div>

</body>

If you haven't saved your document lately, do so now.

Alright, let's get into some more CSS. For our masthead, we want it to be 140 pixels high and stretch the entire container's width horizontally, so the width would then reflect the width of the container, or "800 pixels". Also, let's give it a background color of "#008BBF" which is a shade of blue:


#masthead {

     height: 140px;

     width: 800px;

     background: #008BBF;

}

Alright, let's review. So far, your document code should look something like this:

If this is the case, then in your browser, it should look something like this. We can see from our example that we have successfully centered our design. (Note: If yours does not look similar to mine, then continue to compare your code to my example above and fix what is different.)

Good so far? Let's do some more, then. We are going to add some text to our masthead. But before we do this, there are a couple of things that we need to cover:

The first thing that we need to talk about is the positioning of our masthead. We are going to position it absolutely, along with all of the other elements from here on out using the "position absolute" property and value, so that we can have full control of where everything goes.

This is going to require us, then, to also use coordinates, both from the top and from the left. From the left, because we have set the "text-align" to left—if you recall—for everything inside of the container div.

For positioning top, we use the property called "top" and then give it a value in pixels. Then for the left, we could use the property "left", but there is a problem with doing this: it will position it from the left browser border, rather than from the left border of the container div. So, we will be using the "margin-left" property, instead. This is a common practice which I use with all of my layouts.

And finally, we want to center the content of the masthead.

So, first let's center the masthead content:


#masthead {

     height: 140px;

     width: 800px;

     background: #008BBF;

     text-align: center;

}

There, easy enough. Now, lets add the property "position: absolute":


#masthead {

     position: absolute;

     height: 140px;

     width: 800px;

     background: #008BBF;

     text-align: center;

}

Now, for the coordinates, it is already sitting at the very top, where we want it, so let's leave the "top" property alone. And now that we're at it, let's leave the "margin-left" property alone, as well, because it's already in the proper position. So, what can we position using coordinates? We'll do some of that below, when we add the navigation and so forth.

It's time to add the masthead text. Go ahead and create a new div in your CSS and call it "mastheadText". Notice how I used a capital letter, rather than a space, to separate the two words. This is important to remember because spaces between words in CSS selector names actually indicates two selectors instead of one. You will also note that CSS rules are case-sensitive. For the text, we want the font to be "impact" with a backup of "georgia" and a family of "serif". The font size will be 60 pixels, and the color is going to be black. Finally, we want to give the letters a little bit of spacing, or "letter-spacing", of 8 pixels apart. Refer to the code below, if you need to:


#mastheadText {

     text-align: center;

     font-family: impact, georgia, serif;

     font-size: 60px;

     color: black;

     letter-spacing: 8px;

}

With this in place, you can now add the div to your HTML body. (Note: It goes inside the masthead div):


<body>

     <div id="container">

          <div id="masthead">

               <div id="mastheadText">


               </div>

          </div>

     </div>

</body>

Let's go ahead and add a title to our masthead, now. I just called mine "masthead", but you can type whatever you want. Just place the cursor in between the opening and closing div for "mastheadText" (you might have to hit "enter" to add an empty line) and type away:


<body>

     <div id="container">

          <div id="masthead">

               <div id="mastheadText">

                    Masthead

               </div>

          </div>

     </div>

</body>

So far, your document should look like this.

Now then, I don't like where the text is positioned relative to the top of the browser window, so let's add some padding to it; say, 40 pixels:


#masthead {

     position: absolute;

     height: 140px;

     width: 800px;

     background: #008BBF;

     text-align: center;

     padding-top: 40px;

}

That should do it. It's time to add in some navigation buttons. Sound like fun? Let's do it:

The Navigation

For our navigation, we are going to use what's called a "pseudo-class". This is covered in more detail, in the Rollover, CSS! chapter, but for now just follow the code, as I lay it out for you.

"What is it for, though?" you may ask. Well, we are going to use a pseudo-class to change our buttons' appearance when the mouse rolls over them. But first, we must set up a navigational bar container. Call it something like "navbar" or "navigation." Then give it an absolute positioning. Align the text to center, and give it a background of "#22455F." Finally, the dimensions are 800 x 38, and we need to position it 140 pixels from the top, or the "height" of the masthead, in other words:


#navbar {

     position: absolute;

     text-align: center;

     background: #22455F;

     width: 800px;

     height: 38px;

     top: 140px;

}

With our CSS established, let's throw the div into the HTML. Keep in mind when you do this that it is inside the container div, but not the masthead. In fact, it will come just after the masthead, since our navigation will show up just underneath it, when it is rendered:


<body>

     <div id="container">

          <div id="masthead">

               <div id="mastheadText">

                    Masthead

               </div>

          </div>

          <div id="navbar">

               

          </div>

     </div>

</body>

With our navigation container in place, let's add the CSS for our buttons. They will have centered text, have a font of "arial", a font color of "skyblue," or "#87CEEB," a font size of 13 pixels, with a dimension of 120 x 38. Finally, to help separate one button from another, we are going to add a right border to them.

Now, you can set up as many buttons, calling them anything, you want. For this example, I have used: home, portfolio, personal, links, and about me. I'll show you how to set up the first one:


#home {

     text-align: center;

     font-family: arial, verdana, sans-serif;

     font-size: 13px;

     color:  #87CEEB;

     width: 120px;

     height: 38px;

}

Good, so far? Now, to set up a border, we need three properties: size, style, and color. The size property looks like this: border-width: 1px;. The style property looks like this: border-style: solid;. And the color property looks like this: border-color: red;. Since we don't want to place a border around the entire button, just on one side to separate them, we will apply it to the "right" side, like so:


border-right-width: 1px;

border-right-style: solid;

border-right-color: red;

That seems like a lot to say for each button, now doesn't it? Lucky for us CSS has a way of shortening this:


border-right: 1px solid red;

Now the order of the values, here, is not necessarily important. You could have just as easily gone "solid, red, 1px." Just make sure that you have all three properties. Now, for our borders, we are going to have a 1 pixel wide, dotted border the color of the background, or "#111122":


#home {

     text-align: center;

     font-family: arial, verdana, sans-serif;

     font-size: 13px;

     color:  #87CEEB;

     width: 120px;

     height: 38px;

     border-right: 1px dotted #111122;

}

From there, all you need to do is add that to every button. So, so far, we have set up one button. Your navigation should now look something like this:

Ok, let's go ahead and add another button. We'll call it "portfolio":


#portfolio {

     text-align: center;

     font-family: arial, verdana, sans-serif;

     font-size: 13px;

     color:  #87CEEB;

     width: 120px;

     height: 38px;

     border-right: 1px dotted #111122;

}

Now, our navigation bar should look like this:

Right of the bat, we notice a problem: the two buttons are following the behavior of divs and stacking right on top of each other. We already know one way to correct this behavior of divs, and that would be by positioning our buttons "absolute." But, there is another trick up our sleeve. It's called "float". This may seem a little more advanced, at first, but I show you this because it is a common tactic for a certain navigational technique having to do with lists (Where I don't show you the list technique here, you can find it later online by doing a search; there are plenty of sites that will teach you.) The way that floating works, in a nutshell, is that it "breaks" the standard flow of things in order to follow the value, either to float "right" or float "left". We are going to float ours "left". Once we do this, the items will stack left to right, as opposed to up and down:


#home {

     text-align: center;

     font-family: arial, verdana, sans-serif;

     font-size: 13px;

     color:  #87CEEB;

     width: 120px;

     height: 38px;

     border-right: 1px dotted #111122;

     float: left;

}

This will, then, be added to each and every button. With our float now in place, we can see that each and every button share the same attributes. This gives us the ability to take advantage of yet another CSS secret: combined CSS rules. What does that mean? It means that we can list the set of CSS rules once, for shared elements, and then in the "selectors" area, we can simply list all of the selectors which these rules apply to by separating them with a comma and a space, like so:


#home, #portfolio {

     text-align: center;

     font-family: arial, verdana, sans-serif;

     font-size: 13px;

     color:  #87CEEB;

     width: 120px;

     height: 38px;

     border-right: 1px dotted #111122;

     float: left;

}

This would be an excellent time to add the other buttons—"personal," "links," and "about me":


#home, #portfolio, #personal, #links, #aboutme {

     text-align: center;

     font-family: arial, verdana, sans-serif;

     font-size: 13px;

     color:  #87CEEB;

     width: 120px;

     height: 38px;

     border-right: 1px dotted #111122;

     float: left;

}

See how nicely that works out? Now, instead of listing each and every button and its subsequent rules individually, we can set the rules up once and then attach them to all selectors that apply. I think this is pretty neat.

But we're leaving out one "tiny" little detail regarding floats: When you float something, as has been stated earlier, it "defies" the natural order of things, in order to do its own thing. So once we're done with our floats, we have to reset everything, back to normal. This is done using the property "clear". This property allows you to clear either left, right, or both. You could use "both" here, if you wanted to and it would do the same thing as clearing "left." But for the sake of avoiding overkill, we'll simply create a new selector that will only clear "left." Let's just call it "reset":


#reset {

     clear: left;

}

Now, in your HTML, add the new div:


<body>

     <div id="container">

          <div id="masthead">

               <div id="mastheadText">

                    Masthead

               </div>

          </div>

          <div id="navbar">

               <div id="home">HOME</div>

               <div id="portfolio">PORTFOLIO</div>

               <div id="personal">PERSONAL</div>

               <div id="links">LINKS</div>

               <div id="aboutme">ABOUT ME</div>

               <div id="reset"></div>

          </div>

     </div>

</body>

Your navigation should now look like this:

We can see that the text for our buttons is kind of "crammed" up at the top. There are various ways that we could correct for this. We could include some padding in our navigation, or we could add top margin to our text. But for the sake of time, and moving on, we'll just enclose each button title in a paragraph, and let a paragraph tag's default padding do the rest. Keep in mind that this is a down and dirty way of doing things, but for the sake of time, we'll use it so that we can get on with the rest of our layout:


<body>

     <div id="container">

          <div id="masthead">

               <div id="mastheadText">

                    Masthead

               </div>

          </div>

          <div id="navbar">

               <div id="home"><p>HOME</p></div>

               <div id="portfolio"><p>PORTFOLIO</p></div>

               <div id="personal"><p>PERSONAL</p></div>

               <div id="links"><p>LINKS</p></div>

               <div id="aboutme"><p>ABOUT ME</p></div>

               <div id="reset"></div>

          </div>

     </div>

</body>

We have one final thing to add to our CSS, before we go on to building the rollover states for our buttons, and that is to add a spacer div. We will use this div to position our buttons more in the center, and to give a left border to the first button so that it appears to be enclosed like the other buttons. We will call it something like: spacerLeft. So first, the positioning:


#spacerLeft {

     float: left;

     width: 95px;

     height: 38px;

}

Remember, now, to place this div just before the "home" button, in the HTML, like so:


<body>

     <div id="container">

          <div id="masthead">

               <div id="mastheadText">

                    Masthead

               </div>

          </div>

          <div id="navbar">

               <div id="spacerLeft"></div>

               <div id="home"><p>HOME</p></div>

               <div id="portfolio"><p>PORTFOLIO</p></div>

               <div id="personal"><p>PERSONAL</p></div>

               <div id="links"><p>LINKS</p></div>

               <div id="aboutme"><p>ABOUT ME</p></div>

               <div id="reset"></div>

          </div>

     </div>

</body>

The result so far:

Now, you can see that we need to add a border to our spacer div, in order to "close" up the home button:


#spacerLeft {

     float: left;

     width: 95px;

     height: 38px;

     border-right: 1px dotted #111122;

}

There, now everything's in place. Notice that we did not have to place in another "reset" div, even though our spacer div is floating left, because it comes before the first one, so it is already being reset along with all of the other buttons. Your new navigation bar should now look like this:

Ok, it's time to set up the rollover state. To do this, we use the pseudo-class ":hover" as I stated earlier on in this tutorial. The hover will be added to each item that we want to hover. For the hover state, we want the button to change to a gray color and the text to go slightly lighter in color. Use the rules that I have set below to set up the home button:


#home:hover {

     background: #616C78;

     color: #A8DFFC;

}

Now, right now—if you roll over this button—you will notice that it changes, but that your cursor stays an arrow, rather than indicating that this is a link. We can change the cursor with a CSS rule called "cursor". The value of this particular property will be "pointer":


#home:hover {

     background: #616C78;

     color: #A8DFFC;

     cursor: pointer;

}

With our main rules in place, we can then add this style to all of the other buttons by following the combined CSS tactic that we have used before. The only difference is that on every button we list, we will need to add the "hover" pseudo-class to it:


#home:hover, #portfolio:hover, #bio:hover, #links:hover, #aboutme:hover {

     background: #616C78;

     color: #A8DFFC;

     cursor: pointer;

}

The great thing about this is that, we don't have to set up anything more in our HTML; the CSS is doing it all. That means that our navigation is done! Time to finish the rest of our site. We have the following things left: a content div, left secondary-navigation, and the content styling itself.

Your document, so far, should look something like this.

Content

For our content, we are going to give it its own container. The container will be light-blue in color, 178 pixels (the total height of the masthead plus the navigation bar) from the top, 500 pixels high, and 800 pixels wide (this will include the left-margin navigation.) Be sure to first position absolutely:


#content {

     position:absolute;

     top: 178px;

     height: 500px;

     width: 800px;

     background: #87CEEB;

}

That sets up our content container. Now, we have to style the actual content inside of this container; the paragraphs. For this, we will need to move everything over 200 pixels from the left, to make room for our leftside navigation, which we are going to float "left". Also, let's pad the right up 15 pixels, give the paragraphs all a font of "verdana", the font size of 13 pixels, and #202140 in color.

What's nice about CSS is that we can set up this rule in such a way that it only effects the paragraph tags within the "content" div. This will help us avoid adding any styling we don't want to the paragraph tags that we already have in the navigation. It's done by listing the "p" selector along with the content div, like so:


#content {

     position:absolute;

     top: 178px;

     height: 500px;

     width: 800px;

     background: #87CEEB;

}



#content p {

}

Note that this does not add anything to the "content" div, only the paragraph tags within it. Now, we just simply apply all the rules that I listed above:


#content p {

     margin-left: 200px;

     padding-right: 15px;

     font-family: verdana, arial, sans-serif;

     font-size: 13px;

     color: #202140;

}

Left Column Navigation

As I stated earlier, when we set up our paragraph styles, the left navigation will be "left" floated. We are also going to give it a width of 180 pixels, height of 480 pixels, a right border that is: 1 pixel wide, solid, and #111122 in color. Finally, give it a background of "#88B8D2" with a top padding of 20 pixels:


#marginNav {

     float: left;

     width: 180px;

     height: 480px;

     border-right: 1px solid #111122;

     background: #88B8D2;

}

This is good enough for the margin, itself, but we want to style the links that will go here, a little more. For this, we will do what we did for the paragraph tags in the content div, only now we're doing it with the anchor tags or "a":


#marginNav a {

}

For the links, we want them to be #4B5666 in color:


#marginNav a {

     color: #4B5666;

}

That takes care of their appearance normally. Now, let's add some styling to the rollover state:


#marginNav a:hover {

     color: maroon;

}

One last step to take for our CSS: we are going to put the links in an unordered list. So we will need to add some styling to the unordered list tag, but only for our marginNav section:


#marginNav li {

     list-style-type: circle;

     padding-bottom: 10px;

}

All that we've done here is changed the list item decoration to a "circle" and increased the padding between each item, so that our links will appear more like a list of links rather than normal list items.

Last of the HTML

With everything in place for our CSS, let's finish up our HTML. For the links, set up an unordered list (remember: first <ul>, then an li for each item, and close it all up with </ul>). Then throw in a few links, however many you like, and give them addresses. Refer to my example:


<div id="marginNav">

     <ul>

          <li><a href="index.html">home</a></li>

          <li><a href="projects.html">Project Details</a></li>

          <li><a href="related.html">Related Links</a></li>

          <li><a href="associated-sites.html">Associated Sites</a></li>

     </ol>

</div>

That takes care of the leftside navigation. Now, for the main content use the code below for some generic filler text, so that we can better see our design in action (just copy and paste it after the closing "marginNav" div):

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eu massa. Donec ac pede nec velit sodales gravida. Nullam sed odio a neque adipiscing cursus. Donec non metus. Phasellus laoreet, justo eu porta interdum, turpis lectus consectetur orci, in placerat dolor augue vel felis. Proin pretium metus id nisi. Cras suscipit congue libero. Integer eleifend arcu sit amet urna. Sed facilisis, libero at lobortis sodales, tellus tellus pulvinar augue, id condimentum leo nisi nec risus. Nullam quis risus vitae diam sagittis auctor. Integer venenatis, libero et tincidunt elementum, diam odio lobortis nisl, in pulvinar nulla dolor non elit.
</p>

<p>
Praesent at massa vitae sem malesuada egestas. Nullam eget lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus vestibulum justo. Praesent euismod. Cras accumsan, quam quis facilisis pellentesque, nisl tellus molestie velit, et sollicitudin nisl lectus at dolor. Vivamus arcu leo, congue quis, interdum nec, commodo a, velit. Nullam molestie leo. Vivamus dictum sagittis pede. Etiam a enim id arcu faucibus porta. Mauris lorem justo, posuere eget, interdum sed, convallis eget, lorem. Duis semper sapien vel urna. Ut aliquet. Curabitur mi. Duis dui mi, faucibus et, aliquam et, convallis ac, felis. Nunc consequat, enim vel posuere ullamcorper, risus risus vestibulum enim, varius volutpat nibh lectus iaculis felis. Sed posuere augue sed odio. Nulla vitae magna. Donec blandit velit sit amet metus viverra ultricies. Morbi id sem.
</p>

Congratulations, you've done it! Save your document, and open it up in your browser. It should look something like this.

You may have noticed that my original example picture from above had a just a little bit more "eyecandy" to it. If you're interested in "going the extra mile," continue to the Spruce it Up section to add these parts. Otherwise, go to the next section.

[Next]

CSS Enterprise

Table of Contents