How do I make a certain text style larger?

Question

I wrote up a post in WordPress that included some code samples. I used the "preformatted" style for the code sample, which gives a nice monospace font and doesn't screw up multiple spaces, and everything looks great...

...except that it's tiny! The text of the code samples comes out at something ridiculously small, like 8 pt or something. The HTML isn't much help; it's only producing this text by wrapping it in a <pre> tag. So I figure the bad size setting has to be coming from my style sheet.

I don't know a thing about CSS, though, and trying to look through the style sheet isn't very helpful. Does anyone know how I can find what's causing the <pre> tag to generate tiny text and tweak it to make the text size larger?

Answer 1

You should be able to add a style like so:

pre {
    font-size: 12pt;
}

CSS allows you to apply styling to block-level items as well as classes and ID's.

Answer 2

In your CSS, put the following:

pre { font-size: 16px; }

Answer 3

Search for "pre" in the CSS files, there's probably a font-size value defined. You can change this to a larger value to increase the size. Here's an example styling pre tags.

Answer 4

There could be several different stylesheets in your Wordpress installation and you have to read them all, in order to find out what's causing the problem. You should search for a definition of "pre", but, given you don't know much about CSS, you may have to do several tests to find out which one you should alter.

I believe an easier way is to install a plugin for code snippets, such as this.