The HTML div element is another element that adds no content meaning. Its purpose is to contain any elements and their content for common styling.

The div element is classified as an block element. It can contain other block elements such as h1 … h6, ol and p.

The div element can also nest other div elements. This is often how to structure the major visual sections for web page layout.

The HTML5 specfication introduced elements like the div element except they imply a structure meaning and have some nesting rules for children and parents. the header, nav, section, article, aside and footer elements are examples. For now you can set them aside until later in your CSS study.

Basic example

In the next example the div element contains the h1 , h2 and two p elements. The div element does not change the meaning of the content and is superfluous without a style applied.

Older web browers may apply styling to the div element such as margins and with different values. We will address protecting from web browser CSS property defaults later in the course.

<div>
	<h1>Page Heading</h1>
	<h2>Page subheading</h2>
	<p>Qui enim existimabit posse se miserum esse beatus non erit. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet.</p>
	<p>Negat enim summo bono afferre incrementum diem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Best practice is to indent all elements contained by a div element. This helps you see the structure.

Example applying a style using div selector

This example colors all text inside of div element blue and draws a border around all the elements it contains.

<div>
	<h1>Page Heading</h1>
	<h2>Page subheading</h2>
	<p>Qui enim existimabit posse se miserum esse beatus non erit. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet.</p>
	<p>Negat enim summo bono afferre incrementum diem. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

div{
	border:3px black solid;
	color:blue;
}

When you apply a style using the div named selector you usually set some common properties you think will be the same for all div elements. Then you might select div elements as groups or even individually via CSS selection to style.

Example applying a style to div elements using class selector

Applying syles to div elements can be done in groups such as using a class selector and the class attribute.

In this example the blog-list-item class selector was designed for multiple div elements.

<div class="blog-list-item">
	<h3>Blog Article Title</h3>
	<p><img src="placeimg-200-113-tech-01.jpg" alt="blog image description"></p>
	<p>Quod, inquit, quamquam voluptatibus quibusdam est saepe iucundius, tamen expetitur propter voluptatem. Negat enim summo bono afferre incrementum diem.</p>
	<p>Is es profecto tu. At ille pellit, qui permulcet sensum voluptate.</p>
</div>
<div class="blog-list-item">
	<h3>Blog Article Title</h3>
	<p><img src="placeimg-200-113-tech-02.jpg" alt="blog image description"></p>
	<p>Qui enim existimabit posse se miserum esse beatus non erit.</p>
	<p>Vulgo enim dicitur: Iucundi acti labores, nec male Euripidesconcludam, si potero, Latine; Verum hoc idem saepe faciamus. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet.</p>
</div>

.blog-list-item{
	background-color:tomato ;
	border:3px black solid;
	color:yellow;
	margin-bottom:3px;
	padding:5px;
}

In this case each each div element repeats the background color, border, inner padding and a bottom margin.

A glimpse at inhertance

The h3 and p elements are children of the div element. The parent and children in this case all share every CSS property used in the example. The children inherit the values of some properties and not others from the div element.

The text color and the background color values are inherited by the child h1 and p elements. The child h3 and p elements do not inherit values for border, bottom margin and padding. These are properties that are not inherited however they still could be set by the children elements if needed.

Example looking a div element nesting

The div element can easily be nested inside of another div element. In this next example we take the two blog item div elements and place them inside a container div element. Also nested inside is a h2 element for the title of the list. The end results shows a background color that fills all the spacing around and in between the list item div elements.

	<div class="blog-list-container">
		<h2>The Blog</h2>
		<div class="blog-list-item">
			<h3>Blog Article Title</h3>
			<p><img src="placeimg-200-113-tech-01.jpg" alt="blog image description"></p>
			<p>Quod, inquit, quamquam voluptatibus quibusdam est saepe iucundius, tamen expetitur propter voluptatem. Negat enim summo bono afferre incrementum diem.</p>
			<p>Is es profecto tu. At ille pellit, qui permulcet sensum voluptate.</p>
		</div>
		<div class="blog-list-item">
			<h3>Blog Article Title</h3>
			<p><img src="placeimg-200-113-tech-02.jpg" alt="blog image description"></p>
			<p>Qui enim existimabit posse se miserum esse beatus non erit.</p>
			<p>Vulgo enim dicitur: Iucundi acti labores, nec male Euripidesconcludam, si potero, Latine; Verum hoc idem saepe faciamus. Tu autem negas fortem esse quemquam posse, qui dolorem malum putet.</p>
		</div>
	</div>

.blog-list-container{
	background-color:olive;
	color:orangered;
	padding:10px;
}
.blog-list-item{
	background-color:tomato;
	border:3px black solid;
	color:yellow;
	margin-bottom:3px;
	padding:5px;
}

This example can be found in the completed folder as blog-list-demo.html and blog-list-demo.css files along with images used.

Another glimpse at inhertance

You might want to take note that the background color and the text color of the blog-list-container div was overridden by the child blog-list-item div elements own text color and that their children elements were unaffected.

Also padding values of the blog-list-container div where not inherited by the child blog-list-item div elements as padding is not an inherited property.

What to expect

As you proceed through the course more use of the div element is made. For now there are short activities to try in the next lesson.