Super newb question: body color not working in external style sheet

Bri · 11-06-2012, 02:03 AM

I am so annoyed and confused right now. I've looked for why this isn't working but can't figure out a reason from searching the web/these foruns.

I'm taking an intro to html/css class and doing an assignment for it (I am looking into getting into the web design field after college, this isn't just homework help ;D)

I can not get the body colors to apply or the footer colors to apply. I don't know why. Please look at my code and let me know why it's not working. I'm sure I did something stupid. Also, if you see any other potential problems with my code let me know, looking for tips and tricks with anything!

I did run it through the WC3 validator and it says no errors

This is the CSS code.
"pacific.css"

Code:

<style>
body { background-color: #111111;
		color: #666666; }
h1 { background-color: #000033;
		color: #FFFFFF;}
h2 { color: #3399CC;}
#nav { background-color: #90C7E3; }
#footer { color: #666666; }
.companyname { color: #000033;}
</style>

This is the html web page code it applying to

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css"
     href="pacific.css" title="Default Styles" media="screen">

<title>Pacific Trails Resort</title>
</head>

<body>
	<div>
	<h1>Pacific Trails Resort</h1>
	</div>
	<div id="nav"; >
	<strong>
	<a href="index.html">Home</a>
	<a href="yurts.html">&nbsp;Yurts</a>
	<a href="activites.html">&nbsp;Activites</a>
	<a href="reservations.html">&nbsp;Reservations</a>
	</strong>
	</div>
	<br>
	<h2>Enjoy Nature and Luxury</h2>
	<p>Pacific Trails Resort offers a special lodging experience on the California North Coast. Relax in serenity with panoramic views of the Pacific Ocean.
	<ul>
		<li>Private yurts with decks overlooking the ocean</li>
		<li>Activities lodge with fireplace and gift shop</li>
		<li>Nightly fine dining in the Overlook Cafe</li>
		<li>Heated outdoor pool and whirlpool</li>
		<li>Guided hiking tours of the redwoods</li>
	</ul>
<div>
<br>
	Pacific Trails Resort<br>
	12010 Pacific Trails Resort<br>
	Zephyr, CA 95555<br>
	888-555-5555<br>
</div>
<div id=footer"; align="center";>
<br>
<p><small><i>
Copyright &copy; 2012 Pacific Trails Resort. All Rights Reserved.<br>
<a href="mailto:AbriannaPeto@AbriannaPeto.com">AbriannaPeto@AbriannaPeto.com</a>
</small></p></i>
</div>
	
</div>
</body>
</html>

DanInMa · 11-06-2012, 04:57 AM

I jus tran your code through the validator and got 19 errors...... anyhow. your .css file does not need <style> elements in it

and on the footer should be like this:

Code:

<div id="footer">

align="center" is deprecated in xhtml, use css to center things

id must be in qoutation marks ( or not at all will technically work too but thats a bad ide) , you were missing one

html elements generally only use semicolons in inline javascript and inline css style

Code:

< a href="/" onclick="javascript:dosomething();" style="text-align:center;">test</a>

hirelogo · 11-06-2012, 06:34 AM

Remove the ; from the div id's and classes(ie.<div id="nav"; >). I'm not sure why those are there nor do I think they are valid. I may be wrong and you may be working out a code I've never heard of, but if this is simple html and css remove them.

Bri · 11-06-2012, 05:00 PM

Quote:

Originally Posted by DanInMa

I jus tran your code through the validator and got 19 errors...... anyhow. your .css file does not need <style> elements in it

and on the footer should be like this:

Code:

<div id="footer">

align="center" is deprecated in xhtml, use css to center things

id must be in qoutation marks ( or not at all will technically work too but thats a bad ide) , you were missing one

html elements generally only use semicolons in inline javascript and inline css style

Code:

< a href="/" onclick="javascript:dosomething();" style="text-align:center;">test</a>

Aha the missing quotation mark in the footer has fixed it along with the other tips... not sure exactly what it was but now it's working. How did you run it through the validator? I input it directly (copy&paste) and it says no errors

Also I know that the align in html is outdated, my book says so, it just hasn't gone into the new way of doing it yet

thanks for the help!

Quote:

Originally Posted by hirelogo

Remove the ; from the div id's and classes(ie.<div id="nav"; >). I'm not sure why those are there nor do I think they are valid. I may be wrong and you may be working out a code I've never heard of, but if this is simple html and css remove them.

You don't use semi-colons in the actual website html or the external style sheet? My book says you need them in the style sheet (I think) and when I removed them and only them from the style sheet it stopped working properly. I removed them from the actual html and I think that helped fix the problem I was having.

DanInMa · 11-06-2012, 05:17 PM

semicolons are used in style sheets yes, but you were using them in your html.

I copy and pasted your code directly into the w3cvalidator. I can look at your code visibly and tell it's not compliant, jsut the semicolons alone would make the validator squawk, maybe you used an outdated site?

Custard7A · 11-06-2012, 05:34 PM

Quote:

Originally Posted by Bri

You don't use semi-colons in the actual website html or the external style sheet?

Semi-colons are used in CSS to separate properties, but aren't part of HTML.

HTML syntax:

Code:

<element attribute="value" attribute="value"> </element>

CSS syntax:

Code:

selector { property: value; property: value; }

Inline syntax:

Code:

<element style="property: value; property: value;" attribute="value"> </element>

Note: Those are fake names, for example purposes.
Note: You can always omit the last semi-colon in a CSS section.

felgall · 11-06-2012, 08:45 PM

You also don't need the javascript: label at the start of the JavaScript - onclick already identifies the content as being JavaScript and there is nothing in your script that attempts to reference the label.