Using CSS classes and the class attribute

Using CSS classes and the class attribute Code Skills: CSS classes are a simple and effective way of using CSS to change your HTML elements.

Let’s have a go at coding some CSS classes and using them with the class attribute to change the design of a web page.

 

  • 1) Open up your text-editing program and create a new HTML file called CSSclasses.html. Copy and paste your code from below into your new file CSSclasses.html and notice what the three
    < div > tags look like:

 

<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
</head>
<body>
 <div>
    Hello<br/>
    World. How are you?
 </div>
 <br/>
 <div>
    Using CSS classes and the class attribute can be fun and easy.<br/>
    We are coming a long way to coding webpages.
 </div>
<br/>
<div>
    Im the third DIV<br/>
    Each DIV has its own class..
 </div>
</body>
</html>

Sample output of above code:

Hello
World. How are you?

 

Using CSS classes and the class attribute can be fun and easy.
We are coming a long way to coding webpages.

 

Im the third DIV
Each DIV has its own class..

 

  • 2) Now add a < style > tag inside your < head >. Your code will look like this:
<head>
 <title>Hello World!</title>
 <style>
 </style>
</head>
  • 3) Between your opening and closing < style > tags, create a CSS class called header. Set the backgroundcolor, padding, text-align and fontsize CSS properties. Add the width and height CSS properties too. Choose values for your properties. Your code will look like this:
<style>
 .header {
     background-color: blue;
     padding: 25px;
     text-align: center;
     font-size: 18pt;
     width: 100%;
     height: 25%;
 }
</style>
  • 4) Apply your header CSS class to the first < div > in your < body > using the class attribute. Your code will look like this:
<div class="header">
    Hello<br/>
    World. How are you?
 </div>
  • 5) Create a second CSS class in your < style > tag and call it title. This new CSS class will come after your header CSS class. Set the font-size, text-align and color properties. Choose values for your properties. Your code will look like this:
.title {
    font-size: 14pt;
    text-align: center;
    color: green;
}
  • 6) Apply your title CSS class to your second < div >. Your code will look like this:
<div class="title">
    Using CSS classes and the class attribute can be fun and easy.<br/>
    We are coming a long way to coding webpages.
</div>
  • 7) Create a third CSS class in your < style > tag and call it body. This CSS class will come after your title CSS class. Set the margin CSS property and value. Your code will look like this:
.body {
    margin: 20px;
} 
  • 8) Apply your body CSS class to your third < div >. Your code will look like this:
<div class="body">
     Im the third DIV<br/>
    Each DIV has its own class..
</div>
  • 9) Save your HTML file and open it in your browser. You will see that each CSS class changes the design of a < div >. Your finished code should look like this:
<!DOCTYPE html>
<html>
<head>
    <title>Hello World!</title>
<style>
 .header {
     background-color: blue;
     padding: 25px;
     text-align: center;
     font-size: 18pt;
     width: 100%;
     height: 25%;
 }

.title {
    font-size: 19pt;
    text-align: center;
    color: green;
}

.body {
    margin: 50px;
} 

</style>
</head>
<body>
 <div class="header">
    Hello<br/>
    World. How are you?
 </div>
 <br/>
 <div class="title">
    Using CSS classes and the class attribute can be fun and easy.<br/>
    We are coming a long way to coding webpages.
 </div>
<br/>
<div class="body">
    Im the third DIV<br/>
    Each DIV has its own class..
 </div>
</body>
</html>

Sample output of above code:

Hello
World. How are you?

 

Using CSS classes and the class attribute can be fun and easy.
We are coming a long way to coding webpages.

 

Im the third DIV
Each DIV has its own class..

Connected through code, Choose Your Platform!

About the Author: Bernard Aybout

In the land of bytes and bits, a father of three sits, With a heart for tech and coding kits, in IT he never quits. At Magna's door, he took his stance, in Canada's wide expanse, At Karmax Heavy Stamping - Cosma's dance, he gave his career a chance. With a passion deep for teaching code, to the young minds he showed, The path where digital seeds are sowed, in critical thinking mode. But alas, not all was bright and fair, at Magna's lair, oh despair, Harassment, intimidation, a chilling air, made the workplace hard to bear. Management's maze and morale's dip, made our hero's spirit flip, In a demoralizing grip, his well-being began to slip. So he bid adieu to Magna's scene, from the division not so serene, Yet in tech, his interest keen, continues to inspire and convene.