CSS Classes and IDs

Posted by admin at April 18, 2020

Classes and IDs are “attribute selectors”. This means that you can attach style to HTML elements based on that element’s attributes. This empowers you to apply different style to items of the same HTML type.

Classes

Classes are an HTML attribute that specifies a name for a group of elements on the page. You can apply the class name to as many elements as you like, even if they are of different HTML tag types. You can use the class name with a period in front as the selector like so:

<p class="className">The intro paragraph</p>

Class names must be single words, but you can include digits and dashes as long as the name begins with a letter. Note that names are case sensitive. 

To apply a CSS rule to a class you use the class name preceeded by a period (“.”) like in the code below:

.className {
    color: blue;
}

Documentation

IDs

An ID is an HTML attribute that specifies a name or unique identifier for a particular HTML element. They are like classes with a very important distinction: the value of the ID attribute must be unique throughout the document. This lets you target a single HTML element for styling. You use the name with a hashtag in front as the selector like so:

<p id="MyFirstId"> This is an extra special paragraph </p>

ID names have the same rules as class names: start with a letter, can include numbers and dashes, no spaces. The way to create a selector for an ID is also similar to how you create a selector for a class, except you replace the period with a hash symbol (“#”) like in the code below:

#MyFirstId {
    color: blue;
}

Documentation

HTML code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Classes and IDs</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Title</h1>
        <p id="intro">
            Classes and IDs are "attribute selectors".
 This means that you can attach style to HTML elements based on that element's attributes.
 This empowers you to apply different style to items of the same HTML type.
        </p>
        <p class="odd">
            Classes are an HTML attribute that specifies a name for a group of elements on the page. You can apply the class name to as many elements as you like,
 even if they are of different HTML tag types.
 You can use the class name with a period in front as the selector like so:
        </p>
        <p class="even">
            
Class names must be single words, but you can include digits and dashes as long as the name begins with a letter.
 Note that names are case sensitive. 
To apply a CSS rule to a class you use the class name preceeded by a period (".") like in the code below:
        </p>
        <p class="odd">
            An ID is an HTML attribute that specifies a name or unique identifier for a particular HTML element.
 They are like classes with a very important distinction: the value of the ID attribute must be unique throughout the document.
 This lets you target a single HTML element for styling. 
You use the name with a hashtag in front as the selector like so:
        </p>
        <p class="even">
            ID names have the same rules as class names: start with a letter, can include numbers and dashes, no spaces.
 The way to create a selector for an ID is also similar to how you create a selector for a class, 
except you replace the period with a hash symbol ("#") like in the code below:
        </p>
    </body>
</html>

CSS code:

#intro {
    color: green;
}
.odd {
    color: blue;
}
.even {
    color: red;
}

Output:

3 2 output - CSS Classes and IDs

Comments

Write a Reply or Comment

Your email address will not be published. Required fields are marked *