I'm in my my first CSS lesson and the code, as copied straight out of the book and copied into Notepad, for some odd reason is not being read by my browser. The HTML code is being read. But not the CSS code. Can someone tell me why my browser won't read the CSS portion of the code below?
[code:35hcqq0i]<html>
<head>
<title>Starbuzz Coffee
Well...we're not much for the programming here, but I'll take a stab at it:
The issue comes from this line of code:
[code:fj1sjvxb]<style type=
Yup, Chad's exactly right. The "smart" quotes are killing it.
I copied the code into Dreamweaver, which removed the smart quotes and it displays fine. That's one thing you have to be careful about as not every program handles encoding the same. All you need is plain text.
Here's the corrected code:
[code:jrvmdrzh]<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>[/code:jrvmdrzh]
I don't want to put the cart before the horse, but you also need to declare a doc type and encoding for a proper web page. As an example this would appear before your code and replacing the <html> tag:
[code:jrvmdrzh]<!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">[/code:jrvmdrzh]
So the proper page code would look like this:
[code:jrvmdrzh]<!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>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>[/code:jrvmdrzh]
Declare a doc type? Really?? I'm not arguing with you. But my teacher, thus far, has never used the words "Doc type" in any of our lessons. So in our world, the students world, a doc type doesn't exist...not yet. I'm on page 30 of "Head First HTML with CSS & XHTML a Learner's Guide." Page 30 is where you'll find the very first CSS problem/example for the student to address. Up to that point the student was getting instruction on XHTML. And yes, I had and have created a couple of web pages thanks to those first 29 pages of instructions.
So, in essence, the teacher(s) were telling us that we could use CSS on Notepad (yeah i use Notepad in Windows XP) and then see the results using IE (Internet Explorer). If you could see page 30 you would clearly see what i mean by that.
The teachers are the authors of the book, Elisabeth and Eric Freeman. I applied your suggestion. I changed the quotation marks. That's all I did, i just changed the quotation marks. And to my utter amazement my browser can now read the problem/example located on page 30, Chapter 1. But I did not add the doc type, not yet. Right now I feel like saying "Thank you very much for your time and assistance. It saved the day." And it did. Because I spent many hours in an unproductive postion, learning nothing, unable to move on to Chapter 2.
But now I have to wonder what would happen if I ad the doc type. I wonder if that might illicit a change. What's up with that theory, you ask? Well, the CSS code for the page 30 example adds approximately 4 or 5 styling changes. And from what I see on my browser is that most, but not all, of those changes were made. For instance, the background is now a tan color as it should be. Along with the margins, now we have margins thanks to the CSS. But there is one thing missing. And that's what the book calls (and shows in a picture on page 31) and I quote "A gray border around the content....". I see the gray border in the book on page 31. But when I look at it on my computer monitor/web browser there is no gray border. But that's okay. I'm not sweating that. It's a small detail. I just wonder, and surmise, that if I add the doc type perhaps then gray border will show up (?)
[quote="The Blind Side":1sni9msn]But now I have to wonder what would happen if I ad the doc type. I wonder if that might illicit a change. What's up with that theory, you ask? Well, the CSS code for the page 30 example adds approximately 4 or 5 styling changes. And from what I see on my browser is that most, but not all, of those changes were made. For instance, the background is now a tan color as it should be. Along with the margins, now we have margins thanks to the CSS. But there is one thing missing. And that's what the book calls (and shows in a picture on page 31) and I quote "A gray border around the content....". I see the gray border in the book on page 31. But when I look at it on my computer monitor/web browser there is no gray border. But that's okay. I'm not sweating that. It's a small detail. I just wonder, and surmise, that if I add the doc type perhaps then gray border will show up (?)[/quote:1sni9msn]
As I said, cart before the horse. I'm sure they will get to that at a later time. It basically tells the browser what to expect and is required for the page to pass validation, but don't let that concern you at the moment. I didn't mean to confuse you!
I use Dreamweaver and it displays fine for me.
[attachment=0:1sni9msn]12-1-2011 9-51-44 AM.png[/attachment:1sni9msn]
1 Guest(s)
