: Protecting css selectors on large website 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

@Annie201

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

Vote Up Vote Down

@Karen161

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.

Vote Up Vote Down