Using IDs and Classes

2.4. Using IDs and Classes#

2.4.1. Element IDs#

Every HTML element can have an associated unique identifier. This is useful for when you wish to uniquely style a single element on your page.

Element IDs are assigned using the id attribute, which must be unique within the HTML document.

Here is an example:

<h1 id="special">My special heading</h1>

<p id="para1">This is a <span id="large-text">paragraph</span> of text.</p>

In the example there are three id’s assigned:

  • special to the first level heading <h1>

  • para1 to the paragraph <p>

  • large-text to the text in span <span>

Rules for IDs:

  • ids are case sensitive

  • ids must contain at least one character

  • ids cannot start with a number

  • ids must not contain whitespaces e.g. spaces and tabs

2.4.2. ID Selectors#

To select based on id, use a # followed by the id as the selector e.g.

#id {
   property1: value1;
   property2: value2
}

An example:

<html>
    <head>
       <style>
            #special {
               font-style: italic;
               color: orange;
            }

            #large-text {
               font-size: 25px;
            }

            p {
               text-align: center;
            }
       </style>
    <head>

    <body>

      <h1 id="special">My special heading</h1>

      <p id="para1">This is a <span id="large-text">paragraph</span> of text.</p>
      
      <h1>A normal heading</h1>
      
      <p> This is another <span>paragraph</span> of text.</p>

    </body>
</html>

2.4.3. Element Classes#

HTML elements can optionally belong to one or more classes. This is commonly used in combination with element selectors so that you can create differently styled versions of each element. For example, you may want two different heading styles.

Classes are assigned using the class attribute, which can be repeated throughout the HTML document and even applied to elements of different types.

Here’s an example:

<p class="main-para">This is a paragraph of text.</p>

<p class="quote-para">Talk is cheap. Show me the code.</p>

In the example there are two classes named, applied to different paragraphs:

  • main-para

  • quote-para

Rules for Classes:

  • class names are case sensitive

2.4.4. Class Selectors#

To select based on class, use a . followed by the class name as the selector e.g.

.class {
   property1: value1;
   property2: value2
}

Have a look at the example below.

<html>
    <head>
       <style>
            .coloured{
                color: red;
            }

            .quote {
                text-align: center;
                font-style: italic;
            }
       </style>
    <head>

    <body>
        <p class="coloured">
            The Lion King came out in 1994 and with it, some of 
            Disney's most famous songs including
        </p>

        <p class="quote coloured">"The Circle of Life"</p>
        
        <p>Arguably, Disney's more recent songs have become even more famous.</p>
        <p>One such example is</p>
        
        <p class="quote">"Let it Go"</p>
        
        <p>from Frozen and,</p>
        
        <p class="quote">"We don't talk about Bruno"</p>
        
        <p>from Encanto.</p>
    </body>
</html>

A few things to note:

  • Anything in the coloured class is red

  • Anything in the quote class is italicised and centered

  • The phrase “The Circle of Life” is in both the coloured and quote class so it is red, italicised and centered

To limit the class to specific element types place the element type before the . In the example below only <p> elements with class="quote-para" will be center-aligned.

<html></html>
    <head>
       <style>
            p.center{
                text-align:center;
            }
       </style>
    <head>

    <body>
        <h1 class="center">The heading is not centered...</h1>

        <p>even though it's in the center class.</p>
        <p class="center">This is because only paragraph elements in the centered class</p>
        <p>will be centerd.</p>
    </body>
</html>
Contents