Skip to content
beginners
  • Home
  • Tutorial
  • Web Development
Introduction
Editor
Elements
Attributes
CSS
Heading Tag
Paragraph Tag
Anchor Tag
Text Formatting
HTML Blockquote
Image Tag
Table Tag
List Tag
HTML Form
Commaet Tag
Class And ID
Responsive

Class and ID

  • January 16, 2022August 6, 2022
  • by root

Class and ID

Class or ID are attributes of an element. We use class or id in the elements to style/design to make element attractive, we add class or id in the element when we need to functionalize that element, we can use same class in each element to get them same style but cannot use same ID in each element.

ID is unique for each single element.

Let’s see how to work with class or id in the elements. We have an element and we want to increase its font size. So we will create a class using a dot ( . ) and curly bars { } to write CSS properties inside it.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>


/* here you can see a dot ( . ) for class-name and curly bars {} with CSS property */

.demo {

  font-size: 30px;

}


</style>

</head>

<body>


<!-- demo is a class-name -->

    <p class="demo">

      It's my First Example

    </p>

</body>

</html>

Output:

We can write more CSS properties inside the class to design a paragraph.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>


/* here you can see a dot ( . ) for class-name and curly bars {} with CSS property */

.demo {

  font-size: 30px;
  color: red;
  background-color: yellow;

}


</style>

</head>

<body>


<!-- demo is a class-name -->



    <h1 class="demo">

      It's my first heading.

    </h1>




    <p class="demo">

      It's my first paragraph.

    </p>




   <span class="demo">

      It's my first span tag.

    </span>



</body>

</html>

Output:

Use of ID

ID of an element would be unique, it cannot be same even in two elements.

ID would be make with hash ( # ) and used curly bars to write CSS properties.

Example:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>


/* here you can see a hash ( # ) for ID and curly bars {} with CSS property */

#demo {

  font-size: 30px;

}


</style>

</head>

<body>


<!-- demo is a id -->

    <p id="demo">

      It's my First Example

    </p>

</body>

</html>

Hello
Theme by Colorlib Powered by WordPress
  • Disclaimer