Hi All
I'm very new to this and just starting out so sorry if this is a stupid question but im having problems with the css code when i change the font weight or colour in the css file it doesnt change anything in the actual page. can you advise where im going wrong, it is part of the how-to-build-website.com tutorial below is what i have:
<DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>First CSS Tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="myCSS.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="centerDoc">
<h1>The Main Heading</h1>
<p>
Go to the Web Designer's Killer Handbook home page and grab the practice HTML page that we will used as the starting template for this tutorial. You can find it under the heading: 'To create the practice HTML page do the following:'.
Follow the instructions there and create your basic HTML page and do it now!
</p>
</div>
<div id="navigation">
<h2>The Main navigation</h2>
<ul>
<li><a href="cssTutorialPage1.php">Page One</a></li>
<li><a href="cssTutorialPage2.php">Page Two</a></li>
</ul>
</body>
</html>
and here is the css file that is linked to it:
/* Generic Selectors */
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #333333;
background-color: #F9F9F9;
}
p {
width: 80%;
}
li {
list-style-type: none;
line-height: 150%;
list-style-image: url(../images/arrowSmall.gif);
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: normal;
color: #000000;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: normal;
color: #000000;
border-bottom: 1px solid #C6EC8C;
}
/**************** Pseudo classes ****************/
a:link {
color: #00CC00;
text-decoration: underline;
font-weight: normal;
}
li a:link {
color: #00CC00;
text-decoration: none;
font-weight: normal;
}
a:visited {
color: #00CC00;
text-decoration: underline;
font-weight: normal;
}
li a:visited {
color: #00CC00;
text-decoration: none;
font-weight: normal;
}
a:hover {
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: normal;
text-decoration: underline;
}
li a:hover {
display: block;
color: rgb(0, 96, 255);
padding-bottom: 5px;
font-weight: normal;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #C6EC8C;
}
a:active {
color: rgb(255, 0, 102);
font-weight: normal;
}
/************************* ID's *************************/
#navigation {
position: absolute;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
border-right: 1px solid #C6EC8C;
font-weight: normal;
}
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 20px 20px; /*top right bottom left*/
margin-top: 50px;
margin-left: 235px;
}
Its prob something really basic thats im doing wrong of have taking down wrong but any help would be really welcome.
Thanks
Carl