CSS text styling tutorial

This article or section is currently under construction

In principle, someone is working on it and there should be a better version in a not so distant future.
If you want to modify this page, please discuss it with the person working on it (see the "history")

<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;
      }
<source>

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

=== Body settings ===

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

<source lang="CSS">
    body {
      text-align:justify;
      margin-left:5%;
      margin-right:5%;
      }

Styling "normal" HTML elements

Titles

Titles can be either centered, aligned left or outdented 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;
      }

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 "chaper" 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.

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) ": ";

Note: The :content property also serves other purposes, e.g. it could be used to insert beginning and end quotes in a citation.