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..