Using Multiple Classes with CSS

CSS are a boon for designers. It has made websites more robust and more easy to manage and edit.

Today we will see one very good feature of css often overlooked, which is using multiple classes. Below is what we will be creating.

Demo Source Code

Goal

Our goal is to enhance the look of the content using multiple classes.

Step 1

Setting up the markup: The markup we will be using will look something like this, then we dress it up step by step.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Multiple Classes</title>
  6. <link type="text/css" rel="stylesheet" href="multicss.css" />
  7. </head>
  8. <body>
  9.  <div id="wrapper">
  10.    <div>
  11.   <p>This is a Headline</p>
  12.         <p>Page contents go here…</p>
  13.       </div>

Step 2

The CSS: The CSS has all the classes we will be using. To use multiple classes on any element you need to write class names separated by a space for e.g. class=”class1 class2 class3″ like this.

*{
  1.  margin:0;
  2.  padding:0;
  3. }
  4.  body{
  5.   margin-top:20px;
  6.   padding:0;
  7.   font-family:Arial, Helvetica, sans-serif;
  8.   font-size:100%;
  9.  }
  10.  #wrapper{
  11.   width:750px;
  12.   margin:0 auto;
  13.  }
  14.  p{
  15.   padding:10px 0;
  16.  }
  17.  
  18. /* FONTS */
  19. .arial{
  20.  font-family:Arial, Helvetica, sans-serif;
  21. }
  22. .ar-black{
  23.  font-family:"Arial Black", Gadget, sans-serif;
  24. }
  25. .georgia{
  26.  font-family:Georgia, "Times New Roman", Times, serif;
  27. }
  28. .impact{
  29.  font-family:Impact, "Arial Black";
  30. }
  31. .tahoma{
  32.  font-family:Tahoma, Geneva, sans-serif;
  33. }
  34. .times{
  35.  font-family:"Times New Roman", Times, serif;
  36. }……

Step 3

Applying classes: Now we will start to apply classes one by one  to enhance the content.

lets define our box first, the class ‘box’ gives the initial padding to the content.

  1. <div class="box">
  2. ………..content here</div>

Initial content without styling

Next is we to give it a border. The css we using has many styles already written in it so you can use any of them as per your need and mix and match styles to get new effects. For this example we will be using a plain solid border.

  1. <div class="box brd-solid">….</div>

boxborder

Next we define the width of the border. The current css has sizes upto 1px to 10 px, but you can always modify the css and add more border sizes. One thing to notice here is that classes are named according to the purpose they serve, for e.g. border width is given as “brd-10″ where brd signifies border and 10 signifies the pixel size. So this is the class for border size 10. This also helps in the long run to make better readable and understandable css.

  1. <div class="box brd-solid brd-4">….</div>

Now that we have our basic box setup, we can also make the box curved by adding a corner radius class.

  1. <div class="box brd-solid brd-4 brdrad-15">….</div>

boxcurved

Note: The conventions used for names are the same through out the css, so brdrad means “border radius” and 15 means radius of 15 px. The corner radius classes only work in firefox safari & chrome browsers, as other browsers like IE, Opera dont support the class just as yet.

So already page has started to look good. Lets add some color to it. Adding two more classes to the container to color the border and a background color.

  1. <div class="box brd-solid brd-4 brdrad-15 pyellow-bg orange-brd">
  2.     ….</div>

boxbgnbrd

Ok so now the container is done. Lets add in dress up the contents.

Lets start with the headline. Its simple plain text. Lets change its font face.

  1. <p class="georgia">This is a headline</p>

headfontchange

Lets change its size.

  1. <p class="georgia f40">This is a headline</p>

headfontbig

Now for the color.

  1. <p class="georgia f40 dred">This is a headline</p>

headfontcolor

Lets start styling the paragraph text now. Lets put a font.

  1. <p class="treb">Paragraph text here….</p>

pfontchange

Now to make it a slight big.

  1. <p class="treb f18">Paragraph text here….</p>

pfontbig

Lets make it a little different color. Lets make it dark grey.

  1. <p class="treb f18 dgrey">Paragraph text here….</p>

pfontgrey

Now lets place the image a little better. Firstly we will float it to the left. To do that we just need to add one class ‘left’.

  1. <img class="left" src="images/cool-chair.jpg" alt="Cool Chair" width="315" height="209" />

picfloat

Lets put a border around the picture.

  1. <img class="left brd-solid" src="images/cool-chair.jpg" alt="Cool Chair" width="315" height="209" />

picbrd

Lets make border a little wider.

  1. <img class="left brd-solid brd-5" src="images/cool-chair.jpg" alt="Cool Chair" width="315" height="209" />

picbigbrd

Lets make the border little lighter so that its not so dominating.

  1. <img class="left brd-solid brd-5 grey-brd" src="images/cool-chair.jpg" alt="Cool Chair" width="315" height="209" />

picgreybrd

Final Result

View Demo Source code

I have also stylized the second paragraph as the first one.  You can see the demo here. Download the source files from here.

Conclusion

Using Multiple classes reduces markup and gives you flexibility to use same class on many elements. So I hope the tutorial was helpful. We are open to your comments and suggestions it will help us deliver content which is up to date.

admin on November 26, 2009 | Filed Under HTML CSS

Leave a Comment

Better Tag Cloud