# CSS Inheritance with Classes and ID's



## AhrenBa (Jul 21, 2005)

Hey Guys,

Just a little confused here.

I have an img class="wp-smiley" that is defined in the CSS by:

.wp-smiley {
border:medium none;
padding:0 5px 0 0;
}

However, it is not being used because the style:
#content p img {
border:medium none;
padding:0 5px 15px 0;
}

Is overriding it. I am a bit new to CSS. Why would that be overriding? I realize I could just make a CSS statement like:

#content p img.wp-smiley {
border:medium none;
padding:0 5px 5px 0;
}

But I am just trying to figure this out for knowledge sake. Using Firebug I see that it is referencing the style, but it is crossed out because that other style is overriding it?

I thought that if you define a single class like that, it'll override anything previou5


----------



## tomdkat (May 6, 2006)

I believe styles defined for elements by id override styles defined for elements by class. So, if you change the "content" DIV to have the class "content" instead of the id "content", your img styling might work as you want.

I've noticed people tend to define styles for elements by id _a lot_ and I'm not sure why.

So, try changing:

to

and change

#content p img {
border:medium none;
padding:0 5px 15px 0;
}

to

.content p img {
border:medium none;
padding:0 5px 15px 0;
}

and see what happens.

Peace...


----------



## amanxman (Mar 28, 2006)

Howdy,

Two things:

Try putting .wp-smiley AFTER the #content in your style sheet.

Aso,

#content p img.wp-smiley {
border:medium none;
padding:0 5px 5px 0;
}

is the best / safest way to do it anyway.

Although you don't need the medium in the border as you've defined border as none - just go for border: none

Also, I wouldn't look at amended #content to .content as this can cause problems further down the line when it comes to any nesting etc.

IDs (#content for example) are used for defining areas used ONCE on a page and areas which make up the main skeleton/wire frame of the site.
Classes (.content for example) are used for defining areas that REPEAT on a page.

A site will NOT validate if you repeat a ID tag on a page.

For example:

This is product one



This is product two



This is product threee






amx


----------



## tomdkat (May 6, 2006)

amanxman said:


> IDs (#content for example) are used for defining areas used ONCE on a page and areas which make up the main skeleton/wire frame of the site.
> Classes (.content for example) are used for defining areas that REPEAT on a page.


I wholeheartedly disagree. IDs and classes are for specifying styles of elements and nothing more. One can have an element of a certain class and override an individual style defined in the class by defining a style that relates to that specific element by referencing it by a specific ID.

It's true that each element that has an ID must have a unique ID but there's nothing inherently wrong with using classes to define styles for elements that occur only once and leaving ID-specific style definitions for the special cases when a particular element needs a particular style.

Peace...


----------

