Scribd
Upload
69 views

Css Class & ID: - by Rupam Patel (MCA)

- The class attribute is used to define CSS styles that can be applied to multiple HTML elements, while the id attribute uniquely identifies a single element and is used to point to a specific style declaration. - Multiple elements can be assigned the same class, allowing them to all be styled equally, while an id can only be assigned to one element per page as it must be unique. - Bookmarks, or anchors, can be created using the id attribute, and then linked to using the href attribute to allow jumping to different points in a long web page.

Uploaded by

Liyanshu patel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
69 views

Css Class & ID: - by Rupam Patel (MCA)

- The class attribute is used to define CSS styles that can be applied to multiple HTML elements, while the id attribute uniquely identifies a single element and is used to point to a specific style declaration. - Multiple elements can be assigned the same class, allowing them to all be styled equally, while an id can only be assigned to one element per page as it must be unique. - Bookmarks, or anchors, can be created using the id attribute, and then linked to using the href attribute to allow jumping to different points in a long web page.

Uploaded by

Liyanshu patel
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Css Class & ID

-By Rupam Patel(MCA)


CSS HTML class
The HTML class attribute is used to specify a
class for an HTML element.
Using The class Attribute
The class attribute is often used to point to a class
Multiple HTML elements can share the same
name in a style sheet. It can also be used by a
class.
JavaScript to access and manipulate elements with
the specific class name.
<body>

CSS HTML class


<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>

In the following example we have three <div> <div class="city">


elements with a class attribute with the value of <h2>Paris</h2>
"city". All of the three <div> elements will be <p>Paris is the capital of France.</p>
styled equally according to the .city style </div>
definition in the head section:
<div class="city">
<!DOCTYPE html> <h2>Tokyo</h2>
<html> <p>Tokyo is the capital of Japan.</p>
<head> </div>
<style>
.city { </body>
background-color: tomato; </html>
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}</style>
</head>
CSS HTML class
<body>

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


Heading</h1>

In the following example we have two <span> <p>This is some <span


class="note">important</span> text.</p>
elements with a class attribute with the value of
"note". Both <span> elements will be styled equally
</body>
according to the .note style definition in the head
section:
</html>
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}</style>

</head>
Example
CSS HTML class Create a class named "city":

<!DOCTYPE html>
<html>
Tip: The class attribute can be used on any HTML
<head>
element.
<style>
Note: The class name is case sensitive! .city {
background-color: tomato;
color: white;
The Syntax For Class padding: 10px;
}
To create a class; write a period (.) character, </style>
followed by a class name. Then, define the CSS </head>
properties within curly braces {}: <body>
<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>
Multiple Classes Different Elements Can
Share Same Class
HTML elements can belong to more than one class.
Different HTML elements can point to the same
class name.
To define multiple classes, separate the class names
with a space, e.g. <div class="city main">. The
In the following example, both <h2> and <p> points
element will be styled according to all the classes
to the "city" class and will share the same style:
specified.
<h2 class="city">Paris</h2>
In the following example, the first <h2> element
belongs to both the city class and also to the main
<p class="city">Paris is the capital of
class, and will get the CSS styles from both of the France</p>
classes:

Example
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
HTML id Attribute Using The id Attribute
The id attribute specifies a unique id for an HTML
element. The value of the id attribute must be
The HTML id attribute is used to specify a unique unique within the HTML document.
id for an HTML element.
The id attribute is used to point to a specific style
You cannot have more than one element with the declaration in a style sheet. It is also used by
same id in an HTML document. JavaScript to access and manipulate the element
with the specific id.

The syntax for id is: write a hash character (#)


character, followed by an id name. Then, define the
CSS properties within curly braces {}.
<!DOCTYPE html>

HTML id Attribute <html>


<head>
<style>

In the following example we have an <h1> element #myHeader {


that points to the id name "myHeader". This <h1> background-color: lightblue;
element will be styled according to the #myHeader color: black;
style definition in the head section:
padding: 40px;
text-align: center;

Note: The id name is case sensitive! }


</style>
Note: The id name must contain at least one
</head>
character, and must not contain whitespaces
(spaces, tabs, etc.). <body>

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

</body>
</html>
/* Style all elements with the class name

Difference Between "city" */

Class and ID
.city {

background-color: tomato;

color: white;

A class name can be used by multiple HTML padding: 10px;


elements, while an id name must only be used by
}</style>
one HTML element within the page:
<!-- An element with a unique id -->
<style>
<h1 id="myHeader">My Cities</h1>
/* Style the element with the id "myHeader"
*/#myHeader { <!-- Multiple elements with same class -->

background-color: lightblue; <h2 class="city">London</h2>

color: black; <p>London is the capital of England.</p>

padding: 40px; <h2 class="city">Paris</h2>

text-align: center; <p>Paris is the capital of France.</p>


Example
HTML Bookmarks
with ID and Links
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:
HTML bookmarks are used to allow readers to jump
to specific parts of a webpage. <a href="#C4">Jump to Chapter 4</a>

Bookmarks can be useful if your page is very long. Or, add a link to the bookmark ("Jump to Chapter
4"), from another page:
To use a bookmark, you must first create it, and
then add a link to it. <a href="html_demo.html#C4">Jump to Chapter
4</a>
Then, when the link is clicked, the page will scroll to
the location with the bookmark.

You might also like