Why will my browser read HTML but not CSS?

Why will my browser read HTML but not CSS? CSS made in Notepad not showing up in IE8

#1 Deli Worker

New Member

Group: Members
Posts: 4
Joined: 30-November 11

Posted 30 November 2011 - 11:49 AM

I'm a student working on my first CSS lesson. And things are going bad, thanks to the textbook I'm using. I'm using the book "Head First HTML" authored by the Freeman's.

When the Freeman's give the first CSS lesson on page 30 (I show their exact format at the end of this post) you can clearly see CSS working in their web browser as the the book has color images. You can also see the CSS add margins as you would expect CSS to do.

But things are different in my web browser. when I 1) type the code in by hand into Notepad or 2) copy and paste the code in by hand into Notepad the HTML portion is read by my web browser but the CSS portion is not. The CSS portion is ignored/is not read/does not show. But again, the HTML portion is fine.

Anyone know why? Here's the exact format, as created by the Freeman's and taken from their book, that I'm talking about:

<html>

<head>

<title>Starbuzz Coffee</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 Beverages</h1>
<h2>House Blend, $1.49</h2>
<p>A smooth, mild blend of coffees from Mexico, Bolivia and
Guatemala.</p>
<h2>Mocha Caffe Latte, $2.35</h2>
<p>Espresso, steamed milk and chocolate syrup.</p>
<h2>Cappuccino, $1.89</h2>
<p>A mixture of espresso, steamed milk and milk foam.</p>
<h2>Chai Tea, $1.85</h2>
<p>A spicy drink made with black tea, spices, milk and honey.</p>
</body>

</html>

This post has been edited by Andrew: 02 December 2011 - 01:26 PM
Reason for edit: Mod Edit: Add [code] tags for readability - AA

#2 mr roman

Member

Group: Members
Posts: 21
Joined: 17-November 11
Gender:Male
Location:CT / Puerto Rico

Posted 30 November 2011 - 01:26 PM

you may need to specify a DOCTYPE so the browser knowns what version of language your using, as well as using a META tag between your <head></head> tags to specify the content-type.

Also, to verify that your code is there, if your on Firefox: right click > view page source and look for your CSS.

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


<title>Starbuzz Coffee</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 Beverages</h1>
<h2>House Blend, $1.49</h2>
<p>A smooth, mild blend of coffees from Mexico, Bolivia and
Guatemala.</p>
<h2>Mocha Caffe Latte, $2.35</h2>
<p>Espresso, steamed milk and chocolate syrup.</p>
<h2>Cappuccino, $1.89</h2>
<p>A mixture of espresso, steamed milk and milk foam.</p>
<h2>Chai Tea, $1.85</h2>
<p>A spicy drink made with black tea, spices, milk and honey.</p>
</body>

</html>

You can read more about DOCTYPE here: http://www.w3schools.com/tags/tag_doctype.asp
and META tag here: http://www.w3schools.com/tags/tag_doctype.asp

This post has been edited by mr roman: 30 November 2011 - 01:30 PM

#3 Andrew

Bleepin' Night Watchman

Group: Moderator
Posts: 7,425
Joined: 05-December 05
Gender:Not Telling
Location:Right behind you

Posted 02 December 2011 - 01:34 PM

This may be just the forum's formatting but, the line:

<style type=”text/css”>

looks like it contains "curly" quotation marks. This would certainly screw up any browser that tried to parse it. Make doubly sure that all quotation marks are simply standard quotation marks and not one of the other glyphs commonly used for prettier punctuation. If you're using some sort of word processor like Microsoft Word to type your code then stop using it; editors like MS Word are not appropriate for source code as they tend to replace characters like quotation marks. Use either MS Notepad or (my favorite) Notepad++.

Related handy tools: W3C HTML Validator; W3C CSS Validator.

This post has been edited by Andrew: 02 December 2011 - 01:36 PM

Help us help you. If HelpBot replies, you MUST follow step 1 in its reply so we know you need help.
Posted Image