HTML Selector (type, class & id)

1. Type
2. Class
3. id

The id attribute provides you with the ability to give any element a unique identifier. This identifier can later be used to apply specific styles with CSS or capture input with some Javascript code.

<h1 id="twitterUser"> Kynsofficial </h1>

You can apply CSS to the above code by calling twitterUser with the # sign

#twitterUser{
color: red
}

• an id value should only be used for a single element (you will get unexpected behaviour if you use the same id value for multiple elements)
• an id value must not contain any whitespace.
• The class attribute is similar to the id attribute in that it is used to identify specific elements.

Class Selector

Class selector for Exp 

<h1 class="twitterUser"> Kynsofficial </h1>

You can apply CSS to the above code by calling twitterUser with the . sign

.twitterUser { 
color: red }

The main distinctions are:

• The same class value can be used across multiple elements, and an element can have multiple class values separated by whitespaces

Type Selector

Type selector for Exp 

You can apply the type selector here by calling the tag in your CSS with no prefix sign like the Class selector, which uses the . and Id selector, which uses #

<p> Kynsofficial <p>

Just type out the tag like so:

p { 
color: red; }

Let’s briefly assess your journey so far in the next lesson.