Div: HTML and CSS

The div is a “block” element used for grouping other HTML elements. Divs require either an “id” or “class”. An id can only be used once on a page while a class can be used
more than once. You can only use an id or class name once in your CSS!!!

The HTML:

1. Div with an “id” applied to it:

<div id=”container”>

<p>Text inside the div</p>

</div>

2. Div with a “class” applied to it:

<div class=”block”>

<p>Text inside the div</p>

</div>

3. Divs inside of a div:

<div id=”container”>

<div class=”block”>

<p>Text inside the div</p>

</div>

<div class=”block2″>

<p>Text inside the div</p>

</div>

</div>

4. Div inside of a div, inside of a div:

<div id=”container”>

<div class=”block”>

<div class=”block2″>

<p>Text inside the div</p>

</div>

</div>

</div>

The CSS:

/* id css starts with a “#” */

#container {
background: #ff000;
float: left;
width: 950px;
height: 600px;
}

/* class css starts with a “.” */

.block {
background: #000000;
float: left;
width: 400px;
height: 400px;
}

.block2 {
background: #999999;
float: right;
width: 200px;
height: 200px;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s