Quote
#container {
font-family: sans-serif;
width: 750px;
height: 902px;
margin: auto;
background-color: #D3D3D3;
}
#header {
width: 750px;
height: 50px;
}
#lsidebar {
width: 150px;
height: 850px;
border-width: 1px;
border-style: solid;
border-color: #4682B4;
background-color: #4682B4;
float: left;
}
#rsidebar {
width: 150px;
height: 850px;
border-width: 1px;
border-style: solid;
border-color: #4682B4;
background-color: #4682B4;
float: right;
}
#main {
width: 450px;
height: 800px;
margin-right: auto;
margin-left: auto;
padding: 0;
}
#footer {
width: 750px;
height: 60px;
background-color: #4682B4;
}
font-family: sans-serif;
width: 750px;
height: 902px;
margin: auto;
background-color: #D3D3D3;
}
#header {
width: 750px;
height: 50px;
}
#lsidebar {
width: 150px;
height: 850px;
border-width: 1px;
border-style: solid;
border-color: #4682B4;
background-color: #4682B4;
float: left;
}
#rsidebar {
width: 150px;
height: 850px;
border-width: 1px;
border-style: solid;
border-color: #4682B4;
background-color: #4682B4;
float: right;
}
#main {
width: 450px;
height: 800px;
margin-right: auto;
margin-left: auto;
padding: 0;
}
#footer {
width: 750px;
height: 60px;
background-color: #4682B4;
}
This is for a project that is due later today. The problem is, there is also a mandatory style sheet that looks like this.
Quote
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000;
margin: 0;
padding: 0;
text-align: center;
color: #096;
}
#container {
width: 760px;
background: #000;
margin: 0 auto;
border: 5px solid #aaa;
text-align: left;
}
#header {
background: #000;
padding: 0 10px 0 20px;
}
#header h1 {
margin: 0;
padding: 10px 0;
color: #0C0;
}
#lsidebar {
background: #000;
padding: 15px 10px 15px 20px;
}
#lsidebar h1, #lsidebar h2, #lsidebar h3 {
color:#0C0;
}
#rsidebar {
background: #000;
padding: 15px 20px 15px 10px;
}
#rsidebar h1, #rsidebar h2, #rsidebar h3 {
color:#0C0;
}
#main {
padding: 0 20px;
}
#footer {
padding: 0 10px 0 20px;
background:#000;
}
#footer p {
margin: 20px;
padding: 10px 30px;
}
#main h1, #main h2, #main h3 {
color: #0C0;
}
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #000;
margin: 0;
padding: 0;
text-align: center;
color: #096;
}
#container {
width: 760px;
background: #000;
margin: 0 auto;
border: 5px solid #aaa;
text-align: left;
}
#header {
background: #000;
padding: 0 10px 0 20px;
}
#header h1 {
margin: 0;
padding: 10px 0;
color: #0C0;
}
#lsidebar {
background: #000;
padding: 15px 10px 15px 20px;
}
#lsidebar h1, #lsidebar h2, #lsidebar h3 {
color:#0C0;
}
#rsidebar {
background: #000;
padding: 15px 20px 15px 10px;
}
#rsidebar h1, #rsidebar h2, #rsidebar h3 {
color:#0C0;
}
#main {
padding: 0 20px;
}
#footer {
padding: 0 10px 0 20px;
background:#000;
}
#footer p {
margin: 20px;
padding: 10px 30px;
}
#main h1, #main h2, #main h3 {
color: #0C0;
}
Now what can I do to override the CSS in the second sheet with my CSS (The first one).
I can't do the following: (not allowed)
-Change the mandatory.css style sheet.
-Change the name of the DIV ID's
-Put my stylesheet at the top of the pages with the mandatory style sheet below it (Mandatory style sheet has to be the first linked style sheet on each page.)
Any help would be great.
None.