Linking CSS to a Web Page-Trouble

Hi!
New to the site and HTML. I have been following the SitePoint online tutorial: Learn HTML and CSS. Everything has worked beautifully until I got to linking
the CSS stylsheet to the HTML file. I have looked it over several times and can’t find any type errors. The changes do not show up in the browser.
I am working with Mac osX, text edit and firefox.
Hope someone can help a complete novice that feels very stupid right now:blush:

Thanks
Cynthia

<!DOCTYPE html Puplic "-//W3C//DTD XHTML 1.0 Strict // EN"
	"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http:??www.w3.org/1999/xhtml">
  <head>
	<title>Bubble Under-The diving club for the south-west UK </title>
	<meta http-equiv="Content-Type"
		content="text/html; charset=utf-8/>
  <link href="style.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
	<div id="header">
	    <div id="sitebranding">
	        <h1> BubbleUnder.com</h1> 
	</div>
	<div id="tagline">
	        <p>Diving club for the south-west UK-let's make a slash!</p>
	</div>		
	</div> <!--end of header div -->
	<div id="navigation">
   	      <ul>
     		<li><a href="index.html.">Home</a></li>
     		<li><a href="about.html.">About Us</a></li>
     		<li><a href="Contact.html.">Contact Us</a></li>
   	      <ul>
</div> <!--end of navigation div -->
	<div id="bodycontent">
		<h2> Welcome to our super-dooper Scuba site</h2>
		<p>Glad you could drop in and share some air with us! You've passed your underwater navigation skills and successfully found your way to the start point - or in the case, out home page.</p>
	</div> <!--end of bodycontent div-->	
</body>
</html>

The CSS file:

/*CSS for Bubble Under Site*/

p {
    font-weight: bold; color: blue;
}

You should have 4 files now all in the SAME folder as each other:

index.html
about.html
contact.html
style.css

The first three (x)html files should end *.html and the CSS file *.css make sure there is nothing attached after the *.css extension including any invisible/hidden extensions. I actually suspect all the filenames are supposed to be written in lowercase for the book.

If you’ve used that corrected example I posted it will apply the CSS styles to the paragraphs assuming the files are where they are supposed to be and name correctly and that was the entire CSS file. For example: style.css

/* CSS for Bubble Under Site */
p {
font-weight : bold;
color : blue;
}

You’ve probably made a typo somewhere with the CSS filename or extension as that’s really the only explanation if the files are in the correct format/place.

You have several errors I am beginning to get familiar with these pages from Ian’s book (even though I don’t own a copy) after the amount of people whom are having issues.

The main couple of problems are not closing the UL in the navigation section Line: 24 and getting the Doctype and <meta /> completely mangled therefore I’ve just corrected the code sample and posted it here:

<!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">
  <head>
    <title>
      Bubble Under-The diving club for the south-west UK
    </title>
    <meta http-equiv="Content-Type" content=
    "text/html; charset=UTF-8" />
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="header">
      <div id="sitebranding">
        <h1>
          BubbleUnder.com
        </h1>
      </div>
      <div id="tagline">
        <p>
          Diving club for the south-west UK-let's make a slash!
        </p>
      </div>
    </div><!--end of header div -->
    <div id="navigation">
      <ul>
        <li>
          <a href="index.html">Home</a>
        </li>
        <li>
          <a href="about.html">About Us</a>
        </li>
        <li>
          <a href="Contact.html">Contact Us</a>
        </li>
      </ul>
    </div><!--end of navigation div -->
    <div id="bodycontent">
      <h2>
        Welcome to our super-dooper Scuba site
      </h2>
      <p>
        Glad you could drop in and share some air with us! You've
        passed your underwater navigation skills and successfully
        found your way to the start point - or in the case, out
        home page.
      </p>
    </div><!--end of bodycontent div-->
  </body>
</html>

What changes are supposed to be happening to your code; is the font supposed to be in bold blue? Well, it actually is if you use that CSS file correctly and place it in the same directory.

Have you saved your CSS filename as the following: ‘style.css’ and placed it within the same directory. Remember it’s supposed to have the *.css extension not *.txt extension.

I have only just noticed you have also spelt the extension wrong for the *.html files too so have modified the code for that too.

I just started the CSS chapter in this book. I ran into a similar problem with the menu links, when I clicked on them in the browser it wouldn’t work. What I realised is that at some point I had right clicked on my files and renamed them as index.html, about.html and contact.html.

So, I went back and renamed them this time removing the .html. I think what had happened is that I had save them as html, but renaming them just named them to “about.html”.

Maybe something similar has happened to you’re .css file?

just a few other things to note:

avoid upper-case letters and spaces, replace spaces with -

also could you upload the files somewhere so that we can see a live version? if not, can you zip them and attach here.

Thanks so much for the help and tips. Made the changes and downloading firebug. I suspect the problem is in the way I am saving the css file. For now, I have created a folder on my desktop and placed all of the files in that folder. I am saving them as “.html” and “.css” no txt ext.

So, I have four files in one folder:

Index.html
about.html
contact us.html
style.css (moved this to a subfolder as suggested)

I have tried all of the suggestions above and still no change in the font.
Yes, the paragraph should be blue text with bold type.
Frustrated and short on time today. Will try to get back to it tonight.
Once again, thanks for the help.

First off, welcome to Sitepoint!

Second, could you enclose your html&css with their respective tags in the future, makes reading them so much easier (it’s called syntax highlighting and you can find it in the editors toolbar).

Also, do you have the Firefox add-ins Firebug, Web Developer Toolbar, and HTML validator installed? each one of them helps you detecting problems & errors in your code.

A few possible things, your code tells the browser to look for style.css in the same folder as the html document, are you sure that is the case? I’d personally prefer to put it in a subfolder, e.g. css or design and then link to it using href=“/style.css”

You might need to force a reload/refresh of the html document and css file, not sure how it works on Mac but on Windows it’s Ctrl+F5 instead of a simple F5/reload.

You might want to add the media attribute to the link tag.