Basic CSS not working

HTML & CSS
1

I have an index.html page with this between the <head> tags.

<link rel="stylesheet" href="stylesheet.css" type="text/css" />

On that same index.html page I have

<div id = "test"></div>

between the <body> tags.

Within the same folder that has index.html in it, I have a folder named Styles and within that folder I have a file named styles.css.

In the styles.css file I have:

#test {
  border: 3px solid #000000;
  border: solid #000000;
  border-width: 1px 1px 1px 1px;
  width:930px;
  height:auto;
  margin:0px 0px 0px 0px; 
  padding: 0px 35px 0px 35px;
  background:#696969;
  float: right;
}

Yet I see nothing on the index.html page that reflects any style attributes from the styles.css file. What am I missing?

2

Simple fix.
<link rel=“stylesheet” href=“stylesheet.css” type=“text/css” /> but you said your file name is styles.css. The two names need to be the same. :slight_smile:

3

Thanks for that. I changed everything to stylesheet, still nothing.

Here is the page code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<script type="text/javascript" src="js/swfobject.js"></script>
</head>
<body>
<div class="test1">
<div id="test"></div>
<script type="text/javascript">
  // <![CDATA[
 var so = new SWFObject("recorder.swf", "recorder", "620", "470", "9", "#CD3333");
so.write("recorder");
 // ]]>
</script>
</div>
</body>
</html>

And here is the css code inside of stylesheet/stylesheet.css


body {
color: #800000;
  background-color: #800000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: left;
  margin: 0px;
  padding: 0px;
  /*background-repeat: repeat;*/
}


#test {
  border: 3px solid #800000;
  border: solid #000000;
  border-width: 1px 1px 1px 1px;
  width:930px;
  height:930px;
  margin:0px 0px 0px 0px; 
  padding: 0px 35px 0px 35px;
  background-color:#696969;
  float: right;
}

.test1 {
  border: 3px solid #000080;
  border: solid #000000;
  border-width: 1px 1px 1px 1px;
  width:930px;
  height:930px;
  margin:0px 0px 0px 0px; 
  padding: 0px 35px 0px 35px;
  background-color:#000080;
  float: right;
}

The only thing I see on the page is what the javascript pertains to. I’d like to add html around the javascript section, but can’t seem to figure out how.
Can you help me? What am I missing regarding the css to html connection?

Thanks.

4

First of all, what is the stylesheet file named, “stylesheet.css” or “style.css”? Second, where is it located, in a “styles” folder?

If it is named “style.css” and its in a folder named “styles”, then this is the proper way to include it:

<link rel="stylesheet" href="styles/style.css" />
5