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

TYPE OF HTML CSS

 Types of HTML CSS To change a HTML documents style Three Types to Add CSS in HTML 1.      Inline CSS: To using by <p style> change a style of HTML Attribute.      2.     Internal CSS: by using <style> tag in the below of <head> tag.           3.    External CSS : By using <link> element in link to external CSS file. INLINE CSS We use inline CSS in a line      Example : <p style=“color:green;”> Green Text </p> Here we use inline css… INTERNAL CSS In this section we use Internal CSS.      We use <style> element under the <head> section. Example:           <style>                 p {color:green ;}                      </style> EXTERNAL CSS External CSS create a new fil...
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