Style Multiple Elements With a CSS Class

How to Style Multiple Elements With a CSS Class:

In this section you will learn, How to style multiple elements with a class attribute. A class allow you to use the same CSS style on multiple HTML elements.
Note: Class is always start with Period(.)
To Use a CSS Class to Style an Element follow the below steps:

 Step1: Open your text editor or Notepad.
 Step2: Write the below code in your editor or notepad.
 Step3: Save your document in etc.html format.
 Step4: Open in Browser.
                                                     In below example we use same class in both Paragraph and both Heading element.
                         
For Example:

<html>
<head>
<title> your web page title name </title>
<style>
.headings{
 color: red;
}
.paragraph{
 color: blue;
}
</style>
</head>
<body>
<h1 class="headings"> your first heading </h1>
<h2 class="headings"your second heading </h2>
<p class="paragraph"> your first paragraph .</p>
<p class="paragraph"> your second paragraph .</p>
</body>
</html>


Output:
















Please Share To Other:

Post a Comment

0 Comments