Question

I have a site which I have rather stupidly created in two halves. I am now in the process of merging them to be one complete finished site. The problem is that I have layers within the CSS. I will try and explain a example on which I hope I can help you fully understand.

Site 1 and Site 2 are each half of the finished site, Site 3. To put this into easier terms, Site 1 consists of having login/register/index/membersindexheader. Site 2 consists of having member pages such as membersindex and other restricted files. Now, the problem. I am trying to use the header file I created on site 1 on the pages on site 2. It works fine. The header displays fine but when I try and use normal elements such as <a> & <p> and so forth it uses the CSS for the header in the body.

I know this is how CSS works but I am hoping is there a way I can reset the stylings for my other <a> tags. I have tried putting !important after the new CSS values but with no luck. Is there any other way I can do this?

Could I use a CSS reset file then include it half way down the page? For example, the actual page would have the header in it and site1.css then using PHP I could include site2.php which has a cssreset.css in it when I want the body code?

EDIT: I have made this post a lot more user friendly, i am sorry for the previous state it was in. Please remove your badrep towards it.

Answer 1

What you’re describing is a common problem with CSS. You need to pseudo-namespace the CSS that you want to apply only to the header. If you have HTML like this:

<header>
    <h1>Site 2 header</h1>
    …
    <p>Here is an example <a href="http://example.com"> link</a>.</p>
</header>

Then you can apply global styles to the p element there, or you can specifically apply them to header p. Until and unless CSS implements grouping and nesting, this is the only way to make sure your styles only apply to descendants of header.