Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have content that appears within a corporate website inside an iframe. Several departments contribute their own CSS files to manage the overall UI and design.

My problem is that they may use selectors for elements like td (for instance), without notice. Of course that will affect my own content in the frame unless I add a class to every td. I'm just using td as an example: the generic style for any element could change without notice.

Is there any method/convention/practice I can use to protect my own styling?

share|improve this question

2 Answers 2

up vote 2 down vote accepted

Include reset.css after loading all your CSS files:

html {
    color: #000;
    background: #FFF;
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

fieldset,img {
    border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var,optgroup {
    font-style: inherit;
    font-weight: inherit;
}

del,ins {
    text-decoration: none;
}

li {
    list-style: none;
}

caption,th {
    text-align: left;
}

h1,h2,h3,h4,h5,h6 {
    font-size: 100%;
    font-weight: normal;
}

q:before,q:after {
    content: '';
}

abbr,acronym {
    border: 0;
    font-variant: normal;
}

sup {
    vertical-align: baseline;
}

sub {
    vertical-align: baseline;
}

legend {
    color: #000;
}

input,button,textarea,select,optgroup,option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

input,button,textarea,select {
    *font-size: 100%;
}

This will reset all main selectors to their defaults, removing any obtrusive styling.

share|improve this answer
    
the site-wide styles are loaded first, which i cannot control--should I add reset.css between their styles and mine? Or put it after all the styles? Not sure if it matters, but this content lives within a frame. –  Tim Oct 25 '12 at 18:54
    
If the site-wide styles are interfering with yours, you should add reset.css in between their styles and yours. This way it sets it up appropriately for your styles to override. –  Daniel Li Oct 25 '12 at 20:03

Create a 'namespace' for each department by adding a class or id to the body tag of their pages, then ensure that each department's rules use that namespace.

For example;

body.personnel p {
    color:red;
}

body.logistics p {
    color:blue;
}

So long as they prepend their rules with the body.departmentClassName then you should be able to protect your CSS

share|improve this answer
    
Of course you could do it the other way and add a namespace to your 'default' styling. If you then create your master CSS using this namespace the rules will trump your department's rules on the grounds of specificity. –  foamcow Oct 26 '12 at 10:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.