I am tweaking the CSS of a theme. I added H1 tags around the profile name. I want it to look the same as my skin H1 tags.

When I use Firebug, it shows the H1 tag as having

div#amsocial h1{font-size:200%;}

which it gets from the Module.css file in AS directory (the Skinning Doc recommends not to touch this). So, how do I change it so that my H1 tag does not inherit from this?

I tried copying the class into my theme Module.css and leaving it blank but due to the CSS rules this gets joined with the top level H1 tag from the AS Module.css which overrides my Skin.css H1 tag, so the only way I can see to do it is to copy all the classes from my Skin.css (like H1) into my theme Module.css to prevent it from inheriting it? This would lead to a lot of duplication and having classes in 2 places - I'm sure there must be an easier way?

Another way would be to take it out of the amsocial div but I could not find that div tag in the ProfileView template - I assume it is wrapped higher up.

Any advice appreciated (I hate CSS

Actually, the easiest way to make the change is to add it to portal.css. If you add it to skin.css you need to add !important. Something like this:
div#amsocial h1{font-size:32px !important;}

Hmm - I tend to use my skin.css for everything and I deleted Default.css and try not to use Portal.css (I really don't see the point in having Skin AND Portal.css).

So are you saying that if my H1 tags were in my Portal.css instead of Skin.css the div#amsocial h1 would not override it? I just want to use my normal H1 tag...

The portal css is just an easy way to add it without touching any files. You can easily add it to your skin.css, but do this:

div#amsocial h1 {font-size:1.6em !important;}
That's what firebug said your site was using for h1

Ok, I moved all my H tags (h1{font-size:1.6em;font-weight:bold;color:#3746A8;}) from my skin.css to my portal.css - the problem still exists. Basically from what I can see is that there is no way to use your existing DNN classes without working out which tags AS is overriding and adding !important tags to them.

I would prefer if AS had a mechanism so that it did not override the predefined tags (e.g. like H1) - perhaps if there was a wrapper div at ProfileView template level that I could remove - then the shipped AS H1 would not override it?

I will have to add the "!important" to my portal.css (or skin.css) of course but it seems like overkill.

Rodney,
We worked with about 8 customers prior to release on how to make the skinning process as easy possible while still being able to provide a decent look out of the box.
I'll make it easy for you so everyone understands how big of problem this could possibly be. Below is the list of all the html tags that we simply apply a percentage increase to the font size within the context of the profile or group view for the module.css.

- h1
- h2



Here is the actual css that is being used in the 3 lines of module.css:

div#amsocial h1{font-size:200%;} div#amsocial h2{font-weight:bold;font-size:120%;} div#amsocial h2 span{font-weight:normal;font-size:90%;}

Also, I just looked at your css. The reason your overrides are not being applied is because you aren't defining the class properly. Do this...
h1,#amsocial h1 { color:#3746A8; font-size:1.6em; font-style:bold; }

Ok, thanks for your time - I just thought there may be a way of using my existing H1 tags with zero modifications - I hate CSS