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">

You can change "your-border-style" with any of the style names below:

*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>

OK, now you should know how to add the <div>, right? That's all there is to it!


To add more containers, change the coding to this:

<style type="text/css">

...and add more #contianer places.

This page was published on It was last revised on



  • Votes
  • Oldest
  • Latest