Div Element
Div element of HTML, is a block element. It is used as a container.It can contain all the required elements of HTML.
Div element is mainly used to as main container and also to create sections in web page. We can create sections for different views or articles using div in a web page. It is used to organize the webpage in an effective way.
Div element is created using <div> tag. It is a paired tag. We can write more elements within div tags. We can create a paragraph, heading , horizontal line, text or whatever we want.
For example,
<div>
<h1>This is div element</div>
<p>hello world!</p>
</div>
We will see an example of div below.
class Attribute
We all know, what a class does?. When we want to perform some similar actions on some elements, we can unite them within a class. As in schools, when we want to give a lecture to students we group the students in a class.Similarly we can group the elements to give them certain and same modifications.
The HTML class attribute makes it possible to define equal styles for elements with the same class name.
Example: This example contains block level element, further we'll see example of class attribute with inline element.
Example: This example contains block level element, further we'll see example of class attribute with inline element.
we have two <div> elements with the same class name:
The HTML Code:
<html>
<head>
<title>
class example
</title>
<style>
div.colors {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="colors">
<h2>Red</h2>
<p>Rose is of red color</p>
</div>
<div class="colors">
<h2>Green</h2>
<p>Leaves of Rose are green.</p>
</div>
</body>
</html>
Result:
The HTML Code:
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Result:
The HTML Code:
<html>
<head>
<title>
class example
</title>
<style>
div.colors {
background-color: black;
color: white;
margin: 20px 0 20px 0;
padding: 20px;
}
</style>
</head>
<body>
<div class="colors">
<h2>Red</h2>
<p>Rose is of red color</p>
</div>
<div class="colors">
<h2>Green</h2>
<p>Leaves of Rose are green.</p>
</div>
</body>
</html>
Result:
class attribute with inline elements
The HTML class attribute can also be used with inline elements:The HTML Code:
<html>
<head>
<style>
span.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Result:
Happy Coding!
Comments
Post a Comment
If you have any doubt, ask here