Westciv Logo

These materials are copyright Western Civilisation Pty Ltd.

www.westciv.com

They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses.

Please see our website for detailed copyright information or contact us [email protected].

quick tutorials

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.

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

Note: those of you who really are listening at this point will howl, but that's only the font! What about the indentation and the colored box that appears around the code examples on this page? Well, I've chosen not to repeat here explanations of other properties you'll find elsewhere in the cookbook.

Making pull-quotes

"To really understand style sheets you must understand the difference between structural and presentational markup."

This little recipe will show you how to make pull-quotes that look like the one above. Pull-quotes are useful for breaking up long slabs of text and drawing the reader's attention to important ideas. Commonly a pull-quote will be in a larger font than the main body of the text, and it is often in italics as well. In my example I have also given it a background color and border as well as indenting the whole thing and right-justifying the text.

In your HTML

The first thing I'll say here is

Don't mark your pull-quotes up as block-quotes

Browsers have their own ideas about how text marked-up with the simple HTML selector BLOCKQUOTE should appear, which might well conflict with what you want to do. In theory your style sheet should override this, but in practice it just doesn't work this way, and probably won't for the foreseeable future. While you might save yourself a little time in the marking up stage, you will have created a real headache when it comes to trying to get your pull-quotes to appear as you want them to appear in the different browsers.

Instead, you should markup your pull-quotes as being paragraphs of class "pullquote", like this

<p class="pullquote">Don't mark your pull-quotes up as block-quotes</p>

So go through your document and markup all the text you want to appear as a pull-quote like this.

In your style sheet

You have to first create a selector that will select all paragraphs of class "pullquote", and then you can give the properties to this selector so that your pull-quotes will appear how you want them to.

The selector looks like this

p.pullquote

And here is the same selector with all the properties you need to make it look like the pull-quote above.

p.pullquote {background-color: #315b7f;

color: #f3f1f4;

padding: 2%;

font-style: italic;

font-size: 1.5em;

border: medium #4a88be solid;

margin-left: 3em;

margin-right: 3em;}

background-color

This property sets the color that appears in the box around the pull-quote. "#7f034c" is a hexadecimal color value. See the CSS Guide for color values you can use.

color

This sets the color of the actual text of the pull-quote. "#f3f1f4" is the hexadecimal color value. See the CSS Guide for color values you can use.

padding

This sets how much bigger the colored box is than the actual text it contains. In my example here a padding of 2% is set for each side of the box. If you want to be fancy you can set different paddings for the top, bottom, left and right sides of the box individually. For example

If I set the padding as shown below, my pull-quotes would look like this, with more space above and below the text, and less space to the left and right.

p.pullquote {padding-bottom: 5%;

padding-left: 1%;

padding-right: 1%;

padding-top: 5%;}

Note that the paddings are set as a percentage. This specifies that the padding used should be that percentage of the width of the element. This is true both for horizontal and vertical padding. Why are we using a percentage and not a fixed amount, say 10 pixels? If you use a fixed amount then when the window is resized, or the text is increased in size by the user, the padding won't adapt to the new proportions. By using a relative measure like percentage, your pages will adapt to the settings the user has chosen to read them with.

font-style

This makes the text appear in italics. If you also wanted the text to appear underlined you would need an extra bit of code like this

p.pullquote {text-decoration: underline}

font-size

This makes the font appear larger than it does on the rest of the page. Again, like color, you can't just put anything here as a value for the size of a font. Take a look at our CSS Guide for more on the font-size values you can use.

You can do some relatively sophisticated things with font sizes using style sheets, but you really need to have a bit of an understanding of how style sheets really work, particularly the idea of "inheritance". In thess tutorials I have stuck to some very simple examples like this one, but again, take a look at the CSS Guide if you want to know how font-size really works and how to use it.

We've specified font-size using em units. You might well be wondering what an em unit is. In traditional typography, 1em was the height of the letter M. With style sheets, if you specify a font-size in ems, then the size of the font will be that multiple of the size of the font of the parent element. In our case, we've set the size to 1.5em. This means our pullquote text will be 1.5 times the size of the text of the body (because the pullquote paragraph is contained in the BODY).

What's the value of this? Well, the size of an M changes depending on the user's settings. If a user chooses a large font size as their preference for viewing web pages, then the pullquote will be adjusted upwards in size to maintain the same proportions. If the user chooses a smaller font size for the body of their pages, the size of the text of the pullquote will be reduced, again maintaining the proportions.

border

In my example I have defined 3 aspects of the appearance of the border

margin-left, margin-right

I have used this property to make the entire box that the text appears in start 3em in from the left of the page and finish 3em from the right. If you like, you could also give values for margin-top and margin-bottom, to create more space between your pull-quote and the text before and after it.

p.pullquote {margin-top: 10%;

margin-bottom: 10%}

Again, we've used percentages to specify our margins, so that as the window is resized, the margins maintain the same proportions to the width of the pullquote.

Making your headings stand out

For a long time now we've all been using bandwidth heavy gifs to create fancy headings, because you couldn't create anything with much pizzazz when all you could define was a font and its size and a few other simple properties. Well, hopefully style sheets will be able to change all that for you, and do so in a way that changing and updating your pages in the future will be a snap. And what's more, headings are a great way of getting into the habit of marking up according to structure rather than appearance.

In your HTML

Most HTML editors allow you to easily mark-up the headings in your document. Make sure you get rid of any appearance tags.

In your style sheet

In our style sheet we need to select headings, then apply whichever properties we want to distinguish headings, both from the main text, and from other heading levels.

There are many ways you could make your headings stand out. Generally, the size of the text is increased. Here, we have reverse the text color, so that the background color of the page is used for the color of heading text, while the background of the heading is set to the text color of the heading. You might also indent headings, our outdent them (so that the left hand side of the heading text is further to the left or right of the text of paragraphs). You could also align heading text to the right, or center the heading text.

One idea is to have a common style for all headings regardless of level, then distinguish different levels by text size, and perhaps indentation.

To create a selector which will select all headings at once, we can use a group selector. This simply lists the desired selectors separated by a comma.

To select every heading, regardless of level we use the selector

h1, h2, h3, h4, h5, h6

We can then apply the common properties to this selector, and use individual selectors for the properties of individual levels of heading.

Increasing text size

We have already seen how to change the size of text, using the font-size property, while looking at pullquotes.

Reversing text and background color

We've seen how to set the color of an element, as well as the background color several times in this cookbook. You should be familiar with it by now!

Indenting and Outdenting text

You'll be familiar from many paper based publication with the use of indenting to distinguish heading and main text. There are several ways of achieving this with style sheets. Perhaps the most appropriate is to use margins. To indent all headings of a certain level beyond the left edge of the main text, simply create left margin. Margins can be specified using pixel values, but lets take a look here at another way of specifying margin values.

Many values in style sheets can be specified using percentages. For example, you can specify the size of text like this

h1 {font-size: 120%}

This says that headings of level one should be displayed at 1.2 times the size of the text of the parent of the heading. Usually, this will be the BODY. So if the body text displays as 12pt, the headings of level 1 should display at 1.2 x 12 = 14.4 points (which will probably be rounded down to 14 points). You could also use ems, as we saw above. 1.2em is the equivalent of 120%.

What's the point? Well, if you "hardwire" text size, then you are forcing users to read text at your preferred size, not their preferred size. If you don't use absolute sizes like points or pixels, they can choose the font size they want as the base size for their pages. Suppose, they can't read very well., or have a very high resolution monitor. A reader might prefer a font size of 18pt. If you've hardwired your H1s as 14pt, then your headings of level one will be smaller than the main text! By specifying as a percentage, your headings of level one will always maintain their ratio of being 120% the size of the body text.

Let's apply this reasoning to margins. You might specify a left margin of 20 pixels. To you this might "look right" on an 800 by 600 resolution monitor, with windows filling the screen. What will 20px margins look like on hand held devices. Or super high resolution monitors with windows filling the screen? Why not choose a percentage. This way, your page will adapt to the screen resolution and window size.

To create a left margin for headings of level 1 of say 10%, use the following rule

h1 {margin-left: 10%}

You could then distinguish different heading levels by further indenting them.

Text alignment

Its not uncommon for headings to align to the center, or even to the right. To align the text of headings, or any other elements, we use the text-align property. for example, to right align (right justify) text in headings of level 2, use the statement

h3 {text-align: right}

In this recipe we've seen a number of important properties, and we've also taken a look at the important idea of making pages that adapt to the user's settings. It's a lesson we'll try to reinforce in the rest of our recipes. If you'd like to learn more about he reasoning behind this approach, see this article about making adaptable web pages.