HTML Id


HTML HTML Id Class With Css Example

Html Id Attribute

This attribute defines a unique identifier for an Html element. This is used to to apply specific CSS properties to Html element. In CSS select element with # Sign.

Example:-

<style>#myheading{ background-color:green; color:white; } </style> <h6 id="myheading">This is id Attribute element.</h6>

Id Attribute can apply to any Html element. Id attribute is case sensitive, and must contain one character. Note:-White spaces are not allowed in id value.

Output:-

This is id Attribute element.

Id Attribute as Navigation

Create a reference with id. Use Id Attribute Where you want to navigate.

Example:-

<body> <p><a href="#p3">Jump to Page 3</a></p> <h2>Page 1</h2> <p>This is First Page.</p> <h2>Page 2</h2> <p>This is Second Page.</p> <h2 id="p3">Page 3</h2> <p>This is Third Page.</p> <h2>Page 4</h2> <p>This is Fourth Page.</p> <h2>Page 5</h2> <p>This is Fifth Page.</p> </body>

Output:-

Jump to Page 3

Page 1

This is First Page.

Page 2

This is Second Page.

Page 3

This is Third Page.

Page 4

This is Fourth Page.

Page 5

This is Fifth Page.

Difference between Id and Class Attribute

The main difference is that Id Attribute is used to identify one element and Class Attribute is used to identify more than one element. # Sign is used for id and . is used for Class in CSS selector.

Example:-

<style>#myred{ background-color:red; color:white; } .mygreen{ background-color:green; color:white; }</style> <body><h2 id="myred">Page 1</h2> <p>This is First Page.</p> <h2 class="mygreen">Page 2</h2> <p>This is Second Page.</p> <h2 class="mygreen">Page 3</h2> <p>This is Third Page.</p> <h2 class="mygreen">Page 4</h2> <p>This is Fourth Page.</p> <h2 class="mygreen">Page 5</h2> <p>This is Fifth Page.</p> </body>

Output:-

Page 1

This is First Page.

Page 2

This is Second Page.

Page 3

This is Third Page.

Page 4

This is Fourth Page.

Page 5

This is Fifth Page.

HTML Class With Css Example Chapter Next »