Connecting Tech Pros Worldwide Forums | Help | Site Map

stylesheet with several <pre> styles?

Alan Illeman
Guest
 
Posts: n/a
#1: Jul 21 '05
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?




Arne
Guest
 
Posts: n/a
#2: Jul 21 '05

re: stylesheet with several <pre> styles?


Alan Illeman wrote:
[color=blue]
> 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?
>
>
>[/color]

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/
Spartanicus
Guest
 
Posts: n/a
#3: Jul 21 '05

re: stylesheet with several <pre> styles?


"Alan Illeman" <illemann@surfbest.net> wrote:
[color=blue]
>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>[/color]

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
Andrew Thompson
Guest
 
Posts: n/a
#4: Jul 21 '05

re: stylesheet with several <pre> styles?


On Sun, 8 Aug 2004 07:33:33 -0400, Alan Illeman wrote:
[color=blue]
> How do I set several different properties for PRE in
> a CSS stylesheet, rather than resorting to this:[/color]

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>[color=blue]
>
> <BODY>
>[/color]
<PRE STYLE="border-color:red;[color=blue]
> color:red;
> background-color:#FBB; ">
> This is red
> </PRE>[/color]

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) ]
[color=blue]
> (the above is just an example)[/color]

...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
Alan Illeman
Guest
 
Posts: n/a
#5: Jul 21 '05

re: stylesheet with several <pre> styles?



"Alan Illeman" <illemann@surfbest.net> wrote in message
news:10hc4221nt376a9@news.supernews.com...[color=blue]
> How do I set several different properties for PRE in
> a CSS stylesheet, rather than resorting to this:
>
> <BODY>
>
> <PRE STYLE="font-family:monospace;[/color]
[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




Evertjan.
Guest
 
Posts: n/a
#6: Jul 21 '05

re: stylesheet with several <pre> styles?


Spartanicus wrote on 08 aug 2004 in
comp.infosystems.www.authoring.stylesheets:
[color=blue]
> 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>
>[/color]

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)
Spartanicus
Guest
 
Posts: n/a
#7: Jul 21 '05

re: stylesheet with several <pre> styles?


"Evertjan." <exjxw.hannivoort@interxnl.net> wrote:
[color=blue][color=green]
>> 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}[/color]
>
>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}[/color]

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

--
Spartanicus
Alan Illeman
Guest
 
Posts: n/a
#8: Jul 21 '05

re: stylesheet with several <pre> styles?



"Alan Illeman" <illemann@surfbest.net> wrote in message
news:10hchamd46r5gcc@news.supernews.com...[color=blue]
>
> "Alan Illeman" <illemann@surfbest.net> wrote in message
> news:10hc4221nt376a9@news.supernews.com...[color=green]
> > How do I set several different properties for PRE in
> > a CSS stylesheet, rather than resorting to this:
> >
> > <BODY>
> >
> > <PRE STYLE="font-family:monospace;[/color]
> [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[/color]

Both methods
http://surfbest.net/~illemann@surfbe...t-css/pre.html

Regards,
Alan


Closed Thread