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?
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.
We are coming a long way to coding webpages.
Im the third DIV
Each DIV has its own class..
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?
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.
We are coming a long way to coding webpages.
Im the third DIV
Each DIV has its own class..
Each DIV has its own class..