• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_certifying

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 12/11/2018

Text formatting

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

We've now come to a chapter that should be of great interest to you.

No, "text formatting" has nothing to do with the destruction of all data on your hard disk! It simply means that the text appearance is going to be changed (or "formatted").

There's nothing particularly surprising: CSS is still involved and we're going to reuse what we learned in the previous chapter. We're going to work directly in the .css file we created.

This chapter will provide an opportunity to find out many CSS properties: we're going to see how to change the text size, change the font, align the text, etc.

Size

To change the text size, you use the CSS font-size property. But how do you specify the text size? This is where things get tough as several techniques are available to you:

  • Specify an absolute size: in pixels, inches or millimeters. Although this method is very accurate, it is advisable only to use it when absolutely necessary, as you may well specify a size too small for some readers.

  • Specify a relative size: as a percentage, "em" or "ex", this technique has the advantage of being more flexible. It can be adapted more easily to the size preferences of visitors.

An absolute size

To specify an absolute size, pixels are generally used. So for a text 16 pixels high, you have to write:

font-size: 16px;

The letters will have a size of 16 pixels, as shown in the figure below.

A 16-pixel high letter
A 16-pixel high letter

Here's an example of how to use it (put this code in your .css file):

p
{
    font-size: 14px; /* 14-pixel paragraphs */
}
h1
{
    font-size: 40px; /* 40-pixel titles */
}

And the result is shown in the figure below.

Various text sizes
Various text sizes

A relative value

This is the recommended method as the text then adapts more easily to the preferences of all visitors.

There are several ways to specify a relative value. You can, for example, write the size as words like this:

  • xx-small : tiny ;

  • x-small : very small ;

  • small : small ;

  • medium : medium ;

  • large : large ;

  • x-large : very large ;

  • xx-large : errr... huge.

You can try using these values in your CSS code:

p
{
    font-size: small;
}
h1
{
    font-size: large;
}

This technique has a drawback, however: there are only seven sizes available (as there are only seven names). Fortunately, there are other ways. My favourite technique is to specify the size in "em".

  • If you write 1em, the text has a normal size.

  • If you want to make the text larger, you can enter a value greater than 1, like 1.3em.

  • If you want to make the text smaller, enter a value less than 1, like 0.8em.

Example:

p
{
    font-size: 0.8em;
}
h1
{
    font-size: 1.3em;
}

Other units are available. You can try "ex" (which works on the same principle as em but has a smaller base) and the percentage (80%, 130%, etc.).

Font

Ah... The font... This can be tricky.

Indeed, there's a problem: for a font to be displayed properly, all Internet users have to have it. If an Internet user doesn't have the same font as you, their browser will use a default font (a standard font) that may not be at all what you're expecting.

The good news is that since CSS 3, it is now possible to get the browser to automatically download a font. I'll explain how to do this in a second step.

Changing the font used

The CSS property that allows you to specify the font to use is font-family. You have to write the font name like this:

tag
{
    font-family: font;
}

To avoid problems if the Internet user doesn't have the same font as you, however, several font names, separated by commas, are generally specified:

tag
{
    font-family: font1, font2, font3, font4;
}

The browser will first try to use font1. If it doesn't have it, it will try font2. If it doesn't have it, it will go on to font3, and so on.
As a last resort, you generally specify serif, which corresponds to a default font (which only applies if no other font has been found).

But what, you may ask, are the most common fonts that you have the "right" to use?
Here's a list of fonts that work well on most browsers:

  • Arial ;

  • Arial Black ;

  • Comic Sans MS ;

  • Courier New ;

  • Georgia ;

  • Impact ;

  • Times New Roman ;

  • Trebuchet MS ;

  • Verdana.

The figure below shows you what these fonts look like.

Various fonts
Various fonts

So, if I write:

p
{
    font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;
}

… this means: "Set the Impact font or if that's not found, Arial Black, otherwise Arial, or otherwise Verdana, or if none of these worked, set a standard font (sans-serif)".

In general, it's a good idea to specify a choice of three or four fonts (+ serif or sans-serif) to make sure that at least one of them is found on the visitor's computer.

Using a custom font with @font-face

I find the choice of fonts too limited.
How can I use my favourite font on my website?

For a long time, this was not possible. Now, with CSS3, there is fortunately a way of using any font on your website. This works well with most browsers.

But beware, there are a few hitches (otherwise it would be just too good to be true):

  • Your visitors' browser will have to automatically download the font file whose stored size may be 1 MB or more...

  • Most fonts are subject to copyright so it's not legal to use them on your website. Fortunately, there are websites like fontsquirrel.com and dafont.com that allow you to download a number of copyright-free fonts. In particular, I recommend fontsquirrel.com as it allows you to download ready to use packs for CSS 3.

  • There are several formats of font files and they do not work on all browsers.

Here are the existing font file formats that you need to know:

  • .ttf: TrueType Font. Works with IE9 and all other browsers.

  • .eot: Embedded OpenType. Works with all versions of Internet Explorer only. This is a proprietary format, produced by Microsoft.

  • .otf: OpenType Font. Does not work with Internet Explorer.

  • .svg: SVG Font. The only format supported on iPhones and iPads for the time being.

  • .woff: Web Open Font Format. New format designed for the Web, which works with IE9 and all other browsers.

To define a new font in CSS, you have to declare it like this:

@font-face {
    font-family: 'MySuperFont';
    src: url('MySuperFont.eot');
}

The font file (in this case MySuperFont.eot) must then be located in the same folder as the CSS file (or in a subfolder, if you use a relative path).

I thought there were several font formats?

Yes, and furthermore .eot only work in Internet Explorer. The ideal solution is to provide several formats for the font: the browser will download the one it can read. Here's how to specify several formats:

@font-face {
    font-family: 'MySuperFont';
    src: url('MySuperFont.eot') format('eot'),
         url('MySuperFont.woff') format('woff'),
         url('MySuperFont.ttf') format('truetype'),
         url('MySuperFont.svg') format('svg');
}

To test how this works, I suggest you download a font from Font Squirrel, for example Learning Curve Pro. Click "@font-face Kit", which will allow you to download a ready to use kit with all the formats for this font.

Your CSS file will in the end look like this:

@font-face { /* Define a new font called LearningCurveProRegular */
    font-family: 'LearningCurveProRegular';
    src: url('LearningCurve_OT-webfont.eot');
    src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'),
         url('LearningCurve_OT-webfont.woff') format('woff'),
         url('LearningCurve_OT-webfont.ttf') format('truetype'),
         url('LearningCurve_OT-webfont.svg#LearningCurveProRegular') format('svg');
}

h1 /* Use the font that you've just specified for the titles */
{
    font-family: 'LearningCurveProRegular', Arial, serif;
}

The first (large) @font-face section defines a new font name that can be used in the CSS file. We then use this font name with the font-family property, that we know about, to change the appearance of the titles <h1>. You can see the result in the figure below.

Display of a customized font
Display of a customized font

Italic, bold, underlined…

CSS has a series of standard text formatting properties. We're going find out here how to display text in bold, italic, underline, etc. and in doing so we're going to see it's even possible to make it blink!

Setting to italics

Hang on a bit! I thought that the <em>  tag was used to display text in italics?!

I never said that.
If you have any doubts, go back to the previous chapters, but I never said that the <em> tag was used to set text to italics (as in the same way, I never said that <strong> was used to make text bold).

<em>, get it firmly into your head, is intended to emphasize words. This means that the words it surrounds are fairly important.
To represent this importance, most browsers choose to display the text in italics, but it's not compulsory.

CSS, for its part, actually allows you to say: "I want this text to be in italics". For example, there's nothing stopping you from deciding to put all your titles in italics.

Specifically, to set text to italics in CSS, you use font-style which can take three values:

  • italic: the text will be set to italics.

  • oblique: the text will be displayed obliquely (letters are tilted and the result is slightly different from actual italics).

  • normal: the text will displayed in normal font (as default). This allows you to cancel italics. If you want the text between <em> to be no longer in italics, for example, you would write:

em
{
    font-style: normal;
}

So in the example below, I've used font-style to italicize all my titles <h2>:

h2
{
    font-style: italic;
}

Bolding

So what if we go on to bolding?
There again, remember that it's not <strong> that bolds the text (its purpose is to indicate that the text is important, and as a result the browser usually displays text in bold). In CSS, you can apply bolding to titles, some whole paragraphs, etc. It's up to you.

The CSS property to bold is font-weight and takes the following values:

  • bold: the text will be in bold;

  • normal: the text will displayed normally (as default).

Here's an example of how to write titles in bold:

h1
{
    font-weight: bold;
}

Underlining and other decorations

The associated CSS property is aptly named: text-decoration. It allows you to underline text, among other things, but not just this. Here are the various it can take:

  • underline: underlined.

  • line-through: struck through.

  • overline: line above.

  • blink: blinking. Doesn't work in most browsers.

  • none: normal (as default).

This CSS code will allow you to test the effects of text-decoration using underline:

h1
{
    text-decoration: underline;
}

And the result is shown in the figure below.

Formatting text
Formatting text

Alignment

The CSS language lets you set all known text alignments: left, centered, right and justified.

It's quite straightforward. You use the text-align property and specify the desired alignment:

  • left: the text will be left-aligned (this is the default setting).

  • center: the text will be centered.

  • right: the text will be right-aligned.

  • justify: the text will be "justified". Justifying text makes it take up the whole possible width without leaving any white space at the ends of lines. Newspaper articles, for example, are always justified.

Take a look at the various alignments in this example:

h1
{
    text-align: center;
}

p
{
    text-align: justify;
}

.signature
{
    text-align: right;
}

The result is shown in the figure below.

Text alignments
Text alignments

Floating items

CSS allows us to float an item around the text. This is also called "wrapping".

To give you a good idea of what we're talking about, the figure below shows what we're going to learn to do.

A floating image surround by text
A floating image surround by text

I guess that the burning question that's now on your mind is: "But what's the magical property that makes things float?".
The answer is... float. This property can take two very simple values:

  • left: the item will float on the left.

  • right: the item will float on the right! Yes, well done.

Floating items are very simple to use:

  1. You just apply a float to a tag.

  2. Then you continue to write the text following on normally.

Making an image float

Here, we're going to learn how to make an image float. Here's the HTML code that we have to enter first:

<p><img src="flash.gif" class="floatingimage" alt="Floating image" /> This is a normal paragraph text, written after the image wrapped around it as the image is floating.</p>

Here's the only piece of CSS code that you have to type, which makes the image float on the left:

.floatingimage
{
    float: left;
}

Try and make the image float on the right, it's dead easy: just specify the right value and there you are!

Stopping a floating effect

When you place floating image, the text wraps around it. But, after while, what if you want the text to continue underneath the floating image? You could combine several <br /> tags in sequence but this wouldn't be very tidy or elegant...

We would basically like to obtain the same result as the figure below.

The text under the image ignores the float property
The text under the image ignores the float property

CSS actually has property that allows you to say: "Stop, this text should be below the floating item and not next to it." This is the property clear, which can take these three values:

  • left: the text continues below after a float: left;

  • right: the text continues below after a float: right;

  • both: the text continues below, whether either after a float: left; or after a float: right;.

To simplify, we're always going to use the clear: both, which works after a float to the left and after a float to the right (so it works every time). To illustrate how it works, we're going to take the following HTML code:

<p><img src="flash.gif" class="floatingimage" alt="Floating image" /></p>
<p>This text is written next to the floating image.</p>
<p class="below">This text is written under the floating image.</p>

And this CSS code:

.floatingimage
{
    float: left;
}
.below
{
    clear: both;
}

And that's it.

You apply a clear: both; to the paragraph you want to see continue under the floating image and there you are!

Summing up

  • You change the text size with the CSS font-size property. You can specify the size in pixels (16px) in "em" (1.3em), as a percentage (110%), etc.

  • You change the text font with font-family. Be careful, only a few fonts are known by all computers. However, you can use a custom font with the @font-face instruction: this will force the browser to download the font of your choice.

  • There are many text formatting properties: font-style for italics, font-weight for bolding, text-decoration for underlining, etc.

  • The text can be aligned with text-align.

  • An image can be wrapped ("surrounded") with text using float.

Exemple de certificat de réussite
Exemple de certificat de réussite