Try our new Crash Courses!

Buy one of our new Crash Courses, now hosted on Teachable.

Visit Teachable

div element – HTML

Demo

Summary

To group multiple elements together and style them, use the div element with a class or id attribute:

<div class="my-class">
  <h1>Group</h1>
  <p>The heading element and this paragraph will share similar styles.</p>
</div>

Details

As an example, let’s say you had the following rule in your stylesheet:

.my-class {
  background-color: green;
}

This rule would change the background color of both the heading and the paragraph elements in the code snippet above.

Exercises

First, recreate the HTML code from the Demo.
Then recreate the CSS code from the Demo.

References

div element on MDN

Lesson tags: Open Lesson