Lesson 4: HTML Class Attribute

A Class is an attribute in HTML that is used to group elements that have the same properties and styles.

So when you want a block or more of elements in your webpage to have the same format and style, you can use the class attribute to make that happen.

You can also use the class attribute to style an inline-element as well.



How to use Classes in Html 

Elements can be styled using a class attribute, the class style and formats are then conferred on the elements by linking the class with the elements.
This is done by including the class in the opening tags of the elements you want to style.

Illustration:
I will be showing you how to use the class attribute to style elements using the sample code below Sample Code:

<html>
<body>
<div>
<h1>
Story</h1>
Here is a story of a small town girl
who later made it big
and show us all anyone can make it
albeit their gender or background
</div>
<div>
<h1>
My Food Diary</h1>
okay, I am going to confess.
I love food but for real who doesn't? 
You can deny it all you want
but I know well enough that
I am not the only one.
</div>
<div>
<h1>
Wealth</h1>
There is something about money that never
ceases to amaze me,
when you don't have it,
you try as hard as possible to get it.
But when you do have it,
you tend to give it away.
Paradox isn't it? </div>
</body>
</html>

The output of the code before styling with the class attribute:
html class attribute sample




Example 1: Styling all the three div “elements” using a class. Code:
 
<html>
<body>
<style>
.sample {
background-color: red;
color: white;
}
</style>
<div class="sample">
<h1>
Story</h1>
Here is a story of a small town girl
who later made it big 
and showed us all anyone can make it
albeit their gender or background
</div>
<div class="sample">
<h1>
My Food Diary</h1>
okay, I am going to confess.
I love food but for real who doesn't?
You can deny it all you want but
I know well enough 
that I am not the only one.
</div>
<div class="sample">
<h1>
Wealth</h1>
There is something about money that never
ceases to amaze me,
when you don't have it,
you try as hard as possible to get it.
But when you do have it,
you tend to give it away.
Paradox isn't it? 


</div>
</body>
</html>

Product of the code:
html attribute sample



Code explained: - tags are used for styling HTML. This tag is a CSS tag. More about it would be discussed when we get to CSS.

In the code, .sample is used as the name of the class. You can choose any name you want. The “.” before the name denote that what we are styling is a ”div” element.

So whenever you are styling a “div” element the name must have “.”

is used for adding the style to all the elements in the div class.


Example 2: Styling with different classes Code:

<html>
<body>
<style>
.sample1 {
background-color: red;
color: white;
}
.sample2 {
background-color: blue;
color: white;
}
.sample3 {
background-color: black;
color: white;
}
</style>
<div class="sample1">
<h1>
Story</h1>
Here is a story of a small town girl
who later made it big
and showed us all anyone can make it
albeit their gender or background
</div>
<div class="sample2">
<h1>
My Food Diary</h1>
okay, I am going to confess.
I love food but for real who doesn't?
You can deny it all you want but 
I know well enough that
I am not the only one.
</div>
<div class="sample3">
<h1>
Wealth</h1>
There is something about money that never
ceases to amaze me,
when you don't have it,
you try as hard as possible to get it.
But when you do have it,
you tend to give it away. 
Paradox isn't it? 
</div>
</body>
</html>

Product of the code:


html attribute sample



Example 3: styling inline element with different classes Code:
 

<html>
<body>
<style>
.sample1 {
color: red;
}
.sample2 {
color: blue;
}
</style>
<div>
<h1 class="sample1">
Wealth</h1>
<div class="sample2">
There is something about money that never
cease to amaze me, when you don't have it,
you try as hard as possible to get it.
But when you do have it,
you tend to give it away.
Paradox isn't it? </div>
</div>
</body>
</html>
Product of the code:


html attribute sample

No comments:

Post a Comment

Contact Form

Name

Email *

Message *

Follow by Email

Popular Posts