Why you need to use CSS class in webdesign

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  . A single instruction is set to lots of element , when you decide to change or upgrade , you just need to change this simple instruction set . This is a clean and safe design behaviour .

Importance of 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

<br /> <style type="text/css"><br /> .myclass<br /> {<br /> background:#CEF6F5;<br /> font-size:.9em;<br /> border:2px solid #071918;<br /> width:80px;<br /> margin:3px 3px 3px 3px;<br /> padding:3px 3px 3px 3px;<br /> }<br /> </style><br /> <br /> <div id="ex1" class="myclass"><br /> element1<br /> element1<br /> element1<br /> but same class<br /> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEW8Ko7hsLhV9_U9iOt8Rgps341G-5HkcyNIHN5gFOuIfqBA-wABgcYlXjGKAp12RupsmSNugJRl-7uJwcqiGQ1PKlqsx2Y_gp4mcM44lRF0iIZmiRTmux4XIxVzW8vW-JMajS10u6LnQv/s1600/images%20(1).jpg" /><br /> </div><br /> <br /> <div id="ex2" class="myclass"><br /> element2<br /> element2<br /> element2<br /> but same class<br /> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZihGxVgv6E_ALR_fmUBfYIqbKgu0odZau58AK_r0oTwYPjr2FL_-y0ud2wUQ6iYIy1xNB4xuASRGDnGwQXpAzw7MDIDbZ00N_Dqn3IbSVL_p1TpsVSw5U2SJ1wQQVpFmK_Pu0lv9umxPl/s1600/images-1.jpg" /><br /> </div><br /> <br /> <div class="myclass"><br /> element3<br /> element3<br /> same class<br /> <img border="2" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWaU0kKCVv-0EGzJutCTUc2NEdCxmwPIM1lJsyrbyC9imVV8h0NkzPs2T6yRNzNl4U4i4VeOrEeVO9_i0Jt0UZtz1I5-GBYGlyUsG2SAc9IGFkpnmnH5ikM6JKw7N-QhakfNoFN34mKcU3/s1600/images%20(3).jpg" /><br /> </div><br /> <br /> <div class="myclass"><br /> element4<br /> element4<br /> same class<br /> </div><br />

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