//CSS: Applying styles using Ids

<New code>

HTML id="exampleId" - assigns an Id to an HTML element

CSS #exampleId {} - assigns styles to a particular Id

Sometimes you want to style elements individually

Right now, you know how to apply CSS styles by applying them to tags, like this:

<style>
    p {
        color:          Red;
        font-size:      24px;
        font-weight:    bold;
    }
</style>

This works well if you want all of the paragraphs, or images, or tables, or list items to have the same style.

But what if you want one of the list items to have a different style?

Assigning an id to an element

In that case, you give that element an identity. For example, let's say you want to make one list item red:

<body>
    <h2>Top Selling Mobile Phones of All Time</h2>
    <ol>
        <li>Nokia 1100</li>
        <li>Nokia 1110</li>
        <li id="redThingId">Nokia 1200</li>
        <li>Nokia 5230</li>
        <li>Nokia 3210</li>
    </ol>
</body>

Assigning a style to an id with #

Now if you add the following code to the <head> of your document:

<style>
    #redThingId {
        color: Red;
    }           
</style>

Note that the Id, redThingId has a hash tag in front of it. This is used in CSS to apply a style to a single Id instead of every tag with that name.

The list will now display as:

Top Selling Mobile Phones of All Time

  1. Nokia 1100
  2. Nokia 1110
  3. Nokia 1200
  4. Nokia 5230
  5. Nokia 3210

Potential troubles using Ids

Learn more