skip to content
.
logo picture logo text
Breadcrumb trail for Web Design:
Web Design -> Planning -> Best Practices -> Basic Skills -> Building -> Special Pages -> Publishing -> Testing -> More

Using "id" - L. 04

You can use "id" to specify that a particular div, p or other container will be styled differently from other div's, p's, etc. An id must start with a letter, but can be followed with a mixture of letters, digits, hyphens and underscores. We'll keep everything lower case.

We're going to add a few divs to what we have now, then give some an id and add some different styles. Our divs will have id's for wrapper, logo, main, sidebar and footer.

Our page won't look any different, though, until we add style to our "style.css" file. However, when we get to that step, you'll begin to see just how much you can change the appearance of your page with just a small amount of code in the right place.

Changing the code in the index.html file

First, we're going to open our "index.html" page and add some other containers with id's. Then we'll add some id's to containers we already have. Don't worry about understanding things completely. We'll discuss what we've and you'll start getting the idea.

I've indicated what has been changed or added by putting the new stuff in red. Tip: you could just copy and paste to replace what is in your index.html file now, if you want.


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Welcome to My Web Page!</title>
</head>
<body>
<div id="wrapper">
<div id="logo"><h1>Logo - Welcome to My Page!</h1></div>
<div id="main">
<p>This is the main div. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas ligula diam, tincidunt vel egestas sit amet,
commodo et orci. Curabitur varius congue congue. Sed justo est,
fermentum ut faucibus in, luctus ac mi.</p>
<p>Pellentesque porttitor sagittis erat ut egestas. Donec sed
posuere ante. Ut dapibus varius leo. Ut feugiat eleifend lectus sit
amet gravida. Proin lobortis, dui sodales dapibus dapibus, felis nulla
scelerisque nunc, a cursus elit turpis id est. Nullam malesuada
pellentesque congue.</p>
</div>
<div id="sidebar">
<p> This is the sidebar div. Duis tincidunt tincidunt odio vitae
vestibulum. Donec orci nibh, euismod quis viverra id, imperdiet nec
lacus. Sed tristique aliquam odio et accumsan. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras
vehicula metus eget erat tristique pellentesque.</p>
</div>
<div id="footer">This is the footer</div>
</div>
</body>
</html>

We've added some div's and given some div's and id (special name).

<div id="wrapper">
<div id="main">
<div id="logo">
<div id="sidebar">
<div id="footer">

If you look at your "index.html" page with your browser, you won't see any difference. So, let's fix that by opening our "style.css" file

Changing the code in the style.css file

If your style.css file is not already open, open it with your plain text editor So far, in our "style.css" file, we have something similar to this:

body {background-color: #ffffdd; color: #660000;}
p {background-color: #ffccff; color: #990099;}

The Wrapper

In our index.html file, we have a div called wrapper around all of the other div's. Let's explore what we can do with this. To add style for a particular div with an id (name), we start with a # sign, then the id name, and then the code. So, we'll begin the stye for the "wrapper" with

#wrapper {
}

and then add the style within the curly brackets. I'm going to add a width "width: 800px" for the wrapper so that it doesn't fill the whole page and also give it a a background image rather than a background color.

#wrapper {width: 800px; background: #ffffee url(images/weba01.jpg)
}

There is also a "trick" to use to center the wrapper in the page. You use "margin: 0 auto" This is the complete code we'll use for the wrapper:


#wrapper {margin: 0 auto; width: 800px; 
background: #ffffee url(images/weba02.jpg);}

Using a background image

Before you can use an image background, you'll need to choose the images you want to use. Many designers keep thier images in a special folder which is what we are going to do

  1. Open the folder where you are keeping your website files
  2. Create a new folder
  3. Name it "images" (Don't use the quotation marks)
  4. Close your folders
  5. Navigate to an image you want to use
  6. Save or copy it to the "images" folder in your website folder
  7. Repeat steps 5 through 6 for each image

Since the images will be stored in an images folder within our website folder, we'll be able to use relative links and not need to use full URL's to the image.

I will be using these two backgrounds. You may download them to your "images" folder and use them, if you want.

bg web a
                      01
weba01.jpg
bg weba
                      02
weba02.jpg

The Body

First, let's change the the background of the "body" to an image background. We'll be using shorthand code.

Replace "background-color: #ffffdd;" with background: #ffffdd url(images/weba01.jpg);

When using an image background, most designers will specify a color similar to the main color of the background image for folks who turn off images or can't see images for one reason or another.

url(images/weba01.jpg); right after the color hex code tells the browser to look in the images folder for a particular image. If you are using a different image, replace weba01.jpg with the name and suffix of your image.

Here's how the styling for the body will look:

body {background: #ffffdd url(images/weba01.jpg); color: #660000;}

The Paragraphs

For now, I'm also going to change the code for all paragraphs to have a white background and to inherit the text color from the body, so it will now look like this:

p {background-color: #ffffff;}

Code in style.css file so far:

body {background: #ffffdd url(images/weba01.jpg); color: #660000;}
p {background-color: #ffffff;}
#wrapper {margin: 0 auto; width: 800px;
background: #ffffee url(images/weba02.jpg);}

Play around and see what happens when you make changes, such as changing the  background images, text color, and/or the width of the wrapper.


Next: Links Lesson 05 -->

Website "A" List of Lessons

Basic Web Page - Creating the Basic Page Lesson 01
Basic Web Page - Common Containers Lesson 02
Basic Web Page - Add Color with CSS Lesson 03
Basic Web Page - Using "id" to specify Lesson 04
Basic Web Page - Links Lesson 05
Basic Web Page - Floats Lesson 06
Basic Web Page - Font Face (Typeface) Lesson 07
Basic Web Page - Menu - Lesson 08