CSS text styling tutorial

<pageby nominor="false" comments="false"/>

Learning goals

• Be able to style text-centric HTML pages (e.g. articles, tutorials, novels)

Concurrent

• CSS tutorial
• Font readability

Moving on

• CSS positioning tutorial
• CSS for XML tutorial
• DHTML

Level and target population

• Beginners

Teaching materials

• Example text: http://tecfa.unige.ch/guides/css/ex/just-so-stories.html

Remarks

• This tutorial is intended for students in educational technology or any other field that is technology intensive. For people who need less, there exist many easy CSS tutorials on the web. This text is intended for students who also must learn principles and who are willing to learn CSS by doing a project, looking at CSS code and online reference manuals.
• Ideally, a teacher also should assign a text formatting task, during or before assigning this tutorial for reading).

Global settings

A longer text should be easy to read on the screen. It may or may not include some "purely esthetic" features.

Universal settings: fonts and back-ground color

The universal selector can be used to set properties that affect all HTML elements. Typically one could define the font and maybe a background color.

The following CSS will define a preferred font, i.e. Cambria, which is a Microsoft True Type font that is both good for reading and printing. Since this font isn't available on all machines, we use the more widely available Georgia and finally serif as fall-backs. In addition, we define a pale yellow background color.

    * {
      font-family: Cambria, Georgia, serif;
      background-color: #ffffe0;
      }

The Universal "*" selector should not be used to set margins, since this also would affect inline elements such as the HTML <i></i> tag.

Body settings

The body selector should be used to set margins. In addition, one also can define text alignment:

    body {
      text-align:justify;
      margin-left:5%;
      margin-right:5%;
      }

Styling "normal" HTML elements

Titles

Titles can be either centered, aligned left or out-dented left. In novels, titles are usually centered. In addition, it may be appropriate to add more space before the titles, but proportionally to its level.

     h1,h2,h3,h4,h5,h6 { 
      text-align: center; 
      }

      h1 {
      margin-top: 3cm;
      }
      
      h2 {
      margin-top: 2cm;
      }

Numbered titles

As any other HTML elements, hx elements can be numbered. Do do so automatically, you can use the content property in conjunction with the :before pseudo-element and counter-reset and counter-increment.

However, numbering using these CSS features only works with Firefox 3.0 (or later), IE 8 (or later).

Let's look at a simple example:

body {
      counter-reset: chapter;
      }
h2    {
      margin-top: 2cm;
      counter-increment: chapter;
      }
h2:before {
      content: "Chapter " counter(chapter) ": ";
      }

The CSS code works in the following way:

• We define a counter variable named "chapter" and reset it to 0. This has to be done within a CSS rule that will only fire once at the beginning. We used the body rule as you can see above.

counter-reset: chapter;

• Each time, the browser encounters an h2 tag, we will increase this chapter counter.

counter-increment: chapter;

• Finally we insert the numbering using the content property, i.e. the word "Chapter " followed by the counter, followed by ": ".

content: "Chapter " counter(chapter) ": ";

Remarks:

• We also could implement a decimal numbering of chapters, sections and sub-sections using the same principle. Assuming that chapters are represented by h1 and sections by h2, section counters then would have to be reset within the h1 tag.
• The :content property also serves other purposes, e.g. it could be used to insert beginning and end quotes in a citation.

Paragraphs

In most simple texts, there are four kinds of paragraphs:

• Normal paragraphs
• First paragraphs after a title
• Block quotes
• Pre-formatted elements like computer code

(1) Normal paragraphs are indented in Novels and also include some spacing in between. In addition, we might space out individual lines a bit. To do so, we could use a CSS rule like this:

p { 
   text-indent:   1.5em;
   margin-top:    .75em;
   margin-bottom: .75em;
   line-height: 1.3;
   }

em is a unit popular in typography. It represents the typical length of the letter "m".

(2) First paragraphs after a title should not be indented. Since by default we defined all paragraphs to be indented, we now have to override this. In our case, titles are always defined as h2. Adapt to your text.

     h2+p {
      text-indent: 0em;
     }

• h2+p means: select paragraphs that come right after an h2 tag.

(3) For block-quotes, you simply could use the HTML blockquote element. Sometimes, longer quotes are made a bit smaller and the font could be italic. By default blockquotes are already indented, but you can just your own margins.

blockquote {	
      font-size: 90%; 
      margin-left: 20%; 
      margin-right: 20%;
      }

(4) Computer code is usually displayed with the HTML pre tag and included in some kind of box. Since lines are kept "as is" you should be careful to insure that lines are not too long. An alternative solution is to insert the code withing a scrollable HTML textarea form element.

The following example shows how to style pre elements with a box. Since the box will be glued to the text, you also should add some padding. In addition you could use a fixed sized font such as courier making it quite a bit smaller.

      pre.copyright { 
      font-style: normal; 
      font-family: courier, fixed;
      font-size: 80%; 
      border: 2px dotted black;
      padding: 5px;
      margin-left: 0%;
      }

Styling "special" elements

Using class selectors

Most often you will have to use so-called class selectors for styling special elements. E.g. below is an example that implements a tag for "fine print".

<p class="fineprint">
 This text is a reformatted version of the The Project Gutenberg EBook
 <a href="http://www.gutenberg.org/2/7/8/2781/">Just So Stories</a>.
</p>

 p.fineprint {
      font-size: 70%;
      text-indent: 0em;
      }

The following example shows a similar approach. Instead of using a p tag, we use a div tag. Since div doesn't include any formatting information (except for being a so-called block), it will just inherit the properties defined in its parents, i.e. the body tag as well as the Universal selector. In our case, these don't define any indentation.

<div class="fineprint">
 This text is a reformatted version of the The Project Gutenberg EBook
 <a href="http://www.gutenberg.org/2/7/8/2781/">Just So Stories</a>.
</div>

 div.fineprint {
      font-size: 70%;
      }

Poetry

Poetry is displayed with line breaks and extra vertical spacing between strophes. Poetry often uses an artistic font, i.e. it should convey a distinct style and appearance. For now we shall not describe more advanced techniques.

In our example we simple embed the poetry in a pre tag, added an extra left margin, and then used an italic fantasy font.

     pre { 
      font-style: italic; 
      font-family: "Comic Sans", fantasy;
      font-size: 90%; 
      margin-left: 20%;
      }

Other issues

Fancy first letters

Sometimes, it's a nice touch to modify the first letter of an element. Below we show and example that will modify only the first letter of paragraphs that follow an h2 heading element.

 h2+p:first-letter {
      font-size: 200%;
      color: blue;
      font-family: "Goudy Old Style", Georgia, serif;
      line-height: 50%;
      }

If you do so, you should compensate for the line-height, i.e. make it smaller.

Using a picture as background image for an element

To insert image as background, use:

background-image: url(sun.png);

If you don't want to repeat it:

background-repeat: no-repeat;

High-lighting text

In order to define highlighted text, it's best to use the strong HTML tag and then change its default appearance. Alternatively, you could use a span tag and add a class attribute.

<p>Now this is the next tale, and <strong>it tells how the Camel got his big hump</strong>.</p>

strong { 
 background-color: yellow;
 font-style: normal;
 }

Since we made the background yellow, we can remove the bold font.

Adding lines before and after a title

You might be tempted to insert hr elements into your HTML code, but this is not such a good idea since later you may be tempted to remove them again.

A good solution is to add borders on top and at the bottom. You also can add some padding between the text and the border lines:

h1 {
 border-top: 5px solid blue;
 padding-top: 10px;
 border-bottom: 1px solid blue;
 padding-bottom: 5px;
 }

Word and letter spacing

Word and letter spacing should be used carefully, since in principle, fonts are already designed to be readable and to look nice. However, typographers sometimes adjust just two letters, e.g. a "Ti". Adjusting spacing between two letters is called kerning:

CSS properties for word and letter spacing:

 
 word-spacing: 0.3em;
 letter-spacing: 0.1em;

It's best to relative measures such as em (and not px nor pt) since em scales nicely when the user decides to read with larger fonts.

Example:

 
 h1,h2,h3,h4,h5,h6 { 
      text-align: center; 
      letter-spacing: 0.1em;
      }

Forcing word breaks

Long words can cause a problem. The CSS3 word-wrap property allows words to wrap. However, the result may not be convincing either.

  word-wrap: break-word;

Removing space between HTML elements

In our example we rather added space to elements. Sometimes, you need to do the contrary, in particular when space is tight (e.g. in mobile devices)

h2 {
  margin-bottom: 0;
  padding-bottom: 0;
}

To add

• Multiple (CSS3) columns
• Side headings
• Graphic manipulations of headings

Links

• SitePoint CSS reference
• Christopher Schmitt (2009), CSS Cookbook, Third Edition, O'Reilly. (Shop/O'Reilly).