How to Use the ID Selector in CSS

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. 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. 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. Add a hash mark, and then the name or ID after the element. An example: p#graphID1

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

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. 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. 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.