Class, ID and Tag selector in HTML

How to use Class, ID and tag selector in HTML web page?

Last updated:7/20/2021 12:49:46 AM

1 Answers

Ethan Karla
Ethan Karla

CSS Selectors

CSS selectors are used to 'find' (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

Simple selectors (select elements based on name, id, class)

Combinator selectors (select elements based on a specific relationship between them)

Pseudo-class selectors (select elements based on a certain state)

Pseudo-elements selectors (select and style a part of an element)

Attribute selectors (select elements based on an attribute or attribute value)

Let's take an example of id, class and tag selector :

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title>Selector</title>
    <style>
        h1{
            text-decoration:underline;
        }
        .text-center{
            text-align:center;
        }
        #para{
            color:white;
            background:black;
        }
    </style>
</head>
<body>
    <h1>Tag Selector</h1>
    <p id='para'>ID selector</p>
    <p class='text-center'>Class selector</p>
</body>
</html>

Hope this information will be helpful for you.

Happy Coding!

Answer