Learning css

I’m following the absolute beginner’s guide of html and css. The HTML part was a success :), did what was told exactly in the CSS but did not turn out on my HTML pages as it is supposed to. Any help, suggestions will be much appreciated :rolleyes: Thanks.

Oh and incidentally it is external style css

Do you mean the SP Blog post written Ian Lloyd or something else. Without knowing exactly what you are referring to it’s a little hard to determine. Have you a page link to the tutorial? Or do you mean you have brought a Book and if so what is it’s correct title.

If it’s external CSS then the odds are your file name link in the markup or extension for CSS file are wrong. In which case we’d need to see a code sample of what you wrote.

yes that’s the blog post I’m referring to.
<head>

<title>Bubbling Leagues-the diving club in the Northwest.</title>

<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”/>
<title>First CSS Tutorial</title>

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

</head> this is in the index and other pages
/*
CSS for Bubbling League site
*/ <br>
p { <br>
font-weight: bold;
color: blue;
} this is in my external sheet named style1.css

All other code is as it should be just not copied and to note I named it slightly differently according to where I’m from.

No doctype in the code you posted.

I suspect you were referring to the following: Learn HTML and CSS: An Absolute Beginner’s Guide Article » SitePoint which page out of those 19 are you on at the moment?

You should NOT have markup within the CSS file called style1.css

The CSS might say the following?

[FONT=Courier New]

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

[/FONT]Though it certainly won’t have any BR in the CSS file so that’s at least one problem you have.

Furthermore you should only have one TITLE for the page not two.

But I need to know what page you are on first… Because you only have copy-and-pasted the HEAD part of the markup.

<!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>

<title>Bubbling Leagues-the diving club in the Northwest.</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

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

</head>


style1.css


/* CSS for Bubbling League site  */  
 p {             
         font-weight: bold;              
         color: blue;               
        } 

Try making the code as this, remember you have to put a </html> in the end.

Do you have the <body></body> ?

<!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 //EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<html>

<head>

<title>Bubbling Leagues-the diving club in the Northwest.</title>

<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”/>
<title>First CSS Tutorial</title>

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

</head>
<!–learning HTML and CSS by codes hopefully with the CSS attaching to HTML for I am not sure I have in my other site–>
<ul> <br>
<li><a href=“index.html”>Home</a></li> <br>
<li><a href=“about.html”>About Us</a></li> <br>
<li><a href=“contact.html”>Contact Us</a></li> <br>
</ul> <body>
<div id=“header”>
<div id=“sitebranding”>

<h1>BubblingLeagues.com</h1>
</div>
<div id=“tagline”>

<p>This is a club for divers that love to dive in the depths of water to explore its great wonders.</p></div>
</div> <!–end of header div–>
<div id=“body content”>

<h2>Welcome to Bubbling Leagues!</h2>
<p><img src=“divers-circle.jpg” alt=“a circle of divers practice their skills” width=“200” height=“162”/>

<p>Glad you could drop in and share some air with us! You’ve

         passed your underwater navigation skills &lt;br&gt;and successfully       

         found your way to the start point - 

or in this case, our

         home page.&lt;/p&gt; 

</div> <!–end of body content div–>
<br>

</body>

</html>

It is all there I just didn’t paste it in my previous thread.
Thank you

And also this is the index (home) page. All others have the proper code.

You still haven’t told me which page you are on yet?

You have all your code muddled up with erroneous BR all over. The BODY in the wrong place, too many titles… That I do know.

Therefore I cannot tell what it is supposed to actually look like but I suspect by just guessing:

<!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>
    <meta http-equiv="Content-Type" content=
    "text/html; charset=UTF-8" />
    <title>
      Bubbling Leagues-the diving club in the Northwest.
    </title>
    <link href="style1.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <!--learning HTML and CSS by codes hopefully with the CSS attaching to HTML for I am not sure I have in my other site-->
    <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 id="header">
      <div id="sitebranding">
        <h1>
          BubblingLeagues.com
        </h1>
      </div>
      <div id="tagline">
        <p>
          This is a club for divers that love to dive in the
          depths of water to explore its great wonders.
        </p>
      </div>
    </div><!--end of header div-->
    <div id="bodycontent">
      <h2>
        Welcome to Bubbling Leagues!
      </h2>
      <p>
        <img src="divers-circle.jpg" alt=
        "a circle of divers practice their skills" width="200"
        height="162" />
      </p>
      <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 this case, our
        home page.
      </p>
    </div><!--end of body content div-->
  </body>
</html>

The above code I sorted for errors (from what you posted above and nothing else) it might work?

I am working blind here… I am an very slow connection so do not really have the time to wade through 19 pages to get to the correct one.

That is why I am asking to save us both time, regarding which page you are on? :slight_smile:

I am soo sorry I misunderstood you. It is page 13 the paragraphs and/or words that were supposed to have change colors did not change.
Thank you, and again I apologize,
Gayle

Also, I’ll take care of the BR

No worries it saved me looking through 12 pages…

Like you said you aren’t following the exact same page structure, which is fine. So long as it doesn’t deviate too much or some or the CSS won’t apply itself correctly unless you match the ID and class values to your version, etc.

I see you’ll need to change your <div id="body content"> into <div id="bodycontent"> that ID is one word NOT two so you’ll also have to fix that.

I assume when you tried inline CSS in the previous examples that worked?

If so, once you have cleaned up the markup we now have to determine whether it’s your CSS content that is wrong or your link to the CSS file?

Make sure your CSS file is called style1.css and that is has the *.css extension and NOT *.txt

If you create a NEW CSS file called style1.css (only using the CSS from my post #6). You’ll have a good CSS file.

Then using my XHTML sample code in #10 and save that (index.html) you will then have webpage. Then hopefully the linked CSS file WILL apply blue paragraph text to your page.

Make sure both: index.html and style1.css are in the same folder.

Try that first, and once we get that working we can move forward… If it doesn’t then you are probably make typos in the filenames. :slight_smile:

Thank you so much. I should have known that it was the <br> tags but didn’t with the body content being spaced would have an effect.

Stunning Boy, we call that “thread hijacking” around here. We’re glad to give assistance, but please don’t horn in on someone else’s thread with your own requests. Start a new thread, please. Thanks.

I apologize for that did mean to do that. I was just following a link from my email. Won’t happen again.

Off Topic:

What are you apologising for livingmydream, did you make a typo in #17 and edited your post later? Because Max was talking about the other user that started a different topic in your thread.

Just simply disregard that. Didn’t realize it was directed at another user. :wink: