Introduction
By the time you've come to this tutorial:
1)You should know how to create basic HTML webpages.
2)You should know the DIV tag(<div>).
3)You should know how to add an image as a background.
What this tutorial will teach you:
1)How to make a content box with a white background(or any other color).
2)How to make the content box appear in front of the background image.
3)How to add a CSS border.
Step 1
Get to the <head> section. If you do not have a <head> section, please make one.
Note: The <head> section goes between the <HTML> and <body> tags.
Step 2
While in the <head> section, paste this code:
<style type="text/css">
#container{border-style:your-border-style;border-width:your-border-width;background-color:white}
</style>
You can change "your-border-style" with any of the style names below:
"Dotted"
"Dashed"
"Double"
"Groove"
"Ridge"
"Inset"
"Outset"
*All of them must be lowercase when you input them onto your source code!
You can change "your-border-width" with any number ending with "px".
Step 3
Now you have all of the inputs into the <style>, right? If not, please check that you do. Now we are going to add the <div> around the content with which we want the box around. Here is an example:
<div id="container">
<h>My first container!</h>
<p>My first container paragraph!</p>
</div>
OK, now you should know how to add the <div>, right? That's all there is to it!
Notices:
To add more containers, change the coding to this:
<style type="text/css">
#container{border-style:your-border-style;border-width:your-border-width;background-color:white}
#container2{border-style:your-border-style;border-width:your-border-width;background-color:white}
</style>
...and add more #contianer places.
This page was published on It was last revised on