How To

How to Use the ID Selector in CSS

Contributor
By eHow Contributing Writer
(1 Ratings)

There's lots of talk in CSS programming about IDs, classes, and pseudo-classes, etc. But what does it mean to use an ID? According to CSS tutorials and experts, the ID is an identifier for a specific HTML element that shows up once within a page. The ID is more restrictive than a class in its make-up, but adheres more to HTML convention and fits into an HTML framework in possibly a more straightforward way. Here's how to use an ID for CSS elements.

Difficulty: Easy
Instructions
  1. Step 1

    Set up your CSS code space. You can use a stand-alone text file as an external CSS page, or put CSS code in the head of an HTML document. Either way, you need to define a space beyond the HTML to do your CSS coding which will apply to one or more pages.

  2. Step 2

    Start your ID definition by naming an element within the CSS code space. Start with an HTML element, like p (for paragraph) or h1 (a heading).

  3. Step 3

    Add a hash mark, and then the name or ID after the element. An example: p#graphID1

  4. Step 4

    Include style directions with commands like this: p#graphID1 {text-color: black; }

  5. Step 5

    Access your ID. Within your HTML code, start your ID element with a tag that looks like this: p id="graphID1". This will open your HTML for that element.

  6. Step 6

    Enter the text or other content for the element you've opened. This content should be styled as your CSS commanded when you load the page.

  7. Step 7

    Close the element with the appropriate tag. You do not need to reference the ID again when closing the element: it's already been identified, defined and constructed. Just put in the regular element closing tag.

Post a Comment

Post a Comment
  • Have you done this? Click here to let us know.
I Did This

Related Ads

Internet
Virginia DeBolt,

Meet Virginia DeBolt eHow's Internet Expert.

Get Free Internet Newsletters

Copyright © 1999-2009 eHow, Inc. Use of this web site constitutes acceptance of the eHow Terms of Use and Privacy Policy.   en-US

Demand Media
eHow_eHow Technology and Electronics