Student new to CSS having problems getting CSS to show up in web browser

Soul Reputation · Nov 30, 2011

I'm on my very first lesson with CSS. I'm using the book titled "Head First HTML with CSS & XHTML." I completed the first HTML lessons successfully. I type the HTML onto Notepad and it comes out fine.

The problem is when I modify the same document with CSS (in order to get margins, background-color, etc) the modifications to CSS are not recognized by my web browser.

I made two attempts and both attempts failed. The first attempt was made when I typed the CSS in. The second attempt was made when I copied the CSS straight out of the text book. I then pasted it to Notepad. I then closed it. I then hit my refresh button. But the CSS portion is not recognized/read by IE8. Is there a setting I'm supposed to set in my web browser? Below is the super simple CSS lesson that my browser for some reason fails to recognize:

<html>

<head>
<title>Starbuzz Coffees Mission</title>
<style type=text/css>
body
{
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>

<body>
<h1>Starbuzz Coffees Mission</h1>
<p>To provide all the caffeine that you need to power your life.</p>
<p>Just drink it.</p>
</body>

</html>

Broheim · Nov 30, 2011

there's no doctype.

Soul Reputation · Nov 30, 2011

Broheim said:
there's no doctype.

Sorry, but not having a doctype is not the problem. The problem is related to something else. It's not the problem because

1) On page 30 of "Head First HTML", where this lesson is given, they don't show a doctype

2) They, the authors, don't discuss doctype yet

3) The HTML portion is read by Internet Explorer (no problem) - but not the CSS portion (that's the mystery) - all without a doctype

Below is the EXACT format the authors are using copied straight from the book and as you can see there is no doctype and note that the authors state that the CSS in this example, when typed onto Notepad, will (or should) be recognized in Internet Explorer:

<html>
<head>
<title>Starbuzz Coffee’s Mission</title>
<style type=”text/css”>
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Starbuzz Coffee’s Mission</h1>
<p>To provide all the caffeine that you need to power your life.</p>
<p>Just drink it.</p>
</body>
</html>

Snapster · Nov 30, 2011

This looks like it's been copied in and out of a word processor, try:

<style type="text/css">

instead of

<style type=text/css>

Speach marks are a different character from a quote so the tag is being ignored.

Broheim · Nov 30, 2011

Soul Reputation said:
Sorry, but not having a doctype is not the problem.

I know it isn't but you should always have a doctype, always!

Soul Reputation · Nov 30, 2011

Snapster said:
This looks like it's been copied in and out of a word processor, try:

<style type="text/css">

instead of

<style type=”text/css”>

What difference is there between the two, I don't see any structural difference. Please explain your example.

PhatoseAlpha · Nov 30, 2011

” is not "

They are two different characters. See the slant on the first? The second is valid, the former is not.

Don't edit html in Word. It does things like replace the " character with ” to make it look nicer, but they are not the same thing at all as far as html is concerned.

Ken g6 · Nov 30, 2011

1. Get Notepad++.
2. Replace all '”' with '"'. Copy and paste those characters into the search/replace boxes.
3. Don't use anything except a dedicated IDE, Notepad++, or Notepad to edit these files in the future.

Soul Reputation · Dec 1, 2011

PhatoseAlpha said:
is not "

They are two different characters. See the slant on the first? The second is valid, the former is not.

Don't edit html in Word. It does things like replace the " character with to make it look nicer, but they are not the same thing at all as far as html is concerned.

Yesterday I thought Snapster was fooling around and trying to act like a comedian or a jerk (due to the answer Snapster gave me) or maybe he/she was under the influence of a drink or drug, which is a plausible scenario anywhere you go. So this morning I woke up at 3am, read the rest of this thread including your post. I then went back and made the changes you and Snapster recommended and to my surprise the changes worked. Meaning, with those changes my browser now recognizes the CSS example I was working on, the same example that was kicking my butt and driving me nuts. Oh happy day! You guys helped me out immensely. Thank you for your service to mankind

Ghostab94 · Jun 9, 2013

Snapster I had the same problem and i was banging my head . Thanks to you.

PS Look at the code carefully lol

Student new to CSS having problems getting CSS to show up in web browser

Soul Reputation

Member

Broheim

Diamond Member

Soul Reputation

Member

Snapster

Diamond Member

Broheim

Diamond Member

Soul Reputation

Member

PhatoseAlpha

Platinum Member

Ken g6

Programming Moderator, Elite Member

Soul Reputation

Member

Ghostab94

Junior Member

TRENDING THREADS