Parent CSS Class

It does not seem that people on the CSS forums even know what a class is and I am not getting a reply for my question so I thought I should ask this question on a forum which I know and love!!

How do make a child class of a CSS class have its own separate. Please take note that I want to use specific tags for setting properties.

Thanks

I hope I understand your question correctly. Your class may be something like


.TheParentClass
  {
  color:#000000;
  font-weight:400;
  font-style:italic;
  }

Your child class should be declared like


.TheParentClass .TheChildClass
  {
  background-color:#fefecb;
  }

.TheParentClass .TheChildClass will take on all the attributes of the parent class but in addition will have the background colour as specified in the child class. The way I normally use this setup is for instance I may have a parent class which is a container and all the children will use the same font face. Therefore specify the font face in the parent. The children may each have their own font size so specify this in the child elements. Don’t try and override parent elements in child elements, it can be done but it gets complicated as id’s take priority etc. It is cleaner to work as I have outline IMHO.

I hope that answers

Thanks but how do I make formatting under specific tags doing this?

So you can use just your parent class on it’s own:

<div class='ParentClass'>
   This div will be formatted as per the parent class
</div>

Or you can also have your child class involved:

<div class='ParentClass'>
   This div will be formatted as per the parent class
       <div class='ChildClass'>
          This div will be formatted as per the parent and child class
      </div>
</div>

The above is very basic but gives you an idea. Lots more can be done.

Have you had a look at http://www.w3schools.com/css/css_intro.asp quite a good intro

[quote=48436:@Mike Charlesworth]So you can use just your parent class on it’s own:

<div class='ParentClass'>
   This div will be formatted as per the parent class
</div>

Or you can also have your child class involved:

<div class='ParentClass'>
   This div will be formatted as per the parent class
       <div class='ChildClass'>
          This div will be formatted as per the parent and child class
      </div>
</div>

The above is very basic but gives you an idea. Lots more can be done.

Have you had a look at http://www.w3schools.com/css/css_intro.asp quite a good intro[/quote]
Sorry. This is not what I am looking for, I don’t think it is anyway. I will show the code and you might get what I am trying to do:

.box
{
	background: url(..images/boxBottom.jpg) no-repeat left bottom;
	margin-bottom: 10px;
	padding: 0 0 15px;
	width: 250px;
}

.box H3
{
	color: #FFF;
	font-size: 12px;
	height: auto;
	line-height: 30px;
	margin: 0;
	padding: 0 15px;
	font-family: Verdana, Geneva, sans-serif;
	background-image: url(../images/bigBox.jpg);
}

.box P
{
	background: #FFFFFF repeat 0 0;
	border-color: #CCC;
	border-width: 0 1px;
	border-style: solid;
	color: #444444;
	font-size: 11px;
	line-height: 1.3em;
	margin: 0;
	padding: 15px 14px 0;
	width: 220px;
}
/*bonus drop cap class*/
.dropcap
{
	float: left;
	color: #93C;
	font-size: 78px;
	line-height: 62px;
	padding-right: 2px;
	padding-top: 3px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

Credit to DreamweaverTutorial for the code: http://www.youtube.com/watch?v=oxpBvJv7A5M

I am trying to make the CSS more flexible so that I can have a small version of the box and a large version but the problem is, for example, I cannot use ‘.box .small H3’, for a smaller version of the box.

THANKS

youtube-DOT-com/watch?v=oxpBvJv7A5M

Ahh I see, perhaps I can help. So the way you need to look at it is you have a box but in two sizes. Other than the size the boxes will be identical so.

Start with your box, and then think right, I can’t define the size of the box within the box because I have 2 sizes (classes) of box therefore, remove all the size buts from .box and have a small and large box:


.box
{
	background: url(..images/boxBottom.jpg) no-repeat left bottom;
	margin-bottom: 10px;
	padding: 0 0 15px;
}

.small
{
	width: 75px;
}

.large
{
	width: 300px;
}

Ok, so you now want a small box on your page and a large box and both have a Heading 3 (H3) within them that should be the same so…


<div class='box small'>
   <h3>I am a small box</h3>
</div>

<div class='box large'>
  <h3>I am a rather large box</h3>
</div>

So you see the H3 (and others you have listed) still apply to box but you have added a class to box to create your small and large boxes.

I hope I got it this time???

[quote=48957:@Mike Charlesworth]Ahh I see, perhaps I can help. So the way you need to look at it is you have a box but in two sizes. Other than the size the boxes will be identical so.

Start with your box, and then think right, I can’t define the size of the box within the box because I have 2 sizes (classes) of box therefore, remove all the size buts from .box and have a small and large box:


.box
{
	background: url(..images/boxBottom.jpg) no-repeat left bottom;
	margin-bottom: 10px;
	padding: 0 0 15px;
}

.small
{
	width: 75px;
}

.large
{
	width: 300px;
}

Ok, so you now want a small box on your page and a large box and both have a Heading 3 (H3) within them that should be the same so…


<div class='box small'>
   <h3>I am a small box</h3>
</div>

<div class='box large'>
  <h3>I am a rather large box</h3>
</div>

So you see the H3 (and others you have listed) still apply to box but you have added a class to box to create your small and large boxes.

I hope I got it this time???[/quote]
Thanks, I will try this.

[quote=48957:@Mike Charlesworth]Ahh I see, perhaps I can help. So the way you need to look at it is you have a box but in two sizes. Other than the size the boxes will be identical so.

Start with your box, and then think right, I can’t define the size of the box within the box because I have 2 sizes (classes) of box therefore, remove all the size buts from .box and have a small and large box:


.box
{
	background: url(..images/boxBottom.jpg) no-repeat left bottom;
	margin-bottom: 10px;
	padding: 0 0 15px;
}

.small
{
	width: 75px;
}

.large
{
	width: 300px;
}

Ok, so you now want a small box on your page and a large box and both have a Heading 3 (H3) within them that should be the same so…


<div class='box small'>
   <h3>I am a small box</h3>
</div>

<div class='box large'>
  <h3>I am a rather large box</h3>
</div>

So you see the H3 (and others you have listed) still apply to box but you have added a class to box to create your small and large boxes.

I hope I got it this time???[/quote]
Sorry but aren’t you restating what you said earlier. I think you get what I am trying to do but you are telling me what I already know. I need to change the size for:

.box P
{
	background: #FFFFFF repeat 0 0;
	border-color: #CCC;
	/*border-width: 0 1px;*/
	border-style: solid;
	color: #444444;
	font-size: 11px;
	line-height: 1.3em;
	margin: 0;
	padding: 15px 14px 0;
	width: 220px;
}

P .small
{
border-width: 0 1px;
}

P .large
{
border-width: 0 2px;
}

You should hopefully get the idea. I am stuck on resizing, specifically the paragraph.

Thanks

Can you paste your HTML in so I can get an idea of your structure

In your above code .box P applies to any paragraph in a .box and P .small and P .large will style any paragraph whose class is small or large. I don’t really know what you are trying to do without the HTML.

Do you want paragraphs inside your box to be of different widths?

[quote=49030:@Mike Charlesworth]In your above code .box P applies to any paragraph in a .box and P .small and P .large will style any paragraph whose class is small or large. I don’t really know what you are trying to do without the HTML.

Do you want paragraphs inside your box to be of different widths?[/quote]
Yes that is extactly what I want. My code:

<div class="box small">
<p>Small text here if 'box small' above was replaced with 'box large', this and the main part of the box should be large</p>
</div>

Thanks

Top or bottom one?

[quote=49037:@Mike Charlesworth]Top or bottom one?

[/quote]
Bottom, thanks. :wink: