Skip to main content

HTML Classes and ID's Attributes

 

The class Attribute

The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific name.

In the following example we have three <div> elements with a class attribute with the value of ".classes". All of the three <div> elements will be styled equally according to the .classes style definition in the head section:

You can manipulate your and design by the classes.

Example:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>

html classes and IDs

</title>


<style type="text/css">

.classes{

background-color: green;

color: ghostwhite;

border: 2px 4px 3px 2px;

margin: 20px;

padding: 20px;

font-family: arial,;

}

</style>

</head>

<body>

<div class="classes">

<h1> Delhi </h1>

<p>Delhi is Capital of INdia</p>

</div>


<div class="classes">

<h1> Punjab </h1>

<p>Punjab is Capital of Chandigarh </p>

</div>

<div class="classes">

<h1> Rajasthan </h1>

<p>Rajasthan is Capital of Jaipur</p>

</div>

</body>

</html>

Output:



What is ID Attributes 


Using The id Attribute

The id attribute provide a unique id for an HTML elements.

The id attribute is used to point to a specific style declaration in a CSS style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.

Using a id is: write a hash character (#), followed by an id name. Then, define the CSS properties within {}.

In the following example we have an <h1> element that points to the id name "myProject". This <h1> element will be styled according to the #myProject style definition in the head section:

Example:

<style type="text/css">

#classes{

background-color: grey;

color: ghostwhite;

border: 2px 4px 3px 2px;

border border-radius: 20px;

margin: 20px;

padding: 20px;

font-family: arial,;

}

</style>

</head>

<body>

<div id="classes">

<h1> Delhi </h1>

<p>Delhi is Capital of INdia</p>

</div>

<div id="classes">

<h1> Punjab </h1>

<p>Punjab is Capital of Chandigarh </p>

</div>

<div id="classes">

<h1> Rajasthan </h1>

<p>Rajasthan is Capital of Jaipur</p>

</div>

👉OUTPUT:


Labels:

Comments

Post a Comment

Popular posts from this blog

HTML Basic

 How to Write HTML Tags All HTML document must start with <!DOCTYPE HTML> HTML Document start with <html> and end with </html> (that's call a start tag and end tags. The visible part of the document between <body> and </body> tags. Type of Heading Tags:  HTML document contains a 6 types of heading  we are heading describe with  <h1> heading 1 </h1> tags <h2>  heading 2  </h2>   <h3>  heading 3  </h3>   <h4>  heading 4  </h4>   <h5>  heading 5  </h5>   <h6>  heading 6  </h6> Every heading have a different fonts size. Example: Do practice and Touch with our blog  
Post a Comment
Read more

Forms Tag in HTML

Forms tag in HTML 👉 The forms tag is used to create an HTML form for user input.. 👉 In this Blog i will show you how to create a form and its tags, attributes. 👉 Let's Start Firstly we  create a form start with <form> tag </form> <form action=" serverlink " method="POST" autocomplete="off"> <fieldset >  <legend> Registration form</legend> Note: Firstly we create a Label tag  <label for="fname" class="fname"> First Name </label> </br> 👉We use input type ="text" for  get a user information in text. like name address, and other info.           <input type="text" name="fname" id="fname"> </br> </br> <label for="lname"> Last Name </label></br> <input type="text" name="lname" id="lname"> </br> </br> 👉     When we want a user email id so we
Post a Comment
Read more

HTML BACKGROUND IMAGES

HTML Background Images In this Blog we learn that how to change background color in HTML and how to use background element in Backgrounds. 1.     In this blog we use Internal CSS to change a background. 2.     We given a code Below in this Blog and  You can see on youtube video link here:  Click Here <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Image Background</title> <style type="text/css"> body{background-image: url(D:\mybloglogo.png); background-repeat: no-repeat; background-attachment: fixed; background-size: auto;} </style> </head> <body> <h2>What is Lorem Ipsum? </h2>  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer
Post a Comment
Read more