HTML The class Attribute
Using The class Attribute
Theclass
attribute specifies
one or more class names for an HTML element.The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name.
In CSS, to select elements with a specific class, write a period (.) character, followed by the name of the class:\
Tip: The class attribute can be used on any HTML element.
Note: The class name is case sensitive!
HTML The id Attribute
Using The id Attribute
Theid
attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).The id value can be used by CSS and JavaScript to perform certain tasks for a unique element with the specified id value.
In CSS, to select an element with a specific id, write a hash (#) character, followed by the id of the element:
Example:
<style>
#paultutorial{
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;} </style>
<h1 id="paultutorial">My Header</h1>
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.).
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:
<style>
/* Style the element with the id "myHeader"
*/
#paultutorial{
background-color: lightblue;
color: black;
padding:
40px;
text-align: center;}
/* Style all
elements with the class name "city" */
.paul{
background-color: tomato;
color: white;
padding: 10px;} </style>
<!-- A unique element -->
<h1 id="paultutorial">Paul Tutorial</h1>
<!-- Multiple similar elements -->
<h2 class="paul">Bangladesh</h2>
<p>Dhaka is the capital of Bangladesh.</p>
<h2 class="paul">Dhaka </h2>
<p>Dhaka is the capital of Bangladesh.</p>
No comments:
Post a Comment