By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,425 Members | 2,549 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,425 IT Pros & Developers. It's quick & easy.

Two <PRE> Selectors

P: n/a
I want to have a css with 2 PRE styles, one bold with large font, and
another non-bold and smaller font.

I am new to CSS (and not exactly an expert in HTML, for that matter). Is
there a way to do this in CSS?

<STYLE TYPE="text/css">
pre{ font-size:xx-large;
font-family:monospace;
font-weight:bold;text-decoration:none;
}
</STYLE>

<STYLE TYPE="text/css">
pre2{ font-size:medium;
font-family:monospace;
white-space:pre
}
</STYLE>
Jul 21 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
On Thu, 2 Dec 2004 12:39:17 -0500, Buck Turgidson <jc***@hotmail.com>
wrote:
I want to have a css with 2 PRE styles, one bold with large font, and
another non-bold and smaller font.

I am new to CSS (and not exactly an expert in HTML, for that matter). Is
there a way to do this in CSS?


Yes. Style the <pre> element itself with the styles you will use most,
which you recon to be the normal for <pre> for your site. Don't define
styles that are already common to the element (like font-family:monospace
or font-style:normal or white-space:pre;). So, just put in:

pre {
font-weight:bold; }

if that is what you need.

Then name a class, make it semantic, logic, so you remember why you want
some content in pre tags look different from the normal pre style. For
example 'remarkable'. Add styles to that class, like

pre.remarkable {
font-size:xx-large; }

and use the class in your markup as needed:

<pre class="remarkable">this text will be bold (as it is <pre>) and
xx-large (because it is also class 'remarkable')</pre>

As you are new, read up on css at
<URL:http://www.w3schools.com/css/default.asp>.
--
Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
Jul 21 '05 #2

P: n/a
>
As you are new, read up on css at
<URL:http://www.w3schools.com/css/default.asp>.


It worked great. Thanks! I am on on my way to the above URL now.
Jul 21 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.