I have been working from a template and modifying it substantially. I currently have all the CSS I've modified in the head section. I did this because the maker of the template specified that you couldn't modify their javascript or their CSS. Their CSS is all custom classes I think. I put my modifications in the head and it looks great. I thought I'd just create a 2nd style sheet rather than have all the CSS in the head. When I did this I lost all styles. I've never used 2 stylesheets before. Maybe I didn't include enough. It looks just how I want it to with CSS in the head. How can I get it to work correctly with a 2nd style sheet?
This is the stylesheet where I took the styles out of the head
Any ideas?
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html>
<head>
<title>Owen Peery Resume</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{padding: 20px;background-color: #B0BFC2; text-align: center;
font: 100% Verdana,Arial,sans-serif}
h1,h2,p{margin: 0;padding: 0 10px 0.4em}
h1{font-size: 250%;color: #FFF;letter-spacing: 1px}
h2{font-size: 150%;color: #FFF}
div#container{width:700px;margin: 0 left;text-align:left}
div#content{float:right;width:515px;background: #BBDB88;}
div#nav{float:left;width:180px;margin-top:30px;background: #FACD8A;}
#nav ul
{
margin: 5px;
padding: 0;
list-style-type: none;
text-align: right;
line-height: 250%;
}
a
{
text-decoration: none;
}
a:link
{
color: black;
}
a:visited
{
color: #555555;
}
a:hover
{
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="niftyCorners.css">
<link rel="stylesheet" type="text/css" href="niftyPrint.css" media="print">
<link rel="stylesheet" type="text/css" href="resume2/resumestyle.css">
<script type="text/javascript" src="nifty.js"></script>
<script type="text/javascript">
window.onload=function(){
if(!NiftyCheck())
return;
Rounded("div#content","all","#B0BFC2","#BBDB88","smooth");
Rounded("div#nav","tl bl","#B0BFC2","#FACD8A","smooth");
}
</script>
</head>
<body>
<div id="container">
<div id="nav">
<p>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="education.html">Education</a></li>
<li><a href="workexperience.html">Work Experience</a></li>
<li><a href="relatedexperience.html">Related Experience</a></li>
<li><a href="technologyskills.html">Technology Skills</a></li>
</ul>
</p>
</div>
<div id="content">
<h1>Owen Peery</h1><br>
<h2>Contact Information</h2>
<p>
336 E. Gowen Ave<br>
Philadelphia, PA 19119<br>
215.313.6097<br>
okpeery@earthlink.net<br>
</p><br><br>
<h2>Objective</h2>
<p>
To secure a technology teaching job beginning in the 2006 school year, in an
academically challenging k-12 environment, that also focuses on social
and emotional development.
</p>
</div>
</div>
</body>
</html>This is the stylesheet where I took the styles out of the head
Code:
body
{
padding: 20px;
background-color: #B0BFC2;
text-align: center;
font: 100% Verdana,Arial,sans-serif;
}
h1,h2,p
{
margin: 0;
padding: 0 10px 0.4em;
}
h1
{
font-size: 250%;
color: #FFF;
letter-spacing: 1px;
}
h2
{
font-size: 150%;
color: #FFF;
}
div#container
{
width:700px;
margin: 0 left;
text-align:left;
}
div#content
{
float:right;
width:515px;
background: #BBDB88;
}
div#nav
{
float:left;
width:180px;
margin-top:30px;
background: #FACD8A;
}
#nav ul
{
margin: 5px;
padding: 0;
list-style-type: none;
text-align: right;
line-height: 250%;
}
a
{
text-decoration: none;
}
a:link
{
color: black;
}
a:visited
{
color: #555555;
}
a:hover
{
color: orange;
}
</style>Any ideas?
