css Class Introduction

Written by:Md Sirajul Islam

7th February 2010

Under Category : css class complete tutorial

    Knowledge of css class is very important to design a website . You can specify a certain design or style to any number of elements . This is very much important  .

why you need to know css class

    Say,In your website there is 100 pages and in each page you have set a certain element such as text box or image . If you set styling individualy in each  page element , afterwards when you decide to change the style of this page element what will you do ? You have to go through in each page coding to change it . If the number of  pages is larger and so is the number of element,then the coding change task will be so much pain full .     But if you set a single css class and apply it to  any number of page elements in any number of webpage , when you decide to change or restyle , all you have to do go through a single css class.Then the effect will be applied to  all page elements related to the class .     I think an example will clear the fact-

Example to show the importance of css class

css class code , watch the results below

<style type="text/css"> .myclass { background:#CEF6F5; font-size:.9em; border:2px solid #071918; width:80px; margin:3px 3px 3px 3px; padding:3px 3px 3px 3px; } </style> <div id="ex1" class="myclass"> element1 element1 element1 but same class <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLkStOInMpIn4u6rV_WAGV-yKjbB9jIlW381xFDe2Cq8sQSav_31WNf5Az3hJzWKmxMRPsPGIYbyY7Y7U3IvGBQxYym0cRhq9A5tq6eYDkjfETRZb91lwkGIbC3qjtvNrPqMZ9wBBhxoP7/s1600/images%20(1).jpg" /> </div> <div id="ex2" class="myclass"> element2 element2 element2 but same class <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSV3ctTT9OUnlf2l2ROkBN3anBys784XGG9bl8V7BjJXhHwz9gkUuCY3giBE-F6RvS_GX47QynYq7fKOYeJOHuTfsmvwYH8uj1mXuNZp2Axb24wzGegeZq3cXbYmxl4Efh-asV3bsQi8No/s1600/images-1.jpg" /> </div> <div class="myclass"> element3 element3 same class <img border="2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioTXFH3Gxysmog6Fys9MV4Eyhjo7McIG7r9CbEEShL-dGpfVNauIpFTshn8sG7xCvZkt8VKBnYLgutUVZW46IYc3049B02G2oCDXW8yvf8l3bOb2H5yMX35uAqO3QEKUvRn2vn-3i0i-5L/s1600/images%20(3).jpg" /> </div> <div class="myclass"> element4 element4 same class </div>

Result or demonastration of the above html code

element1 element1 element1 but same class

element2 element2 element2 but same class

element3 element3 same class

element4 element4 same class

Download the source files

    Download two source file from this link

Documentation or Usage

To view the effect,open this introduction to css.html with word pad(select the file,right click,then select open with word pad) .  In  my class change the .9em to any number like .8em or .6em , see the effect.,or you can change the background colour to #F781BE  or any color you choose. or change the width valu from 80 px to any value like 60px