Web Design Web Design Forum
Registration is free! Here you can view your subscribed threads, work with private messages and edit your profile and preferences Calendar Find other members Frequently Asked Questions Search
Home Web Design

Convenient web based access to our favorite web design Usenet groups
web design reviews

This is Interesting: Free Magazines for Graphics designers and webmasters  





  Last Thread  Next Thread
Author
Thread Post New Thread   

Newbie question concerning colored text
 

Knot




quote this post edit post

IP Loged report this post
Old Post  07-28-04 - 09: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"><!-- Hide script from old browsers
p {font-weight: bold; color: maroon;}
p.italic {font-style: italic;}
p.bold {font-weight: bold;}
//  End hiding script from old browsers --></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


[  Post Follow-Up to this message ]
Re: Newbie question concerning colored text
 

Neal




quote this post edit post

IP Loged report this post
Old Post  07-28-04 - 09: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"><!-- Hide script from old browsers
> 	p {font-weight: bold; color: maroon;}
> 	p.italic {font-style: italic;}
> 	p.bold {font-weight: bold;}
> //  End hiding script from old browsers --></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.


[  Post Follow-Up to this message ]
Re: Newbie question concerning colored text
 

Mark Tranchant




quote this post edit post

IP Loged report this post
Old Post  07-28-04 - 09:15 AM   
Knot wrote:

> <style type="text/css"><!-- Hide script from old browsers
> 	p {font-weight: bold; color: maroon;}
> 	p.italic {font-style: italic;}
> 	p.bold {font-weight: bold;}
> //  End hiding script from old browsers --></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.


[  Post Follow-Up to this message ]
Re: Newbie question concerning colored text
 

Christoph Paeper




quote this post edit post

IP Loged report this post
Old Post  07-28-04 - 12:15 PM   
*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!


[  Post Follow-Up to this message ]
Re: Newbie question concerning colored text
 

Alan Illeman




quote this post edit post

IP Loged report this post
Old Post  07-28-04 - 05: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 recove
rs
> 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


[  Post Follow-Up to this message ]
Re: Newbie question concerning colored text
 

Chris Morris




quote this post edit post

IP Loged report this post
Old Post  07-28-04 - 05: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


[  Post Follow-Up to this message ]
Re: Newbie question concerning colored text
 

Mark Tranchant




quote this post edit post

IP Loged report this post
Old Post  07-28-04 - 05: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/


[  Post Follow-Up to this message ]
Sponsored Links
 





All times are GMT. The time now is 02:37 PM. Post New Thread   
  Previous Last Thread   Next Thread next
Stylesheets archive | Show Printable Version | Email this Page | Subscribe to this Thread

Popular forums

Adobe Photoshop forum Macromedia Flash Web Site Design
Dreamweaver FrontPage forum
JavaScript Forum XML forum
Style Sheets VRML
Forum Jump:
Rate This Thread:

 

XML RSS Feed web design latest articles Syndicate our forum via XML or simple JavaScript

Web Design archive  Database administration help  


Top Home  -  Register  -  Control Panel   -  Memberlist  -  Calendar  -  Faq  -  Search Top