CSS text styling tutorial: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
m (Created page with "{{Incomplete}} {{under construction}} {{Web technology tutorial|Beginners}} <pageby nominor="false" comments="false"/> <div class="tut_goals"> ; Learning goals * Understand the ...")
 
m (Text replacement - "<pageby nominor="false" comments="false"/>" to "<!-- <pageby nominor="false" comments="false"/> -->")
 
(23 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{Incomplete}}
{{Incomplete}}
{{under construction}}
{{Web technology tutorial|Beginners}}
{{Web technology tutorial|Beginners}}
<pageby nominor="false" comments="false"/>
<!-- <pageby nominor="false" comments="false"/> -->


<div class="tut_goals">
<div class="tut_goals">
; Learning goals
; Learning goals
* Understand the structure of cascading stylesheet (CSS) rules
* Be able to style text-centric HTML pages (e.g. articles, tutorials, novels)
* Learn how to include CSS in HTML files and/or how to associate a CSS file with HTML
 
* Understand how to use moderatly complex selectors
; Concurrent
* Learn how to style text elements
* [[CSS tutorial]]
* Deal with different media (and browers)
* [[Font readability]]
* Be able to find CSS documentation (selectors, properties, compatibility tables)
; Prerequisites
* Basic HTML, e.g. the [[HTML and XHTML elements and attributes]] tutorial
* [[CSS tutorial]] (i.e. basic knowledge about CSS rules)


; Moving on
; Moving on
Line 20: Line 15:
* [[CSS for XML tutorial]]
* [[CSS for XML tutorial]]
* [[DHTML]]
* [[DHTML]]
* [[CSS for print tutorial]]
; Level and target population
; Level and target population
* Beginners
* Beginners
; Teaching materials
* Example text: http://tecfa.unige.ch/guides/css/ex/just-so-stories.html
; Remarks
; 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 links#General_Tutorials|CSS tutorials]] on the web. This text is intended for students who also must learn principles and who are willing to learn more CSS by looking at CSS code and online reference manuals. Ideally, a teacher also should introduce CSS through hands-on lab activities (after, during or before assigning this tutorial for reading).
* 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 links#General_Tutorials|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).
</div>
 
== 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.
 
<source lang="CSS">
    * {
      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 ===
 
Use the ''body'' selector should for setting global margins. In addition, you also can define text alignment:
 
<source lang="CSS">
    body {
      text-align:justify;
      margin-left:5%;
      margin-right:5%;
      }
</source>
 
== 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.
 
<source lang="CSS">
    h1,h2,h3,h4,h5,h6 {
      text-align: center;
      }
 
      h1 {
      margin-top: 3cm;
      }
     
      h2 {
      margin-top: 2cm;
      }
</source>
 
=== Numbered titles ===
 
As any other HTML elements, h''x'' 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:
 
<source lang="CSS">
body {
      counter-reset: chapter;
      }
h2    {
      margin-top: 2cm;
      counter-increment: chapter;
      }
h2:before {
      content: "Chapter " counter(chapter) ": ";
      }
</source>
 
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:
<source lang="CSS">
p {
  text-indent:  1.5em;
  margin-top:    .75em;
  margin-bottom: .75em;
  line-height: 1.3;
  }
</source>
 
''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.
<source lang="CSS">
    h2+p {
      text-indent: 0em;
    }
</source>
* ''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.
<source lang="CSS">
blockquote {
      font-size: 90%;
      margin-left: 20%;
      margin-right: 20%;
      }
</source>
 
(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.
<source lang="CSS">
      pre.copyright {
      font-style: normal;
      font-family: courier, fixed;
      font-size: 80%;
      border: 2px dotted black;
      padding: 5px;
      margin-left: 0%;
      }
</source>
 
== 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".
 
<source lang="XML">
<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>
</source>
 
<source lang="CSS">
p.fineprint {
      font-size: 70%;
      text-indent: 0em;
      }
</source>
 
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.
<source lang="XML">
<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>
</source>
<source lang="CSS">
div.fineprint {
      font-size: 70%;
      }
</source>
=== 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.
<source lang="CSS">
    pre {
      font-style: italic;
      font-family: "Comic Sans", fantasy;
      font-size: 90%;
      margin-left: 20%;
      }
</source>
== 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.
<source lang="CSS">
h2+p:first-letter {
      font-size: 200%;
      color: blue;
      font-family: "Goudy Old Style", Georgia, serif;
      line-height: 50%;
      }
</source>
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.
<source lang="xml">
<p>Now this is the next tale, and <strong>it tells how the Camel got his big hump</strong>.</p>
</source>
<source lang="CSS">
strong {
background-color: yellow;
font-style: normal;
}
</source>
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:
<source lang="CSS">
h1 {
border-top: 5px solid blue;
padding-top: 10px;
border-bottom: 1px solid blue;
padding-bottom: 5px;
}
</source>
=== 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:
<source lang="CSS">
word-spacing: 0.3em;
letter-spacing: 0.1em;
</source>
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:
<source lang="CSS">
h1,h2,h3,h4,h5,h6 {
      text-align: center;
      letter-spacing: 0.1em;
      }
</source>
=== 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.
<source lang="CSS">
  word-wrap: break-word;
</source>
=== 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)
<source lang="CSS">
h2 {
  margin-bottom: 0;
  padding-bottom: 0;
}
</source>
=== To add ===
* Multiple (CSS3) columns
* Side headings
* Graphic manipulations of headings
== Links ==
* [http://reference.sitepoint.com/css SitePoint CSS reference]
* Christopher Schmitt (2009), CSS Cookbook, Third Edition, O'Reilly. [http://shop.oreilly.com/product/9780596155940.do (Shop/O'Reilly)].
[[Category: CSS]]

Latest revision as of 17:32, 22 August 2016

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

Use the body selector should for setting global margins. In addition, you 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