How 2 Create A Website | HTML 4 Tutorials - CSS Introduction

CSS and Dividing Content (div) tags

You can group content elements with div in HTML 4 documents.

Div tags can also be very useful for web page layout. Eacsh div block can be set with its very own style rules.

You can also you the class and id attributes to style the div blocks.

Here is an example of implementing some div tags in a HTML 4 document.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head><title> CSS Styling </title>
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">

<style type="text/css">

div
{
background-color: yellow;
}

#block1 { position:absolute; top:2px; left:2px; }

#block2 { position:absolute; top:30px; left:10px; }

#block3 { position:absolute; top:70px; left:15px; }

</style>

</head>
<body>

<div id="block1">
<p>This is block 1</p>
</div>

<div id="block2">
<p>This is block 2 </p>
</div>

<div id="block3">
<p>This is block 3 </p>
</div>

</body>

</html>

This is how the above code will look in a web browser:

CSS DIV Example 3

How To Align Text With CSS

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<head><title> CSS Styling </title>
<meta name="Description" content="Your description here...">
<meta name="Keywords" content="Your keywords here...">

<style type="text/css">

div
{
background-color: yellow;
}

#block1 { text-align:center; }

</style>

</head>
<body>

<div id="block1">
<p>This is block 1 <br />
This is still block 1
</p>
</div>

</body>

</html>

This is how it will look in a web browser:

As you can see the text is centered in the between the div tags.

next | working with css continued

HTML 4

1. Create A Website

2. Get Traffic To Site

3. Make Money Online With Site

How 2 Create A Website | HTML 4 Tutorials - CSS Introduction

CSS and Dividing Content (div) tags

How To Align Text With CSS