472,102 Members | 1,946 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

home > topics > html / css > questions > stylesheet with several <pre> styles?

Join Bytes to post your question to a community of 472,102 software developers and data experts.

stylesheet with several <pre> styles?

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?

Jul 20 '05 #1
7 18363
Alan Illeman wrote:
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/
Jul 20 '05 #2
"Alan Illeman" <il******@surfbest.net> wrote:
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
Jul 20 '05 #3
On Sun, 8 Aug 2004 07:33:33 -0400, Alan Illeman wrote:
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>
<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) ]
(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
Jul 20 '05 #4

"Alan Illeman" <il******@surfbest.net> wrote in message
news:10*************@news.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


Jul 20 '05 #5
Spartanicus wrote on 08 aug 2004 in
comp.infosystems.www.authoring.stylesheets:
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)
Jul 20 '05 #6
"Evertjan." <ex**************@interxnl.net> wrote:
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
Jul 20 '05 #7

"Alan Illeman" <il******@surfbest.net> wrote in message
news:10*************@news.supernews.com...

"Alan Illeman" <il******@surfbest.net> wrote in message
news:10*************@news.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/~il******@surfbe...t-css/pre.html

Regards,
Alan
Jul 20 '05 #8

This discussion thread is closed

Start new discussion

Replies have been disabled for this discussion.

Similar topics
<pre> and proportional vs fixed width fonts
21 posts views Thread by Headless | last post: by
Two <PRE> Selectors
2 posts views Thread by Buck Turgidson | last post: by
<pre> versus <code> white-space:pre; when pasting
3 posts views Thread by Michael Shell | last post: by
Displaying code with <pre>
9 posts views Thread by Eric Lindsay | last post: by
Background image position and <pre>/<code> tag question
14 posts views Thread by Schraalhans Keukenmeester | last post: by
openGauss security policy
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2023
About Bytes
Advertise
Terms Of Use
Privacy Policy
Contact Us
Sitemap

Follow us! Get the Latest Bytes Updates