Home > Articles

Selectors in Action

  • Oct 24, 2005
  • Sample Chapter is provided courtesy of Sams
  • PrintPrint
  • Share ThisShare This
  • DiscussDiscuss

Sorry, this author hasn't written any articles.

Sorry, this author doesn't have anything for sale.

Sorry, this author hasn't posted any blogs.

Sams Teach Yourself CSS in 10 Minutes

This chapter is from the book
Sams Teach Yourself CSS in 10 Minutes

In this lesson, you will learn about the different types of selectors and how to use them.

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.

  • Share ThisShare This
  • Your Account

Discussions

Make a New Comment

You must log in in order to post a comment.

Informit Network