CSS text styling tutorial

The educational technology and digital learning wiki
Jump to navigation Jump to search

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
Moving on
Level and target population
  • Beginners
Teaching materials
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 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;
      }

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

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 blockquotes, 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 usally 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 courrier 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

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.

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

Links

Retrieved from "https://edutechwiki.unige.ch/mediawiki/index.php?title=CSS_text_styling_tutorial&oldid=35825"