Valdar's Blog

Text appearance
This recipe is really more of a collection of recipes to help give you some ideas of how you can make text in your pages look with the aid of a style sheet.

I want to make all the code on my pages appear in a special font
I want to create boxed “pull-quotes” on my pages, maybe with a special background color and a border around the box
I want to make my headings really stand out
Defining special fonts
With style sheets it’s easy to define a set of fonts that a browser will look for when drawing a particular element on a web page. The example I’m going to use here relates to the actual pages you are viewing now. I’m going to show you how I make all my examples of code appear in a particular font.

In the HTML
This part is really easy because the selector you use, CODE, is what’s called a Basic HTML Selector. Most WYSIWYG editors will probably have a menu item that allows you to mark text up as code, but just in case you’re doing it by hand, it should look like this.

<code>sample code</code>

So the first thing you do, maybe as you’re writing the document in the first place, or maybe with a document that was written before if you’ve just discovered the wonders of structural markup as opposed to presentational markup.

In your style sheet
As you know, you cannot define a font that you want your code examples to be drawn in and just expect then that this font will always be used. With a style sheet though you can define a series of acceptable fonts, in order of preference, that the browser will work its way down until it finds a font that is also on the client.

For my CODE example then, the style sheet looks like this

CODE {font-family: Courier, “Courier New”, Monotype.com, monospace}

The selector is “CODE”, the property is “font-family” and the value is “Courier, “Courier New”, Monotype.com, monospace”. Note that the inverted commas around “Courier New” are important because of the space between the two words in the name.

I’ve chosen this value because

Courier is the font I really want my code to appear in
Courier New is the version of Courier more commonly found on the Windows platform
Monotype.com is a “web font” similar font to Courier which is commonly installed with the major browsers
Monospace is the “font family” to which courier belongs. This tells the browser “if you can’t find any of the previous, at least use a font from this family.” It’s strongly recommended that you get into the habit of putting a font family at the end of your list of fonts.