HTML Attributes - School4Tech

1) Class Attribute

The HTML class attribute is used to specify a class for an HTML element. it can be used many times in single file.

the file could be CSS or JS file. In below example .fruit will be applied to both div elements.

<!DOCTYPE html>
<html>
<head>
  <style>
    .fruit {
      background-color: green;
      color: grey;
      border: 3px solid black;
      margin: 25px;
      padding: 25px;
    }
  </style>
</head>
<body>
  <div class="fruit">
    <h2>Apple</h2>
  </div>
  <div class="fruit">
    <h2>Banana</h2>
  </div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

.fruit {

background-color: green;

color: grey;

border: 3px solid black;

margin: 25px;

padding: 25px;

}

</style>

</head>

<body>

<h2>Apple</h2>

</div>

<h2>Banana</h2>

</div>

</body>

</html>

2) id Attribute

The HTML id attribute is used to define a unique id for element in webpage. it will be always unique and case sensitive.

In CSS you can use the # symbol to target an element by its id. The “#myHeader” will be getting applied to <h1> with id “myHeader”.

Here’s an example of an HTML element with an id attribute:

<!DOCTYPE html>
<html>
<head>
  <style>
    #myHeader {
      background-color: green;
      color: grey;
      padding: 30px;
    }
  </style>
</head>
<body>
  <h1 id="myHeader"> Header H1</h1>
</body>
</html>