Who's where?
Visitor [1] : News channels
Visitor [2] : Vendors
Visitor [53] : Blog|Tutorials
Visitor [1] : Premium membership
Visitor [3] : Catalog
Visitor [15] : Twitter backgrounds
Visitor [2] : Google image map wizard
Visitor [1] : Encode url wizard
Visitor [1] : Image gift
Visitor [1] : Avi's stumbles
Visitor [5] : Dotnetnuke templates
Visitor [2] : test
Twitter backgrounds gallery
background6
background10
background9
background8
background7
background4
background5
background3
background2
Support, Tutorials, Articles

What are Child classes in CSS.

   

We, dnn users know about child links, child tabs, child pages and so on.

In CSS there is something similar but also different which is called  "child classes".

At this short article will try to explain and give some examples for that idea which on the one hand can be quite

mixing but on the other hand very use full.

let  us start with an example that will make things clearer right on:

we'll start with the "paragraph". (p)

We first create a general class for "p":

p

{

padding:6px 12px; /* padding top and bottom 6px padding to both sides 12px  */

}

Now, we want that in box1 the text inside will be aligned to the right, in box2 to be justify,

and in box3 to the left.

so that would be the addition CSS for that:

#box1 p

{

text-align:right;

}

#box2 p

{

text-align:justify;

}

#box3 p

{

text-align:left;

}

That's it!

some text some text some text some text some text some text some text some textsome text some text some text
some text some text some text some text some text some text some text some textsome text some text some text
some text some text some text some text some text some text some text some textsome text some text some text

in other words boxes are the parent divs and "P" are child classes.

It can be much longer, using both divs and classes, like:

#contentpane #content_bottompane p {}

make sure you put "#" (or div) before ids and ". " before classes.

the idea of that concept goes far to a place where you can use one css for a few html files. you can see a live demo of it in the css of the containers of that website.(use firefox developer toolbar add on.)

Good luck!

 

posted @ Saturday, September 22, 2007 8:52 AM by Avi A