HTML5 CLASS & ID ATTRIBUTES CHAPTER 14

 



14th TOUTORIAL ON HTML5 CLASSE & ID ATTRIBUTE


The HTML class attribute is used to define equal styles for elements with the same class name.

 

Using The class Attribute

All HTML elements with the same class attribute will get the same style.

Here we have three <div> elements that point to the same class name:

<!DOCTYPE html>

<html>

<head>

<style>

.cities {

  background-color: black;

  color: white;

  margin: 20px;

  padding: 20px;

}

</style>

</head>

<body>

 

<div class="cities">

<h2>London</h2>

<p>London is the capital of England.</p>

</div>

 

<div class="cities">

<h2>Paris</h2>

<p>Paris is the capital of France.</p>

</div>

 

<div class="cities">

<h2>Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

</div>

 

</body>

</html>

 

 

OUTPUT

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

 

Using The class Attribute on Inline Elements

The HTML class attribute can also be used on inline elements:

<!DOCTYPE html>

<html>

<head>

<style>

span.note {

  font-size: 120%;

  color: red;

}

</style>

</head>

<body>

<h1>My <span class="note">Important</span> Heading</h1>

<p>This is some <span class="note">important</span> text.</p>

</body>

</html>

OUTPUT

My Important Heading

This is some important text.

Tip: The class attribute can be used on any HTML element.

Note: The class name is case sensitive!


Select Elements With a Specific Class

In CSS, to select elements with a specific class, write a period (.) character, followed by the name of the class:

Example

Use CSS to style all elements with the class name "city":

<!DOCTYPE html>

<html>

<head>

<style>

.city {

  background-color: tomato;

  color: white;

  padding: 10px;

}

</style>

</head>

<body>

 

<h2>The class Attribute</h2>

<p>Use CSS to style elements with the class name "city":</p>

 

<h2 class="city">London</h2>

<p>London is the capital of England.</p>

 

<h2 class="city">Paris</h2>

<p>Paris is the capital of France.</p>

 

<h2 class="city">Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

 

</body>

</html>

OUTPUT

The class Attribute

Use CSS to style elements with the class name "city":

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

 

Multiple Classes

HTML elements can have more than one class name, each class name must be separated by a space.

Example

Style elements with the class name "city", also style elements with the class name "main":

<!DOCTYPE html>

<html>

<style>

.city {

  background-color: tomato;

  color: white;

  padding: 10px;

}

 

.main {

  text-align: center;

}

</style>

<body>

 

<h2>Multiple Classes</h2>

<p>All three headers have the class name "city". In addition, London also have the class name "main", which center-aligns the text.</p>

<h2 class="city main">London</h2>

<h2 class="city">Paris</h2>

<h2 class="city">Tokyo</h2>

</body>

</html>

OUTPUT

Multiple Classes

All three headers have the class name "city". In addition, London also have the class name "main", which center-aligns the text.

London

Paris

Tokyo

In the example above, the first <h2> element belongs to both the "city" class and the "main" class.

 

Different Tags Can Share Same Class

Different tags, like <h2> and <p>, can have the same class name and thereby share the same style:

<!DOCTYPE html>

<html>

<style>

.city {

  background-color: tomato;

  color: white;

  padding: 10px;

}

</style>

<body>

<h2>Same Class, Different Tag</h2>

<p>Even if the two elements do not have the same tag name, they can have the same class name, and get the same styling:</p>

<h2 class="city">Paris</h2>

<p class="city">Paris is the capital of France.</p>

</body>

</html>

OUTPUT

Same Class, Different Tag

Even if the two elements do not have the same tag name, they can have the same class name, and get the same styling:

Paris

Paris is the capital of France.


Using The class Attribute in JavaScript

The class name can also be used by JavaScript to perform certain tasks for elements with the specified class name.

JavaScript can access elements with a specified class name by using the getElementsByClassName() method:

Example

When a user clicks on a button, hide all elements with the class name "city":

<!DOCTYPE html>

<html>

<body>

<h2>Using The class Attribute in JavaScript</h2>

<p>Click the button, to hide all elements with the class name "city", with JavaScript:</p>

<button onclick="myFunction()">Hide elements</button>

<h2 class="city">London</h2>

<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>

<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

<script>

function myFunction() {

  var x = document.getElementsByClassName("city");

  for (var i = 0; i < x.length; i++) {

    x[i].style.display = "none";

  }

}

</script>

 

</body>

</html>


OUTPUT

Using The class Attribute in JavaScript

Click the button, to hide all elements with the class name "city", with JavaScript:

Hide elements

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Don't worry if you don't understand the code in the example above.

You will learn more about JavaScript in our HTML JavaScript chapter, or you can study our JavaScript Tutorial.

 

HTML The id Attribute

The HTML id attribute is used to specify a unique id for an HTML element (the value must be unique within the HTML document).

Using The id Attribute

The id attribute is used by CSS or JavaScript to perform certain tasks for the element with the specific id value.

In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element

Example

Use CSS to style an element with the id "myHeader":

<!DOCTYPE html>

<html>

<head>

<style>

#myHeader {

  background-color: lightblue;

  color: black;

  padding: 40px;

  text-align: center;

}

</style>

</head>

<body>

 

<h2>The id Attribute</h2>

<p>Use CSS to style an element with the id "myHeader":</p>

 

<h1 id="myHeader">My Header</h1>

 

</body>

</html>

OUTPUT

The id Attribute

Use CSS to style an element with the id "myHeader":

My Header

 

Tip: The id attribute can be used on any HTML element.

Note: The id value is case-sensitive.

Note: The id value must contain at least one character, and must not contain whitespace (spaces, tabs, etc.).


Difference Between Class and ID

An HTML element can only have one unique id that belongs to that single element, while a class name can be used by multiple elements:

<!DOCTYPE html>

<html>

<head>

<style>

/* Style the element with the id "myHeader" */

#myHeader {

  background-color: lightblue;

  color: black;

  padding: 40px;

  text-align: center;

}

/* Style all elements with the class name "city" */

.city {

  background-color: tomato;

  color: white;

  padding: 10px;

}

</style>

</head>

<body>

<h2>Difference Between Class and ID</h2>

<p>An HTML page can only have one unique id applied to one specific element, while a class name can be applied to multiple elements.</p>

<!-- A unique element -->

<h1 id="myHeader">My Cities</h1>

<!-- Multiple similar elements -->

<h2 class="city">London</h2>

<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>

<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>

<p>Tokyo is the capital of Japan.</p>

</body>

</html>

 

OUTPUT

Difference Between Class and ID

An HTML page can only have one unique id applied to one specific element, while a class name can be applied to multiple elements.

My Cities

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Bookmarks with ID and Links

HTML bookmarks are used to allow readers to jump to specific parts of a Web page.

Bookmarks can be useful if your webpage is very long.

To make a bookmark, you must first create the bookmark, and then add a link to it.

When the link is clicked, the page will scroll to the location with the bookmark.

Example

First, create a bookmark with the id attribute:

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page:

<a href="#C4">Jump to Chapter 4</a>

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

Example

<!DOCTYPE html>

<html>

<body>

<p><a href="#C4">Jump to Chapter 4</a></p>

<p><a href="#C10">Jump to Chapter 10</a></p>

<h2>Chapter 1</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>

<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>

<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 18</h2>

<p>This chapter explains ba bla bla</p>

 

<h2>Chapter 19</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2>

<p>This chapter explains ba bla bla</p>

</body>

</html>

OUTPUT

Jump to Chapter 4

Jump to Chapter 10

Chapter 1

This chapter explains ba bla bla

Chapter 2

This chapter explains ba bla bla

Chapter 3

This chapter explains ba bla bla

Chapter 4

This chapter explains ba bla bla

Chapter 5

This chapter explains ba bla bla

Chapter 6

This chapter explains ba bla bla

Chapter 7

This chapter explains ba bla bla

Chapter 8

This chapter explains ba bla bla

Chapter 9

This chapter explains ba bla bla

Chapter 10

This chapter explains ba bla bla

Chapter 11

This chapter explains ba bla bla

Chapter 12

This chapter explains ba bla bla

Chapter 13

This chapter explains ba bla bla

Chapter 14

This chapter explains ba bla bla

Chapter 15

This chapter explains ba bla bla

Chapter 16

This chapter explains ba bla bla

Chapter 17

This chapter explains ba bla bla

Chapter 18

This chapter explains ba bla bla

Chapter 19

This chapter explains ba bla bla

Chapter 20

This chapter explains ba bla bla

Chapter 21

This chapter explains ba bla bla

Chapter 22

This chapter explains ba bla bla

Chapter 23

This chapter explains ba bla bla

Using The id Attribute in JavaScript

JavaScript can access an element with a specified id by using the getElementById() method:

Example

Use the id attribute to manipulate text with JavaScript:

<!DOCTYPE html>

<html>

<body>

<h2>Using The id Attribute in JavaScript</h2>

<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>

<h1 id="myHeader">Hello World!</h1>

<button onclick="displayResult()">Change text</button>

<script>

function displayResult() {

  document.getElementById("myHeader").innerHTML = "Have a nice day!";

}

</script>

</body>

</html>

OUTPUT

Using The id Attribute in JavaScript

JavaScript can access an element with a specified id by using the getElementById() method:

Hello World!

Change text

 



Comments

Post a Comment

Popular posts from this blog

HTML5 COMMENTS & CSS CHAPTER 8

Image
EIGHTH TUTORIAL ON HTML COMMENTS & CSS HTML comments are not displayed in the browser, but they can help document your HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> With comments you can place notifications and reminders in your HTML: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> OUTPUT This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: <!DOCTYPE html> <html> <body> <!-- Do not display this at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> </body> HTML  Styles – CSS ...
Read more

HTML FORMS INPUT TYPES CHAPTER 25 PART THREE

Image
25 th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE HTML Input Types This chapter describes the different types for the HTML  <input>  element.   HTML Input Types Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text">...
Read more

HTML5 ELEMENTS CHAPTER 4

Image
FOURTH TUTORIAL IS HTML ELEMENTS HTML  Elements An HTML element usually consists of a  start  tag and an  end  tag, with the content inserted in between: < tagname > Content goes here... < /tagname > The HTML  element  is everything from the start tag to the end tag: < p > My first paragraph. < /p > Start tag         Element content         End tag <h1>                      My First Heading                  </h1> <p>                        My first paragraph.        ...
Read more