Stylesheets - Newbie question concerning colored text

Author

Newbie question concerning colored text

Knot

2004-07-28, 4:15 am

Hi, Hope my net ettiquete is approproate.

I'm just beginning a study of CSS1. I've purchased Eric Meyer's book
(the old one, "Cascading Style Sheets, the Definitive Guide"

Anyway, I'm very perplexed. I cannot seem to get colored text to
display. I think that perhaps I don't understand the basics of
cascading. I've included a snip of my [very simple] code here in this
message. BTW, I have been to the validation web site and so at least I
did that.

<snip>------------------------------------------------------------------------

<html><head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Meyer chapter 2 lesson 4</title>

<style type="text/css"></style>
</head>

<body>
Example of Body text not contained within a paragraph tag.
<p>Example of Body text contained within a paragraph tag.</p>
<p class="italic">Class italic text contained within a paragraph
tag.</p>
<p class="bold">Class bold text contained within a paragraph tag.</p>
</body></html>

</snip>------------------------------------------------------------------------

Well, believe it or not the text within the paragraph tag refuses to
be maroon. Can anybody explain it?

Thanks
Bill

Neal

2004-07-28, 4:15 am

On Wed, 28 Jul 2004 04:13:33 GMT, Knot <nobody@nowhere.com> wrote:

> Hi, Hope my net ettiquete is approproate.
>
> I'm just beginning a study of CSS1. I've purchased Eric Meyer's book
> (the old one, "Cascading Style Sheets, the Definitive Guide"
>
> Anyway, I'm very perplexed. I cannot seem to get colored text to
> display. I think that perhaps I don't understand the basics of
> cascading. I've included a snip of my [very simple] code here in this
> message. BTW, I have been to the validation web site and so at least I
> did that.

But no doctype! Get in the habit.

> <style type="text/css"></style>
> </head>

> Well, believe it or not the text within the paragraph tag refuses to
> be maroon. Can anybody explain it?
>
> Thanks
> Bill

Obviously your technique hides it from new browsers too. Eliminate the
comments.

<style type="text/css">
p {font-weight: bold; color: red;}
p.italic {font-style: italic;}
p.bold {font-weight: bold;}
</style>

It works then.

To hide CSS from older browsers, it's done totally differently today. I'd
get a newer book.

Mark Tranchant

2004-07-28, 4:15 am

Knot wrote:

> <style type="text/css"></style>

> Well, believe it or not the text within the paragraph tag refuses to
> be maroon. Can anybody explain it?

Yes.

Using the comment delimiters is not really necessary these days, but can
be done:

http://www.w3.org/TR/REC-CSS1#containment-in-html

However, your example mixes an actual comment and CSS code, so the
browser sees:

Hide script from old browsers
p { ... }

which invalidated the entire p {} block of styling. The parser recovers
to successfully read your bold and italic styles.

Lose the "Hide script from old browsers" and it works.

--
Mark.

Christoph Paeper

2004-07-28, 7:15 am

*Mark Tranchant* <mark@tranchant.plus.com>:
> Knot wrote:
>
>
> Lose the "Hide script from old browsers" and it works.

<Hide><script><from><old><browsers><p>
This text is maroon and bold.
</p></browsers></old></from></script></Hide>

should work too. ;)

Also, who would call such a CSS snippet a "script"? Looks like c&ped from
a 'script' block.

--
Ociffer, I swear to drunk, I'm not God!

Alan Illeman

2004-07-28, 12:15 pm

"Mark Tranchant" <mark@tranchant.plus.com> wrote in message
news:sjINc.4756$Fc7.873175@stones.force9.net...
> Knot wrote:
>
>
>
> Yes.
>
> Using the comment delimiters is not really necessary these days, but can
> be done:
>
> http://www.w3.org/TR/REC-CSS1#containment-in-html
>
> However, your example mixes an actual comment and CSS code, so the
> browser sees:
>
> Hide script from old browsers
> p { ... }
>
> which invalidated the entire p {} block of styling. The parser recovers
> to successfully read your bold and italic styles.
>
> Lose the "Hide script from old browsers" and it works.
>
> --
> Mark.

From the above link . . .

<HTML>
<HEAD>
<TITLE>title</TITLE>
<LINK REL=STYLESHEET TYPE="text/css"
HREF="http://style.com/cool" TITLE="Cool">
<STYLE TYPE="text/css">
@import url(http://style.com/basic);
H1 { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Headline is blue</H1>
<P STYLE="color: green">While the paragraph is green.
</BODY>
</HTML

Question: Are http://style.com/cool and http://style.com/basic
CSS files? I've see @import used for .css files, but not for
extensionless files.

Alan

Chris Morris

2004-07-28, 12:15 pm

"Alan Illeman" <illemann@surfbest.net> writes:
> From the above link . . .
>
> <LINK REL=STYLESHEET TYPE="text/css"
> HREF="http://style.com/cool" TITLE="Cool">
> <STYLE TYPE="text/css">
> @import url(http://style.com/basic);
> H1 { color: blue }
> </STYLE>
>
> Question: Are http://style.com/cool and http://style.com/basic
> CSS files?

No, they're 404 errors. ;) Why they didn't use example.com for the
example links I don't know.

> I've see @import used for .css files, but not for
> extensionless files.

On a web server, the extension isn't (necessarily) related to the
file-type. Provided the server sends a 'text/css' mime type, it's a
CSS file. Likewise, if the server sends a 'text/plain' or
'application/x-pointplus' mime type for a file with the extension
'.css' it's *not* a CSS file, no matter how much certain browsers
pretend it is, and no matter what one might think the file extension
implies.

--
Chris

Mark Tranchant

2004-07-28, 12:15 pm

Alan Illeman wrote:

> I've see @import used for .css files, but not for
> extensionless files.

There's no reason to use file extensions in URLs if your server is
correctly configured. My site uses extensionless URLs for (X)HTML
documents, images and CSS files.

--
Mark.
http://tranchant.plus.com/