HTML 101 – Part 4 – Div Tags

HTML 101

How to Use Div Tags for CSS Layout?

In our last lesson, we went over how to create navigation menus using lists. Our design to this point seems kind of bland and boring so we are going to cover some basic CSS styles so we can style our page and make it look more like the end product.

What is CSS

I’m not going to go fully in depth on what CSS is since this is a whole series unto itself. I will cover the basics. CSS also known as Cascading Style Sheets are a way to apply design elements to your website. You can include these within the HTML of your web pages or you can attach external CSS style sheets which is what I recommend.

Doing the recommended method will allow you to change all of the pages associated with the stylesheet with a simple click of a button. Example, if your font family for all of your paragraphs is Verdana and you want to switch them all to Arial, you just simply modify that line of code in your Style Sheet and all pages that use that Style Sheet will be updated. This makes quick work of modifying the look of an entire site.

Here are some other good sources for learning more about CSS

What are Div Tags

In order to use CSS, you must define the elements then define how you want them to look. The best way to do this is using Div Tags. We will apply some logical tags to our code now then start adding some style to our page.

Applying Div Tags

If you break our website down into sections you basically have the following elements:

  • Header
  • Navigation
  • Main Content
  • Sidebar
  • Footer

We will use these to define the Div tags so we can style those sections later.

To assign a div tag this is the code to do so.

<div id="header"></div>

We have defined our header section.
Here are the rest of the main Div tags we will use for our site.
The Container and the Wrapper are elements we will use to contain other elements.

<div id="wrapper"></div>
<div id="container"></div>
<div id="mainContent"></div>
<div id="sidebar"></div>
<div id="footer"></div>

Here is our code for our page including the newly added Div Tags.

<html>
<body>
<div id="header"></div>
<div id="navigation">
<ul>
 <li><a href="/">Home</a></li>
 <li><a href="/">About</a></li>
 <li><a href="/">Contact</a></li>
</ul>
</div><!--End Navigation-->
<div id="wrapper">
<div id="container">
 <div id="mainContent">
 <h1>Welcome to My Very First Web Design</h1>
 <h2>What to Expect?</h2>
 <p>Don't expect a lot since this is my very first web design. But rest assured my friend that this is the beginning of something big. Rome wasn't built in a day and this website won't be either. Why bring that up? I'm not really sure but it sounds cool.</p>
 <h2>When to Expect It?</h2>
 <p>I'll defer to the first paragraph on this question. I'm not sure what to expect so how can I be sure when to expect it? I can't. So you should</p>
 <ul>
   <li>bookmark this page</li>
   <li>check back often</li>
   <li>keep checking back</li>
 </ul>
 <p>Don't be surprised if there isn't any new content from your last visit. But if there is new content, that means I am on my way to becoming a web designing machine.</p>
 <h2>What is a Web Designing Machine?</h2>
 <p>I did get a little carried away in that last paragraph. I'll tone it down a notch. What I meant to say is I'll become a proficient web designer so I can impress all my friends, but more importantly, all the ladies (or men depending on which gender you are) out there.</p>
 </div><!--End Main Content-->
 <div id="sidebar"></div>
</div><!--End Container-->
</div><!--End Wrapper-->
<div id="footer">Copyright © 2009 - Very First Web Design - All Rights Reserved</div>
</body>
</html>

Let’s Add our CSS Now

First we need to attach an external stylesheet. Let’s create a folder called CSS and and place a blank file called style.css in there. Once we have done this, just go to the head section of our site and put this line of code in there.

<link href=”/css/style.css” rel=”stylesheet” type=”text/css”>

This basically says when you open this page in your browser, load the style.css file located in the CSS folder.

Now let’s open up our blank style.css file.

We just need to define how we want our page to look now. The very first element in our page is the body tag. Let’s define that.

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  background: #000;
  text-align: left;
  margin: 0px;
  padding: 0px;
  color: #FFF;
}

Now the body is defined.
The font family will be Verdana and if that is not available on the user’s computer it will choose Arial and so on.
The font size will be 100% of the user’s default. Typically this is 16.
The background color will be #000 which is black.
We want the text alignment to be to the left.
Set the margin and the padding to 0.
The font color will be #FFF which is white.

Here is the rest of our CSS styles for our page:

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 100%;
  background: #000;
  text-align: left;
  margin: 0px;
  padding: 0px;
  color: #FFF;
}
#header {
  height: 115px;
  background: #030000 url(/images/header.gif) no-repeat center;
  margin: 0px auto;
  text-align: center;
}
  #navigation {
  height: 21px;
  background: url(/images/navigation_background.gif) repeat-x;
  margin: 0px auto;
  text-align: center;
  padding: 7px 0px;
}
#navigation ul {
  margin: 0px;
}
#navigation ul li {
  list-style: none;
  display: inline;
  padding: 0px 20px;
}
#navigation ul li a {
  font-weight: bold;
  color: #FFF;
  text-decoration: none;
}
#wrapper {
  margin: 0px auto;
  background: #000 repeat-x;
}
#container {
  background: #3D0203;
  width: 900px;
  margin: 0px auto;
  overflow: hidden;
}
#mainContent {
  padding: 10px 20px;
  background: #3D0203 url(/images/mainContent_background.gif) repeat-x;
  float: left;
  width: 560px;
}
#sidebar {
  padding: 10px 20px;
  background: #3D0203 url(/images/mainContent_background.gif) repeat-x;
  float: right;
  width: 259px;
  border-left: 1px solid #000;
}
#footer {
  height: 17px;
  background: url(/images/footer_background.gif) repeat-x;
  text-align: center;
  margin: 0px auto;
  font-size: 80%;
  padding: 10px 0px;
  clear: both;
}
h1, h2, h3, h4, h5, h6 {
  font-family: &quot;Palatino Linotype&quot;, &quot;Book Antiqua&quot;, Palatino, serif;
}
h1 {
  font-size: 160%;
}
h2 {
  font-size: 120%;
}
p {
  font-size: 90%;
}


Save this file and your page should look like this. Click on the image for a larger view.

Conclusion

We added some Div Tags which helped us assign some CSS values to our page. Our website is really taking shape now and it will be completed soon.

Next Lesson

In our next and last session, we will finalize the website by adding the sidebar content.

Download the Project Files

Download the files for this lesson

Comments or Suggestions

Let us know what you think about it so far.

Lesson 1HTML Codes
Lesson 2HTML Links
Lesson 3HTML Navigation List

One Comment


  1. Abdelghani Achahoud
    Feb 06, 2010

    thanks for this nice article, it’s the second article I read today on this blog

Leave a Reply

Subscribe

Our Categories