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
- Moving on
- 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 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, add an extra left margin, and then put the text in italics.
pre {
font-style: italic;
font-size: 90%;
margin-left: 20%;
}