Newbie Question

Get Started
1

I am trying to learn CSS stylesheets.

I followed instructions in a book, and typed the html things exactly as they suggested. I then took their layout and did the stylesheet, saving it as styles.css. When I finished the stylesheet is not reflected on the main html page. Somehow it not referencing the stylesheet (hope I am explaining this correctly).

The following is what my hmtl looks like:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns=“http//www.w3.org/1999/xhtml”>

<head>
<meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”>
<title>Test from Book</title>
<link rel=“stylesheet” href=“styles.css” type=“test/css”/>
</head>
<body>
<div id=“container”>
<div id+“header”>
<center><img src=“images/BathHills.jpg” width=“1000” height=“700” alt=“header”/></center>
</div> <!–end #header–>
<div id=“sidebar”>
<ul>
<li><a href=“research.html”>Research</a></li>
<li><a href=“coinhunting.html”>Coinhunting</a></li>
<li><a href=“Clubs.html”>Clubs</a></li>
<li><a href=“Introduction.html”>Introduction</a></li>
<li><a href=“equipment.html”>Equipment</a></li>
</ul>
</div> <!–end #sidebar–>
<div id=“MainContent”>
<h2><p>My pupose in putting this site together is to share whatever information I can with other detectorists. I am often contacted by others
asking for help with choosing a detector, suggestions for places to search, and to come and talk to their respective clubs. Hopefully a lot of that can be
answered here. Remember please that I am a hobbyist, just like you, and often ask the same questions. I have no magic in my pouch, no psyhic powers when
it comes to locating treasure. My one crutch, and one that very often does the trick, is my 30 years of experience.</p></h2>
</div> <!–end #MainContent–>
<div id=“footer”>
<p>Copyright & Copy; 2010 Dick Stout. All Rights Reserved</p>
</div> <!–end #footer–>
</div> <!–end #container–>

</body>
</html>
…

The following is my stylesheet.

#container {
width: 80%;
background-color: #EBEBEB;
margin: 0 auto;
padding: 0:
text-align: left;
}

#header {
background-color: #91A43D;
text-align: center;
margin: 0;
padding: 0;
}

#sidebar {
float: left;
width: 12em;
}

#MainContent {
background-color: #FFFFFF;
margin-left: 12em;
padding: 10px 20px 0 1em;
}

#footer p {
margin: 0;
padding: 10px 0;
background-color: #DDDDDD;
text-align: center;
font-size: .8em;
}

What do I need to do to get the stylesheet to work?

2

This line should be:

<link rel=“stylesheet” href=“styles.css” type=“text/css”/>

Just a typo :slight_smile:

3

Also, you have a few typos here that might screw up the entire page:

<div id+"header">

Which should be:

<div id="header">

There are plenty of other errors here, e.g. using a paragraph inside a heading (p inside of h2 is not permitted).

Instead of using “<center>”, you can center your header image like this:


#header {
    background-color: #91A43D;
    text-align: center;
[B]     margin: 0 auto;[/B]
    padding: 0;
}

Which translates to:

<div id="header">
            <img src="images/BathHills.jpg" width="1000" height="700" alt="header"/>
        </div> <!--end #header-->

The HTML entity for the copyright sign is “&copy”;

<p>Copyright &copy; 2010 Dick Stout. All Rights Reserved</p>