stylesheet with several <pre> styles?

#1

How do I set several different properties for PRE in
a CSS stylesheet, rather than resorting to this:

<BODY>

<PRE STYLE="font-family:monospace;
font-size:0.95em;
width:40%;
border:red 2px solid;
color:red;
background-color:#FBB; ">
This is red
</PRE>

<PRE STYLE="font-family:monospace;
font-size:0.95em;
width: 40%;
border:blue 2px solid;
color:blue;
background-color:#BBF; ">
This is blue
</PRE>

<PRE STYLE="font-family:monospace;
font-size:0.95em;
width: 40%;
border:green 2px solid;
color:green;
background-color:#BFB; ">
This is green
</PRE>

</BODY>

(the above is just an example)

Regards,
Alan
--
A: Because it messes up the order in which people normally read text.
Q: Why is it such a bad thing?
A: Top-posting.
Q: What is the most annoying thing on usenet and in e-mail?

#2

Alan Illeman wrote:

Quote:

How do I set several different properties for PRE in
a CSS stylesheet, rather than resorting to this:

BODY

PRE STYLE="font-family:monospace;
font-size:0.95em;
width:40%;
border:red 2px solid;
color:red;
background-color:#FBB; "
This is red
/PRE

PRE STYLE="font-family:monospace;
font-size:0.95em;
width: 40%;
border:blue 2px solid;
color:blue;
background-color:#BBF; "
This is blue
/PRE

PRE STYLE="font-family:monospace;
font-size:0.95em;
width: 40%;
border:green 2px solid;
color:green;
background-color:#BFB; "
This is green
/PRE

/BODY

(the above is just an example)

Regards,
Alan
--
A: Because it messes up the order in which people normally read text.
Q: Why is it such a bad thing?
A: Top-posting.
Q: What is the most annoying thing on usenet and in e-mail?

Would this do?

In CSS:
..pre1 {font-family:monospace;
font-size:0.95em;
width:40%;
border:red 2px solid;
color:red;
background-color:#FBB;}

And so on.

In Body
<pre class="pre1">This is red</pre>

--
Arne
http://w1.978.telia.com/~u97802964/

#3

"Alan Illeman" <illemann (AT) surfbest (DOT) net> wrote:

Quote:

How do I set several different properties for PRE in
a CSS stylesheet, rather than resorting to this:

PRE STYLE="font-family:monospace;
font-size:0.95em;
width:40%;
border:red 2px solid;
color:red;
background-color:#FBB; "
This is red
/PRE

PRE STYLE="font-family:monospace;
font-size:0.95em;
width: 40%;
border:blue 2px solid;
color:blue;
background-color:#BBF; "
This is blue
/PRE

PRE STYLE="font-family:monospace;
font-size:0.95em;
width: 40%;
border:green 2px solid;
color:green;
background-color:#BFB; "
This is green
/PRE

Specifying monospace is superfluous as it's the default for <pre>,
specifying 0.95em may also be pointless.

pre.special{width:40%}
pre.special.one{border:2px solid red;color:red;background:blue}
pre.special.two{border:2px solid green;color:green;background:red}
pre.special.three{border:2px solid blue;color:blue;background:green}

Replace the "special, one, two, three" class names with something
meaningful.

<pre class="special one">foobar</pre>
<pre class="special two">foobar</pre>
<pre class="special three">foobar</pre>

--
Spartanicus

#4

On Sun, 8 Aug 2004 07:33:33 -0400, Alan Illeman wrote:

Quote:

How do I set several different properties for PRE in
a CSS stylesheet, rather than resorting to this:

Several ways, the easiest is if there are no other
<PRE> sections..

<head>
....
<style type='text/css'>
pre {
// this is a default for <PRE> sections AFAIU, redundant..
// font-family:monospace;
font-size:0.95em;
width:40%;
// AFAIR, you can override *just* the color, see below..
border:black 2px solid;
}
</style>
</head>

Quote:

BODY

PRE STYLE="border-color:red;
color:red;
background-color:#FBB; "
This is red
/PRE

etc..

[ ..And why are you presuming you can manually space
text so that it fits 40% of the width of the page?
(If that is what the spaces are for) ]

Quote:

(the above is just an example)

...hmmm. I always get suspicious when people pose
arbitrary examples that they think demonstrate the
problem/challenge they face. An *actual* page with
a 'real World(WideWeb)' example is generally better.

For further information see..
<http://www.spartanicus.utvinternet.ie/help_us_help_you.htm>
...or my own variant more geared to Java/Javascript
<http://www.physci.org/codes/sscce.jsp>

HTH

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

#5

"Alan Illeman" <illemann (AT) surfbest (DOT) net> wrote

Quote:

How do I set several different properties for PRE in
a CSS stylesheet, rather than resorting to this:

BODY

PRE STYLE="font-family:monospace;
[snip]

Thank you Arne.
Thank you Spartanicus
I prefer your solution
Thank you Andrew Thompson
It's hard to provide a webpage, when I don't have a solution!

Alan

#6

Spartanicus wrote on 08 aug 2004 in
comp.infosystems.www.authoring.stylesheets:

Quote:

Specifying monospace is superfluous as it's the default for <pre>,
specifying 0.95em may also be pointless.

pre.special{width:40%}
pre.special.one{border:2px solid red;color:red;background:blue}
pre.special.two{border:2px solid green;color:green;background:red}
pre.special.three{border:2px solid blue;color:blue;background:green}

Replace the "special, one, two, three" class names with something
meaningful.

pre class="special one">foobar</pre
pre class="special two">foobar</pre
pre class="special three">foobar</pre

should be:

pre.special{width:40%}
pre.one{border:2px solid red;color:red;background:blue}
pre.two{border:2px solid green;color:green;background:red}
pre.three{border:2px solid blue;color:blue;background:green}

IMHO.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

#7

"Evertjan." <exjxw.hannivoort (AT) interxnl (DOT) net> wrote:

Quote:

pre.special{width:40%}
pre.special.one{border:2px solid red;color:red;background:blue}
pre.special.two{border:2px solid green;color:green;background:red}
pre.special.three{border:2px solid blue;color:blue;background:green}

should be:

pre.special{width:40%}
pre.one{border:2px solid red;color:red;background:blue}
pre.two{border:2px solid green;color:green;background:red}
pre.three{border:2px solid blue;color:blue;background:green}

There's no "should" about it, either method can be used.

--
Spartanicus

#8

"Alan Illeman" <illemann (AT) surfbest (DOT) net> wrote

Quote:

"Alan Illeman" <illemann (AT) surfbest (DOT) net> wrote in message
news:10hc4221nt376a9 (AT) news (DOT) supernews.com...
How do I set several different properties for PRE in
a CSS stylesheet, rather than resorting to this:

BODY

PRE STYLE="font-family:monospace;
[snip]

Thank you Arne.
Thank you Spartanicus
I prefer your solution
Thank you Andrew Thompson
It's hard to provide a webpage, when I don't have a solution!

Alan

Both methods
http://surfbest.net/~illemann (AT) s...t-css/pre.html

Regards,
Alan

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

stylesheet with several <pre> styles?

Cascading Style Sheets Layout/presentation on the WWW (comp.infosystems.www.authoring.stylesheets)

stylesheet with several <pre> styles? - 08-08-2004 , 06:33 AM

Re: stylesheet with several <pre> styles? - 08-08-2004 , 07:21 AM

Re: stylesheet with several <pre> styles? - 08-08-2004 , 07:31 AM

Re: stylesheet with several <pre> styles? - 08-08-2004 , 07:47 AM

Re: stylesheet with several <pre> styles? - 08-08-2004 , 10:23 AM

Re: stylesheet with several <pre> styles? - 08-08-2004 , 10:32 AM

Re: stylesheet with several <pre> styles? - 08-08-2004 , 01:34 PM

Re: stylesheet with several <pre> styles? - 08-08-2004 , 04:01 PM