Setting Up the HTML Code

Selectors are one of the most important aspects of CSS because they are used to "select" elements on an HTML page so that they can be styled. The HTML code for this lesson is shown in Listing 3.1.

Listing 3.1. HTML Code Containing Markup for Lesson 3

<body>
<div id="content">
     <h1>
         Heading here
     </h1>
     <p class="intro">
         Lorem ipsum dolor sit amet.
     </p>
     <p>
         Lorem ipsum dolor <a href="#">sit</a> amet.
     </p>
</div>
<div id="nav">
     <ul>
         <li><a href="#" class="intro">item 1</a></li>
         <li><a href="#">item 2</a></li>
         <li><a href="#">item 3</a></li>
     </ul>
</div>
<div id="footer">
    Lorem ipsum dolor <a href="#">sit</a> amet.
</div>
</body>

What Is a <div>?

The <div> element is a generic container that can be used to add structure to an HTML document. Although it is a block level element, it does not add any other presentation to the content.

For this lesson, the <div> element has been used to contain logical divisions of content, such as navigation and footer information.

These divisions of content can then be styled to suit your needs using descendant selectors, which are covered later in this lesson.

Table of Contents

Setting Up the HTML Code

Setting Up the HTML Code

Listing 3.1. HTML Code Containing Markup for Lesson 3

What Is a <div>?

What Is a `<div>`?