1

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?

2 Answers 2

2

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.

2
  • 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
    Commented Oct 25, 2012 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
    Commented Oct 25, 2012 at 20:03
1

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

1
  • 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
    Commented Oct 26, 2012 at 10:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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