The Blog

How To Code A Simple Website From Scratch Part 4: Fancy CSS

Posted on 10/26/09 in blog, development about CSS, development, tutorial

We’re finally ready to end this tutorial with our last and best part – The CSS. If you remember from last week, we have our design sliced up and the HTML finished and validated. Hopefully, you still have your styles written down from Part 1. If not, go back and get the notes. In today’s tutorial I’ll explain the basics of CSS as much as possible, including the differences of IDs and Classes; floats; margins and padding. Ready to get started?

The Basics of CSS – Classes vs. IDs

If you remember from Part 3 of our tutorial, we gave our sections ids. What are ids? IDs and Classes are the ways we “identify” and “classify” our divs, images and links. You only use an ID when you’re using that element only once. You use a class when you’re using the element multiple times. This is very important, and is another rule that is broken by lessor developers than us.

In CSS, in order to start styling our cool website, we need to call our tags, either by it’s class or ID and then it’s name. So in the HTML, and ID would look like:

<div id="header">

And it’s called in the CSS by using ‘#’ and it’s name:

#header {}

Inside those fancy brackets is where we’d put our CSS styles. If we had a class it would look like this in the HTML:

<div class="contentBucket">

In the CSS it would be called with a ‘.’ and its name:

.contentBucket {}

Alright, now it’s time to get started! Open a new file and save it as main.css

The CSS Reset

OK I’m going to say this for the millionth time on the blog, but before we being styling our pages, we’re going to use a CSS Reset. A CSS Reset essentially “resets” the sizes, margins, styles and paddings that browser normally automatically give certain elements. This helps us in the future when we’re dealing with browser issues in IE, because it basically forces all browsers to start with the same clean slate. Here’s our reset, and put this at the top of your CSS:

/*****CSS RESET*******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {  margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }

I know this looks like a lot of junk, but I promise it works. Now the very first line of the CSS Reset is:

/*****CSS RESET*******/

This is how you comment in CSS. We like to keep our CSS clean, so we’ll split them into sections, much like our divs. Let’s get started on the body section.

The Body CSS

In the body section of my CSS, I put the rules that affect the entire site, including the body background, your header (h) tags, and your overall p tags. Let’s look back at the styles we wrote down:

• Body Bkg: #aeaeae
• Header: 1023×162, bkg: #e7e6e6
• Logo: logo.jpg 298×90
• Nav: 1023×45 bkg: #a5a3a3 link: #FFF, 16px, uppercase, no underline
• Left Column: 780 (no height, we’ll make it fluid) bkg: #f2efef font: 12px #000 h1: 30px
• Right Column: 243 bkg: #cecdcd h2: 24px font: 12px #000
• Footer: 1023×40 bkg #515050 font: #FFF 12px

As you can see, the only thing we need to put in our body section is the body background color, h1 and h2 tags and the paragraph spacing. Let’s first add a comment to our CSS to specify this is the body:

/*****CSS RESET*******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {  margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: }


/*****BODY STYLES*******/

Now we need to first add our background and font styles. To do this we’ll use the <body> tag that we wrapped around our HTML (See I told you every tag had a purpose). When targeting selectors, or tags that don’t have an id or class, just add the name before the brackets:

/*****CSS RESET*******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {  margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: }


/*****BODY STYLES*******/

body { font-style: Arial; font-size: 12px; line-height: 18px; background: #AEAEAE; }

Now you can start seeing how CSS works. Any rule in the body tag will affect the entire site unless you give it another rule after it. Each rule must have it’s name, then a ‘:’ then the property you want to give it, followed by a ‘;’ to move on to the next one, or you’ll break the CSS. For our website, we gave it a global font, Arial, a size of 12px and a line-height (the spacing between one line of text and another) 18px. Don’t be afraid to play with the numbers to see how it changes the look of your text. As far as the font goes, make sure you only use web-safe fonts. We also gave the whole site a nice little background color. If you want, you can save your document and see how it already affects your site, but I’ll go ahead and move on.

I also like to put the entire site container into the body section, as well as the separation of paragraphs and h tags. To center a website in a browser, you must give the outer-most container the “margin: 0 auto;” rule:

/*****CSS RESET*******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {  margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: }


/*****BODY STYLES*******/

body { font-family: Arial; font-size: 12px; line-height: 18px; background: #AEAEAE; }
p { margin-top: 15px; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }


#container { margin: 0 auto; width: 1023px; }

The Header Styles

Go ahead and comment in that you’re starting on the header section. For our header, we need to specify a width and height, a background color and a float to keep the div nicely positioned. Floats allow backgrounds to repeat inside of a “margin: 0 auto;” container, they also allow 2 divs to sit side by side:

/*****CSS RESET*******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {  margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: }


/*****BODY STYLES*******/

body { font-family: Arial; font-size: 12px; line-height: 18px; background: #AEAEAE; }
p { margin-top: 15px; }

#container { margin: 0 auto; width: 1023px; }

/*****HEADER STYLES*****/

#header { float: left; width: 1023px; height: 162px; background: #E7E6E6; }

Now we need to add our logo style. Remember we talked about selectors? Instead of giving the image a class, we’ll give it styles by using the div it’s in. Since it’s inside of the #header and it’s an image, we can put these two together and give it rules of its own:

/*****CSS RESET*******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {  margin:
0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: }


/*****BODY STYLES*******/

body { font-family: Arial; font-size: 12px; line-height: 18px; background: #AEAEAE; }
p { margin-top: 15px; }

#container { margin: 0 auto; width: 1023px; }

/*****HEADER STYLES*****/

#header { float: left; width: 1023px; height: 162px; background: #E7E6E6; }
#header img { float: left; width: 298px; height: 90px; margin-top: 15px; }

As you can see, we target our logo by calling it’s parent div and specify the selector, img. This would also work if there was a p tag or a tag inside of header: we would simply target it by #header p or #header a. We gave our image a width and height to keep IE6 happy, as it tends to sometimes distort images. You can also see we have a top margin of 15px, if you look back at our design, you’ll see our logo is sort of in the middle vertically of the header. Unfortunately, there isn’t really a vertical align style in CSS (that works) so we must manually space this out using margins and padding.

The Navigation

The navigation might sound a little tricky because of the type of selectors we’ll be using, but I promise it’s really simple! We first need to give it it’s basic float, width, height and background color. Because we’re using an ID on our <ul> tag, or <ul id=”nav”>, we have to target it a bit differently. Remember our selector of #header img above? That selector means that any images inside of header will be affected. So how do you affect an element with the id on it? Obviously #nav ul won’t work, since our <ul> is NOT inside of a nav tag, but paired with it. We could technically use it as #nav like a regular div, but we like to be more specific right?

In order to target a selector with an ID or class attached, we’d use ul#nav for an ID element, or ul.nav for a class:

/*****CSS RESET*******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {  margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: }


/*****BODY STYLES*******/

body { font-family: Arial; font-size: 12px; line-height: 18px; background: #AEAEAE; }
p { margin-top: 15px; }

#container { margin: 0 auto; width: 1023px; }

/*****HEADER STYLES*****/

#header { float: left; width: 1023px; height: 162px; background: #E7E6E6; }
#header img { float: left; width: 298px; height: 90px; margin-top: 15px; }

/*****NAV STYLES*****/

ul#nav { float: left; width: 1023px; height: 45px; background: #A5A3A3; }

Now we need to style our links. And get them to float side by side. This means we need to add a float left to both the <li> and <a> tags:

/*****CSS RESET*******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {  margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: }


/*****BODY STYLES*******/

body { font-family: Arial; font-size: 12px; line-height: 18px; background: #AEAEAE; }
p { margin-top: 15px; }

#container { margin: 0 auto; width: 1023px; }

/*****HEADER STYLES*****/

#header { float: left; width: 1023px; height: 162px; background: #E7E6E6; }
#header img { float: left; width: 298px; height: 90px; margin-top: 15px; }

/*****NAV STYLES*****/

ul#nav { float: left; width: 1023px; height: 45px; background: #A5A3A3; }
ul#nav li { float: left; text-align: center; }
ul#nav a { float: left; padding: 14px 15px 10px; color: #FFF;  }

Now that we have our nav finished, let’s finish up our left and right contents!

Left and Right Content

Since we already specified the font styles for the website, all we need to do on the right and left content divs is to specify a float, width, and background color (no height since these are expandable). Make sure you give your right content div a right float:

/*****CSS RESET*******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: }


/*****BODY STYLES*******/

body { font-family: Arial; font-size: 12px; line-height: 18px; background: #AEAEAE; }
p { margin-top: 15px; }

#container { margin: 0 auto; width: 1023px; }

/*****HEADER STYLES*****/

#header { float: left; width: 1023px; height: 162px; background: #E7E6E6; }
#header img { float: left; width: 298px; height: 90px; margin-top: 15px; }

/*****NAV STYLES*****/

ul#nav { float: left; width: 1023px; height: 45px; background: #A5
A3A3; }
ul#nav li { float: left; text-align: center; }
ul#nav a { float: left; padding: 14px 15px 10px; color: #FFF; }

/******CONTENT STYLES******/

#leftContent { float: left; width: 780px; background: #F2EFEF; }
#rightContent { float: right; width: 243px; background: #CECDCD; }

The Footer

The footer is once again, pretty easy, just like the header and content areas, specify the float, width, height and background:

/*****CSS RESET*******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: }


/*****BODY STYLES*******/

body { font-family: Arial; font-size: 12px; line-height: 18px; background: #AEAEAE; }
p { margin-top: 15px; }

#container { margin: 0 auto; width: 1023px; }

/*****HEADER STYLES*****/

#header { float: left; width: 1023px; height: 162px; background: #E7E6E6; }
#header img { float: left; width: 298px; height: 90px; margin-top: 15px; }

/*****NAV STYLES*****/

ul#nav { float: left; width: 1023px; height: 45px; background: #A5A3A3; }
ul#nav li { float: left; text-align: center; }
ul#nav a { float: left; padding: 14px 15px 10px; color: #FFF; }

/******CONTENT STYLES******/

#leftContent { float: left; width: 780px; background: #F2EFEF; }
#rightContent { float: right; width: 243px; background: #CECDCD; }

/******FOOTER STYLES******/

#footer { float: left; width: 1023px; height: 40px; background: #515050; }

Check Out Your Work

Save your CSS file and check out your index.html file again. It should look like:

Obviously the positioning needs some tweaking. Try adding some padding to the footer and margins to the logo to move the text and images over off the edge. When adding padding, make sure you delete the amount of padding from the width or height of the element you’re adding it to:

/*****CSS RESET*******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: }


/*****BODY STYLES*******/

body { font-family: Arial; font-size: 12px; line-height: 18px; background: #AEAEAE; }
p { margin-top: 15px; }

#container { margin: 0 auto; width: 1023px; }

/*****HEADER STYLES*****/

#header { float: left; width: 1008px; height: 162px; padding-left: 15px; background: #E7E6E6; }
#header img { float: left; width: 298px; height: 90px; margin-top: 15px; }

/*****NAV STYLES*****/

ul#nav { float: left; width: 1023px; height: 45px; background: #A5A3A3; }
ul#nav li { float: left; text-align: center; }
ul#nav a { float: left; padding: 14px 15px 10px; color: #FFF; }

/******CONTENT STYLES******/

#leftContent { float: left; width: 780px; background: #F2EFEF; }
#rightContent { float: right; width: 243px; background: #CECDCD; }

/******FOOTER STYLES******/

#footer { float: left; width: 1008px; height: 40px; padding-left: 15px; background: #515050; }

Now that you’ve gotten the hang of CSS and HTML, trying playing around with the code. See what validates and what doesn’t. Add h tags that we added in the CSS to your HTML. Most importantly, have fun!

All “How To Code A Simple Website From Scratch” steps:

How To Code A Simple Website From Scratch Part 1: Preparing the Design
How To Code A Simple Website From Scratch Part 2: Beginning the HTML
How To Code A Simple Website From Scratch Part 3: HTML Layouts
How To Code A Simple Website From Scratch Part 4: Fancy CSS

What did you think of this tutorial?

About the author
Amber Weinberg specializes in clean and semantic XHTML, CSS and WordPress development. She has over 10 years of coding experience and is pretty cool to work with. Amber is available for freelance work, so why not hire her for your next project?

Tweet