CSS: ID Attribute

Now we know that CSS can style HTML elements in a general way, but what if one special element needs to be styled differently from the others? First, in the body section, add an id attribute to the special element :

<p id="name"> content </p>

Then, in the style section, define the different style for the identified element:

p#name { color: green }
HTML file: Displayed by browser:
<!DOCTYPE html>
  <html>
    <head>
      <style>
p#p01 {color: red;}
p#p02 {color: blue;}
      </style>
    </head>
    <body>
<p>This is a default paragraph.</p>
<p id="p01">This paragraph is red.</p>
<p id="p02">This paragraph is blue.</p>
    </body>
  </html>

This is a default paragraph.

This paragraph is red.

This paragraph is blue.
Good habit

Spaces next to, and inside, the curly brackets are not required. Semicolons are not required either, at the end of just one line of style, B U T it does not hurt to add it! Should another line of style be added, at some future time, then the semicolon is already there, on the first style. (Browsers ignore multiple lines of style, if there is no semicolon separating them). Using the semi-colon at the end of every style line is just a good habit to get into.

Back button Table of Contents Next button