Building a Website From Scratch | Part 3 – Stand It Up

In Part 1 of the Building a Website Series, we talked about taking a graphic design and prepping it for the web by slicing it up.  In Part 2, we dove into a crash course on CSS to prep you for actually coding the website.  In this part, it’s time to take what we’ve done/learned so far and make something useful out of it.  Are you ready for this action?  Hope so…


For starters, we need just some simple markup:

That is the foundation of a web page.  You’ve got your DOCTYPE definition (we’ll go with XHTML 1.0 Transitional), you’ve got your (the root of all the content), you’ve got your (where we will put our CSS includes) and (which defines what the browsers will display as the page’s title), and you’ve got your <body> (where all the visible elements go).

Go ahead and save that markup with a filename of your choosing, ending with .htm or .html.  I’ll be using SweetDesign.html.  Next, we need to get our external css file created.  For that you can just create an empty file with a name of your choosing that ends in .css.  I’ll be using SweetStyle.css.  These can be in the same directory, if you like.  On bigger projects, you’ll probably want to put the css in it’s own sub-folder, but that isn’t a big deal here.

Now that you have the css file created, you’ll need to link it into the html file.  You do that by modifying the <head> as follows:

What we have done here is tell the browser to load the file SweetStyle.css and use it as the stylesheet definition.  Before we go any further, we also want to include a reset stylesheet.  Why?  Because every browser adds default styling to elements and that styling may differ across browsers.  If we include a reset stylesheet, that eliminates all the default styles and puts us on the right track for cross-browser compatibility.  We’ll use the one defined on Eric Meyer’s Blog:

Go ahead and copy that into a file called reset.css, right next to your other css file.  With that we will need to further tweak our <head> as follows:

Notice that I have added the include for reset.css *BEFORE* the original css file include.  That is very important because we want the reset file to be applied first, clearing the default styles for all browsers.  Then our styles can be applied, trumping the reset styles that we want to change.

Now that we have the style sheet and html foundation in place, make sure to copy your sliced images from Part 1 into a subdirectory of your choosing.  Then we can start using the images on the page.

Time to Rock

Before we go any further, a quick disclaimer…  My goal here is to help you get your feet wet by creating your first table-free (or maybe just first) web page.  I don’t want to overwhelm you with complex details, so don’t assume that this approach is the only way to mark up a page.  I will try to keep the markup as clean and simple as possible, but there will definitely be room for improvement once you start to understand the concepts.  I will leave it as an exercise for you to make those improvements.

Now that we have the foundation in place, it’s time to do this thing.  Take a look at the graphic design from Part 1.  You will notice that there distinct vertical sections (rows, if you will).  One is the blue bar at the top, including the logo.  The next is the menu bar.  Finally, there is the gray body section.  Those sections are there for a reason, and I will now show you that reason.  To get the markup of our design started, we will modify the <body> tag as follows:

Notice that I have added one div tag, with the id layout, containing three <div> tags to the, each with an id (header, body, footer).  These tags will make up the logical sections of the page.  From this foundation, we will further elaborate to make the page begin to take shape.  layout will define the styles for sizing for the whole design and the other tags will define elements for their own individual sections.

We’ll throw down some foundation styles to get the ball rolling:

This sets up the background color and gradient as well as the width and positioning of the actual layout.  Now, it’s time to drill down a bit.


Let’s start with the top and work our way down, shall we?  The header is pretty straight-forward in this case.  Still, we will need to elaborate on our foundation a bit to make it happen.  Modify your header tag as follows:

Note that I am using compass directions, W for west (left) and E for east (right), to signify the elements location.  Now, let’s add some style to those tags and see if we can pull this thing together.  Go back into your style sheet (mine is SweetStyle.css) and add the following:

Now, if you view the page in a browser, you should see just the blue header and the gradient background.  If so, you are in good shape.  If not, check your image reference.  Recall that the path defined in the url(…) is relative to the location of the css file that it is defined.

Now lets add a little polish to the left side of the header:

That defines a width and a height, so the image fits perfectly in where it is supposed to go, then it floats it to the left side of the header.  Viewing the page now, you should see a nice rounding out of the bottom left of the header.  Let’s do the same thing for the right side:

This is basically doing the same thing as the left side, but for the right.  Right?  Viewing your page again should show a nice rounding out of both bottom corners of the header.

Let’s round out the header by adding the style for the logo:

This positions the logo absolutely within the header, so that it goes exactly where we want it.  There we have it: header == done.


The next stop in our tour is the body of the layout.  Go ahead and modify the body div as follows:

And add this to your style sheet:

A little explanation here, the body div will be the container for the menu and the actual content.  This is because these are the two things that can actually vary once the design is in place.  So, we have a parent <div> for both of them and add a new <div> for both the menu and the the content.  The menu is where we will put the navigational menu, so let’s start there.  Elaborate on that tag as follows:

That sets up the left and right finishing to the menu, just like in the header, as well as starts an unordered list with links for the actual menu items.  Now apply the following style to your style sheet:

That sets up the background for the menu and both of it’s sides.  It also sets up the styling for the unordered list items by floating them to the left so they play well with our horizontal menu.

For the actual hyperlinks (anchor tags) in the menu, add the following:

That gets us set up with some initial state for the menu links as well a state for when the mouse is hovering over a link.  Notice that there is a margin of 1px on the initial state and the margin is removed on the hover state, BUT a 1px border is added to the hover state.  That is because borders are added to the *outside* of the element.  Since there is no border on the initial state, we need to add a margin (padding would work in this case also) so that we don’t have any bizarre jumping things happening from borders being added and making the link elements bigger when the mouse is over it.  To see what we are trying to avoid, comment out the margin in the initial state, reload the page, then mouse over a link.  You should notice that it the text jumps a pixel.

That wraps up our menu.  Now, any content we add to the page will go inside the content div.  We’ll gloss over that for the moment and come back to is shortly.  Let’s finish up the layout with some quick additions to the footer.  Add this to your html:

And add this to your stylesheet:

We just added a simple footer that has some text (or links) of your choosing at the bottom of the page.  The footer will get pushed down to make room for whatever content you add to the page.


Now, lets get back to the content of the page.  In our awesome design, there is a container for each section of content to reside in.  It gives the content definite separation.  So, let’s get that bad boy standing up as well!

This is going to look like a lot, but go ahead and add this markup to your content div:

Let’s start from the outside and work our way in…  The class box is the outermost element for the whole container.  From there, we have three logical rows: the header, the content, and the footer.  The header has the classes boxN* (Note that the use of the compass notation again), the footer has the classes boxS* and the content has the remaining ones.  If you look at each logical row, you will see the usual definitions for left, right, and center.  Note that there is a div at the bottom with the class clearboth.  That is a simple way to make sure that the content element contains all the containers the page may have by clearing all floats.  That should stay at the bottom and any additional containers will be added above it.  Now add the following to your stylesheet:

That’s a lot of css, but each definition is pretty simple if you look at them closely.  The key point to take note of here is that the elements on the left and right have their background images starting in various locations and repeating in various ways.  That is what makes this container look correct.

Now that you’ve got your container set up, copy that markup and drop a few of them in the content element.  You’ll notice a three column layout, which is a pretty good place to start.


This post was a doozy!  There was a lot of info to cover here, but none of it is too complex.  If you take each part as a section, you’ll see that things break down into manageable parts.

We covered the initial markup required for a html page and how to include your external stylesheets.  Then we covered how to break the layout down into logical parts to tackle individually, starting from the top and working your way down the page.  Then we covered how to create your containers to give your content a way to have separation.

I hope that this has proven useful for you get get your graphic design translated into a real web page.  You can use this spankin’ new web page as your template (or master page) for all the pages in your website.  Other things that you can do from there include using Javascript and Ajax to make the navigation animated, smooth and flicker-free.  But, that is a topic for another conversation!

Get the code for my design here

Building a Website From Scratch | Part 2 – Get Some Style

This is the second of a series of posts I will be doing on building a website from scratch.  In the first post we covered how to slice a graphic design to prep it for conversion to a web layout.  This installment will be more of a preparation for the work to come, rather than an example of what to do.  I will be giving a crash course on a little something I like to call Cascading Style Sheets (CSS for short).  Like most aspects of web development, CSS is a large topic in and of itself.  So, I will be just giving enough of a taste of it to learn what we will need to build our website.  So let’s get to it!

What is CSS?

That is a great question, thanks for asking…  Cascading style sheets (CSS) is a way of defining positioning, look and feel of HTML elements.  Using CSS, you, the developer, can make a broad definition that says, "Gee, I really want all the <h1> elements on the page to be extra big and bold."  Of course, CSS is much more succinct than that, saying the same thing with this:

If you’ve ever looked at a website before, and I’m going to take a completely random guess that you have, you’ve seen CSS in action.  CSS, when done right, defines how everything on a page will look.

What’s with the ‘Cascading’?

With a name like ‘Cascading Style Sheets’, there must be some significance to the word ‘Cascading’, right?  Well, of course there is.  Man, you have some great questions today.  When a CSS style is defined, it can apply to more than just the specific element you are targeting.  In essence, the style ‘cascades’ down to anything that is contained within the element you are targeting.  At first glance, that may seem lame.  I assure you that it is not.  How about an example.  Let’s say that we want to make all paragraph text 12 pixels tall.  We do that by saying this:

Now, within our paragraphs, we have hyperlinks that we also want to have 12 pixels tall.  That’s where the cascading part comes in.  Let’s say our HTML markup looks like this:

This structure has a <p> tag as the outer element, with an tag within it.  With our style applied to the <p> tag, that means anything within the <p> tag will also have a font-size of 12px.  (Well, that is not totally true, but we will get to that shortly.  For now, assume that it is true.)  So, by applying a style to the <p> tag, everything within it gets the same style applied, ensuring uniformity.  Are you starting to see the power?  We can quickly apply styles and shape the look of a site with broad strokes.

Where do I put these ‘style’ things?

CSS can be defined in several ways: inline on an element, in an internal style sheet, or in an external style sheet.  Each of these definitions look pretty much the same at the style level.  What really separates them is their scope.

An inline definition on an element is only good for that particular element.  It looks like this:

This is usually something you’ll want to try to avoid using, for a few reasons.  The most obvious being that it would be way too much work to style a website one piece at a time.  The lesser obvious reason is that at some point down the road you may want to change the way your site looks.  Ouch.  Every element now needs to be changed.  Finally, and possibly most importantly (depending on your point of view), using the inline element style marries your markup with your presentation.  Not a good thing.  Any good developer understands the need for ‘separation of concerns’.  When you use an inline element style, you take your clean markup, which contains your content, and make a sloppy mess out of it.  It makes the code more difficult to read because there is all this extra stuff added to every tag.  Of course, inline style elements don’t have to be used on every element, but I think you get the point.  I have, however, found a good use for inline element styles: quick and dirty layout tweaks.  Sometimes you find yourself needing to make temporary changes or changes that you aren’t sure if you will use long-term.  Bam!  Inline element styles to the rescue.  Put your change to the test and see if it is worthy of living on.  Then, remove the inline style and place the style definition into one of the other options.

The internal style sheet has a slightly more broad scope: a single page.  One of those bad boys looks like this:

Notice that it is placed within the <head> of the page.  I have only shown one element defined in the example, but you can have as many as your heart desires.  The difference between the internal style sheet and the inline element style is that the internal style sheet applies to all elements on the page.  With the example above, we have defined all contents of <p> tags to have a font-size of 12px and a normal font-weight.  Since we are defining things a whole page at a time, this is a little more useful than the inline element style, but is still limited as a whole.  We can still have the clean separation of markup and presentation using internal style sheets, but they are still hard-coded into the page.  Thus, putting a new face on your site is still a fairly tedious task.  These guys still have their place, however.  I have found that they are most useful for browser-specific hacks (which is outside the scope of this discussion).

The external style sheet is where you’ll probably want to play the most.  An external style sheet is an external file with the extension .css, containing all the style definitions for the entire site.  Here’s an example of a style definition in an external style sheet:

Notice how the style definition itself looks exactly like the internal style sheet, but there are no other tags involved.  That’s due to the fact that the external style sheet is an entirely separate file.  To get it into your site, you have to include it at the top of every page that it applies to like so:

Notice how the include is located within the head of the document.  Inside that , you can also define an attribute for ‘media’, which is really cool.  What that does is give you the ability to have completely different style sheets for different media types, like screen or print.  You can also include more than one style sheet, if you like, giving you the ability to separate your style definitions into logical groups.

The external style sheet is really where you should put your style definitions.  Using the external style sheet gives you the power to define, in one single location, the look and feel for an entire website.  It also gives you the power to completely change the look and feel of a website by simply including a different style sheet.  A great example of that is CSS Zen Garden, where you can see the same exact markup completely transformed by simple swapping out style sheets.

Cascading – Revisited

Now that you have learned about the three different ways to define style, you might suddenly have images of multiple style definitions for a single element type.  Not to worry, that’s where the cascading comes back into the picture.  Let’s say we have an external style sheet that defines the style for <p> like so:

And, let’s also say that there is an internal style sheet that defines the style for <p> like so:

What happens now?  There you go with the great questions again!  The answer is that the internal style sheet definition is used.  Here’s why: proximity rules the day.  Here, proximity is more of a conceptual thing, rather than a physical thing.  Basically, whatever is closer to the element wins.  The external style sheet is the ‘furthest’ away because it is potentially site wide.  The internal style sheet is the ‘middle man’ because it is at the page level, ‘closer’ than the external style sheet, but ‘farther’ than the inline element style.  And, in case you didn’t guess it, the inline element style is the ‘closest’.

You see, with the cascading part of cascading style sheets, a definition cascades down to all affected elements until it is overridden by another closer or more specific definition.  The cool part about that is that you can make some broad definitions such as:

This style will apply to everything within the <body> tag (basically everything visible on the page).  The you can add a more specific definition such as:

Now, anything inside a <p> tag will have a font-size of 14 px and a normal font-weight.  At least, it will unless it is further overridden.


We’ve already dabbled in the topic of selectors, with our examples of ‘p’ and ‘body’.  As the name implies, this is what you use to select things to style.  There are three basic ways to select an element: by element type, by class, and by element id.

Selecting by element type is what we have already seen.  Basically, you just start the line with the type of element you want to select:

You can further elaborate on this by getting attributes involved as well:

The previous example selects all elements that are <input type="button">.  Consider the element selector to be the broad stroke to start painting on the canvas.  You lay the foundation and then move on to some detail.

The class selector is where you can start getting a little more detailed.  Actually, you can be as detailed as you want with it.  It requires involvement on the markup side as well.  First, the markup:

Next, the style:

Notice how the selector begins with a dot.  That is how classes are selected.  In the previous example, we selected a class of "container".  It doesn’t matter what element type has that class, it could be a <div>, a <span> or a <p>, they all would get selected.  Unless we do a combination:

What that is selecting is all <div>s that have the class "container".  In fact, say we have both of those styles together in our sheet like so:

What this is saying is all elements with the class "container" will have the given background, height, and width.  But, only <div> tags that have the class "container" will also have the given color.

We can also apply multiple classes to the same element:

This would apply the styles defined in both the "container" class and the "bold" class.  If there is any overlap, the last class wins ("bold" in this case).

The last basic selector is the id selector:

With the selector:

Notice the difference between the class selector (.container) and the id selector (#key). Where the class starts with a dot, the id starts with a pound sign (#).  Since an id can only be used once per page, the id selector is good for using in laying out the site’s design framework.  Elements that serve a single purpose can be given an id and styled accordingly.  Elements that can show up repeatedly can be given a class.  Plus, we can use them in combination like we did with the element and class selectors.

With the selector:

This works great when you start dynamically messing with classes using javascript because you can define the basic styles on the id and have some styles change based on the class it has:

Notice how the width and height never changes, but the color changes depending on whether the class "bold" or the class "mellow" is applied.

The last thing I want to talk about before letting you take a rest is child selectors.  Child selectors are when you use combinations of the basic three selectors in a particular order.  Say we have the following markup:

You may find yourself wanting to give special styles to only those elements inside the "container" class.  Well, never fear, child selectors are here!  Here’s how you accomplish it:

You first start with the outer element, class or id, then add a space and put the inner element, class or id.  That basically says, all <h1> elements inside an element with the class "container" act a special way and all <p> elements inside an element with the class "container" act an equally special (but different) way.  You don’t have to stop there, you can go as deep as you like:

With the style:

Are you starting to see the power?  I hope so, because I’m about out of breath here.


I’ve barely scratched the surface here with cascading style sheets.  Hopefully I’ve given you enough of an understanding to be able to begin applying it to our website as we move forward to the next steps.  I told you how CSS is defined, what it does and how to control what it does.  To learn more you can start with W3 Schools.  For some more advanced topics, A List Apart is a fantastic blog.  As we move through this blog series, you will be exposed to more and more CSS.  You’ll see plenty of examples of selecting elements as well as properties that can be used.  See you next time!