[Site map] You are here --- > Newbies Paradise > Tutorials > Official > Website > Reading a tutorial

Text formatting with CSS (part 2/2)

	Author : M@teo21 Creation : : on 01/23/2007 11:13:24 AM Last modification: : on 01/23/2007 11:36:23 PM Rate and comment this tutorial Print this tutorial

Welcome to the second part of these two chapters about text formatting.

CSS is still full of surprises, let's not waste time, and get started!

Chapter Contents :

Style effects
Colours
Background
Quiz

Style effects

CSS provides some surprising and nice properties which can provide a better layout for your webpages (and that could be really useful

).
These properties include making your text bold, italic, underlined, capitalized or even blinking!

Italic

Hey, what's that? I thought the <em> tag meant italic?

I've never said that!

Go back to the former chapters if you do not believe me, but I have never said that the <em> tag was used to make a text italic (nor did I ever say that the <strong> tag was used to make bold text).

Always keep this in mind: the meaning of <em> is: emphasize. It only says that the words it contains are important.
Most browsers emphasize text by setting it italic but it is not always like that.

Making your text italic with CSS must be done one for means of presentation, which is the lone job of CSS.

Concretely, a text can be put in italic with the CSS by using the font-style property, which can take three possible values:

italic: the text shall be written in italic.
oblique: the text shall be written in italic. Again? Well...Actually, there is a very small difference between the two of them but that is not important. Choose the one you like.
normal: the text shall be normal (default value). That is useful to cancel an "italic" value. For instance, if you do not want the text inside <em> to be in italic, you have to write:

Code: CSS
1 2 3 4
em { font-style:normal; }

On the following example, I use font-style to set all my <h2> titles italic:

Code: CSS

h1
{
   text-align: center;
   font-family: Arial, "Times New Roman", Verdana, serif;
}
h2
{
   font-style: italic; /* h2 titles will be in italic! */
   text-indent: 30px; /* They will be indented */
   font-family: Arial, "Times New Roman", "Arial Black", Verdana, serif;
}

Try it!

Actually, it is easy to use, there is no need to talk about it any longer.

Bold

What if we talk about bold text?
I will not make the same speech as above for the <strong> tag. Making bold text with CSS may be used for titles, or entire paragraphs... The choice is yours.

The CSS property used for bold text is font-weight, and can take the following values:

bold
normal

We can use it to make all paragraphs bold, as you may see on the following example:

Code: CSS

p
{
   font-weight: bold;
}

Try it!

Capital letters

CSS can have interesting effects on text, through the automatic modification of capital letters.
Here we will see two CSS properties which act on them.

Let's begin with the font-variant property, a simple one which can only take two different values:

small-caps: the text shall be written in small capital letters.
normal: the text shall be written normally (default value).

Code: CSS

p
{
   font-variant: small-caps;
}

Try it!

You will write your paragraph as usual, and the CSS will transform all of it automatically in small caps. Isn't that great?

But there is a second CSS property which works on capital letters: text-transform. It can take the following values:

uppercase: the whole text shall be in capital letters.
lowercase: the whole text shall be in normal letters.
capitalize: the first letter of each word shall be capitalized.
none: nothing's changed (default value).

You have been waiting for it: I will give you the related xHTML code.

Pay particular attention to how I use classes to create a take_a_shout class.

Code: HTML

<h1>I am really angry...</h1>

<p>...but I will try to keep calm.<br />
<span class="take_a_shout">No! This time I just cannot! Who dared put mayonnaise on my French fries?<br />Blasphemy!</span></p>
<p class="whisper">I AM MURMURING THIS PARAGRAPH, THOUGH IT IS UPPERCASE IN THE xHTML CODE.</p>

Code: CSS

h1
{
   text-align: center;
   font-family: Arial, "Times New Roman", Verdana, serif;
   text-transform: capitalize; /* The first letters of the title words shall be capitalized */
}
.take_a_shout
{
   text-transform: uppercase; /* I want to be heard: I put it all in capital letters */
}
.whisper
{
   text-transform: lowercase;
   font-style: italic; /* Murmurs shall be lowercase and italic */
}

Try it!

Do you see how it works? I shouted with capital letters, and I used CSS to put it all in small letters.

This text-transform property is really useful whenever you need to change a text appearance in a moment!

As you see, CSS does not only align text and change font. It can also directly act on an already written text to change its appearance.

What about some decoration?

This CSS property has been well-named: text-decoration.
It can, for instance, underline the text. These are the different values it can take:

underline
line-through
overline
blink: The text shall blink, but this does not work with Internet Explorer. It works perfectly on all other browsers, including Mozilla Firefox.
none: default value.

You will be able to test the effects of text-decoration with this CSS code:

Code: CSS

h1
{
   text-align: center;
   font-family: "Arial Black", Arial, "Times New Roman", serif;
   text-decoration: blink; /* The title will blink (does not work with Internet Explorer) */
}
.underline
{
   text-decoration: underline;
}
.linethrough
{
   text-decoration: line-through;
}
.overline
{
   text-decoration: overline;
}

And the corresponding xHTML:

Code: HTML

<h1>Do not you miss this!</h1>

<p>The CSS <em>text-decoration</em> property allows you to decorate text:<br />
<span class="underline">underlining it</span>...<br />
<span class="linethrough">passing a line through it</span>...<br />
...or <span class="overline">overlining it</span>.</p>

Try it!

Do not forget that it is also interesting with CSS to put more than one property on a class. Here I created an "underline" class which does nothing but underlining for this example, but classes are usually created with many properties: for instance, an "important" class that would underline the text, put it in bold, and write it bigger.

Colours

Let us enter the huge world of
colours

How's that, huge! o_O

Well, there are many ways to set a colour, like in the case of the text size. We'll now see all these ways that CSS offers.

The first thing to know is the property that changes the text colour: color (quite easy to remember

), you have already seen it in the intoduction to CSS.

Set the name of the colour

The easiest way is to choose a colour and to type its name.
But unfortunately there are only 16 "standard" colours. There are some other "unofficial" colour names but they're not working with all the browsers, so I won't show them to you.

Here are the 16 "standard" colours that you can display only by typing their name:

Color name	Color
white
silver
gray
black
red
maroon
lime
green
yellow
olive
blue
navy
fuchsia
purple
aqua
teal

You can learn them by heart if you want, they are pretty important.

Here is the CSS test:

Code: CSS

h1
{
   text-align: center;
   font-family: Arial, "Arial Black", "Times New Roman", serif;
   text-decoration: underline;
   color: green; /* The title in green (why not!) */
}
p
{
   text-indent: 20px;
   color: blue; /*  Paragraphs in blue */
}
strong /* ... and important words in blinking red! */
{
   color: red;
   text-decoration: blink;
}

... and the xHTML page that goes with it:

Code: HTML

<h1>With all colours</h1>

<p>Hello and welcome to this colourful page! I use <strong>standard colours names</strong> in my CSS document to brighten my page.</p>

<p>Using the <em>color</em> CSS attribute, I can <strong>automatically</strong> convert all my important words ( in a "strong" tag ;) ) to blinking red texts! </p>

Try it!

The important texts in blinking red ... well yeah, who said you couldn't use your imagination, after all!

The hexadecimal notation

With 16 standard colours, we don't have a big choice of colours, knowing that most of the screens can display 16 million of colours.
On the other hand notice that if we had to give a name to 16 million colours...

Fortunately, there are many ways in CSS to choose a colour within all those that exists. The first way that I will show you is the hexadecimal notation.
I won't stay long on this way because it is not easy to use, but it stays one of the widespread ways to indicate a colour. In fact, before CSS appeared, it was the only way to set a colour.

Fortunately since then, easier ways to set a colour were invented.

A colour name in hexadecimal, is something like this: #FF5A28. So, it's a combination of letters and numbers that indicates a colour.
We must always start by writing a sharp (#), followed by 6 letters or numbers starting from 0 to 9 and A to F.
These letters and numbers work two by two. The first two specify the value of red, the second two the value of green, the last two the value of blue. When we mix these bits of colours (Red-Green-Blue) we get the colour we want.

Thus, #000000 corresponds to the black colour and #FFFFFF to the white colour. But, don't come asking me which is the combination to get the colour of "sunset", I just don't know

Some image editing softwares, like Photoshop, might indicate the hexadecimal value of a colour. You'll just have to copy/paste the value of the colour you like in your CSS document.

For example, this is how we display white colour using hexadecimal notation:
color:#FFFFFF;

The RGB method

What is RGB! RGB stands for Red-Green-Blue. Just like the hexadecimal notation, we must define the value of red, green and blue to choose a colour.

What!! We'll still use that red-green-blue stuff!

Yeah, but you'll see that it's quite an easy way to set a colour and a drawing software like Paint will give you the RGB value of the colour you want. Just follow these steps:

Launch Microsoft Paint from the start menu.
Go to Colors / Edit colours:
A window opens. Click on the "Define custom colours" button. In the section that appears on your right, move the cursor to select the colour you want.
Let's say that I have this crazy need to write my titles <h1> in girlish pink ( just an example ). I select the colour in the window, like this:
I'll copy the Red-Green-Blue values indicated at the bottom-right corner of the window ( 243-65-243 in this case), and I'll paste these values into my CSS document, like this
Code: CSS
1 2 3 4
h1 { text-align: center; color: rgb(243,65,243); }
Try it!

And it's done!

As you can see in the example, to use the RGB method you must type rgb(Red, Green, Blue) where "Red, Green and Blue" stand for the corresponding values.
Note that those values are limited from 0 to 255. If you type a "325" red value, there will be a little problem.

And the Bonus Track...

Here is a little easy free software which allows you to help you to choose your colours. It's called "La boîte à couleurs" ("The Colors Box" in English), and it looks like this :

It's in French (which is not really a matter because there isn't much text actually) and you can download it for free directly from Newbies Paradise: that would be a pity if you didn't try it out

Download "La Boîte à Couleurs" (1,45 Mo)

There are several tabs, as you can see. I advise you to stay on the first one or to go in the "Visuel" one ("Visual" in English). The others are not really interesting, especially the "Noms" (Names) one which doesn't always provide a correct name for your colour (remember there are only 16 "standard" names in CSS).
In the right-bottom corner, you can copy the hexadecimal value of your colour (remember that it always begins with a #) or you can copy the Red-Green-Blue values in your CSS document.

Finally, I'll show you one of the most interesting possibilities of that software: using the pipette in the top-right corner allows you to get the value of any colour of your screen.
Enjoy!

Background

Contrary to what one may think, a background doesn't always represent the background of a whole web page. A background can also be specified uniquely for titles, or paragraphs, or even certain words of a paragraph.

First of all, you need to know there are two types of background:

colour compounded backgrounds
image compounded backgrounds

We will start by the background colour in the first place, then we'll see how to get a background image.

The background colour

To specify a background colour, the CSS background-color property is utilized. It's used the same way as the color property, that means you can enter the name of a colour, write it with the hexadecimal notation or even use the RGB method.

To specify the background colour of the web page, you have to work on the <body> tag. Yes, <body> corresponds to the whole web page, modifying its background colour will modify the web page background colour.
Look closely at this CSS file:

Code: CSS

body /* We're working on the body tag, so on the WHOLE page */
{
   background-color: black; /* The background of this page will be black */
   color: white; /The text of the page will be white */
}

Try it!

Hey, you specified a white text colour for the <body> tag, and all the <p> paragraphs and <h1> titles have taken this colour. How is that possible?

That's a good question. I wanted to take advantage of this opportunity to tell you about that. This phenomenon is called inheritance. Don't worry, nobody died

In CSS, if you apply a style to a tag, every tag located inside this tag will take the same style.
Whew? o_O

In fact it's very easy to understand. The <body> tag, as you know it, contains among others the paragraph tag <p> and the title tag <h1>.

If I apply a black background colour and a white text colour to the <body> tag, all my titles and paragraphs will also have a black background colour and a white text colour... It's the phenomenon called inheritance; it is said that the tags located inside another one "inherit" its properties.

Does that mean that ALL the text of my web page will inevitably be written in white?

No, not compulsorily. On the one hand, if you specify further that you want red titles, this style will have the priority and your titles will then be red. On the other hand, if you don't specify anything in particular, (as we have just done not long ago), then your titles will inherit the white colour.
This doesn't only work for the colour, we must agree on that point. All CSS properties will be inherited: you can, for instance, precise a text size of "1.3em" for the <body> tag, and all your titles and paragraphs will be of that particular size.

Here is an example where I show you how to "cancel" inheritance so that our titles are not written in white. I took the opportunity to create a "highlight" class which put the text on a yellow background to give an impression of highlighting.

Code: CSS

body
{
   background-color: black;
   color: white; /* All the tags contained in body will present white coloured text... */
}
h1
{
   color: red; /* ... unless I expressly request a change of colour further */
}
.highlight /* A style which enables to highlight some of the words of a text for instance */
{
   background-color: yellow;
   color: black; /* The highlighted text will be written in black because white text doesn't match with yellow background at all ;o) */
}

Try it!

As you can see, we haven't mentioned any particular colour for paragraphs (<p>), so they have inherited the white colour. Conversely, the title hasn't inherited the white colour because we have mentioned that we wanted it to be in red.
The "highlight" class shows that there's no problem applying a background colour to certain words of a text. The effect is rather nice, don't you think?

The background image

Just as the background colour, the image background isn't compelled to apply to the whole page, you can just as easily apply a specific background image for titles, paragraphs, quotations, etc.

The property used to specify a background image is background-image. As a value, you have to enter url("name_of_the_picture.png"). For instance:
background-image:url("background.png");

Of course, your background doesn't have to be in PNG, it can also be in JPEG or in GIF.
The address specifying the location of your background image can be absolute (http://...) or relative (background.png).

Be careful when you specify a relative address in the css file! The address of the image has to be indicated in relation with the .css file and not with the .html file.
Thus, if your website includes two folders: "css" and "images", you'll have to enter: "../images/background.png" to get to the background image. If you don't specify the correct path, your background image won't be displayed.

If you want to apply a background image to the whole page, the <body> tag has to be used again:

Code: CSS

body
{
   background-image: url("../images/snow.png");
}
h1
{
   font-style: italic;
   font-family: "Arial Black", Arial, Verdana, serif;
   text-align: center;
}
blockquote p /* All paragraphs located in a blockquote */
{
   text-align: justify;
   text-indent: 25px;
}

Try it!

In addition, there is a CSS property that can "fix" the background, so that it doesn't move at the same time as the text. The effect observed is rather interesting, in my opinion.
This new property is called by the sweet name of background-attachment and can adopt two values:

fixed: the background image stays fixed.
scroll: the background image scrolls with the text (default value).

Using the same xHTML file as previously, but changing a little bit the CSS in order to add background-attachment, we get this:

Code: CSS

body
{
   background-image: url("../images/snow.png");
   background-attachment: fixed; /* The background will stay fixed */
}
h1
{
   font-style: italic;
   font-family: "Arial Black", Arial, Verdana, serif;
   text-align: center;
}
blockquote p
{
   text-align: justify;
   text-indent: 25px;
}

Try it!

Try to go down on the page with the scrollbars, you'll see that the background image will stay fixed.

There are still two properties connected with background image I want to show you.
The first one deals with the image repeat. This property is called background-repeat and can adopt these values:

no-repeat: the background won't be repeated. There will only be a single image on the webpage.
repeat-x: the background will only be repeated on the first line, horizontally.
repeat-y: the background will only be repeated on the first column, vertically.
repeat: the background will be repeated (default value).

Let's keep the same xHTML file again, but this time we'll apply a shading background that will repeat itself vertically.
Here is the background image that I created myself on my own like a grown-up person with Photoshop (yes it has to be stressed with regard to my awful drawing aptitude

A gradation

Code: CSS

body
{
   background-image: url("../images/gradation.png");
   background-repeat: repeat-y; /* The background will only be repeated on  the first column, vertically */
}
h1
{
   font-style: italic;
   font-family: "Arial Black", Arial, Verdana, serif;
   text-align: center;
}
blockquote p
{
   text-align: justify;
   text-indent: 25px;
}

Try it!

The last property about the background that I wanted to show you (so we have seen them all) concerns the background image position.
You can specify where the background image has to be with background-position. This property is only interesting given that you have entered "background-repeat: no-repeat;" (a background that doesn't repeat itself).

You have to specify two values in pixels for background-position in order to give the position of the background in relation with the left upper corner of the web page (or of the paragraph if you apply a background to a paragraph). So, if you enter:
background-position:30px 50px;
...your background will be located at 30 pixels from the left and at 50 pixels from the top. It is also possible to use shortcut words:

top: at the top
bottom: at the bottom.
left: on the left.
center: centered.
right: on the right

It is possible to combine these words. For instance, to align an image at the top on the right, you'll enter:background-position: top right;

Come on, for this last example I'll use all the properties on the background that we have learn

Code: CSS

body
{
   background-image: url("../images/skier.gif"); /* The background is the "skier.gif" image */
   background-repeat: no-repeat; /* The background isn't repeating itself */
   background-position: top right; /* The background is aligned at the top on the right */
   background-attachment: fixed; /* The background is fixed */
}
h1
{
   font-style: italic;
   font-family: "Arial Black", Arial, Verdana, serif;
   text-align: center;
}
blockquote p
{
   text-align: justify;
   text-indent: 25px;
}

Try it!

If you use a lot of properties in keeping with background (as in this example), you can use a sort of background "mega-property" that can adopt several combined values of the background-image, background-repeat, background-attachment and background-position properties.
It is the first "mega-property" that I show you, there'll be others. For all the "mega-properties" like background, you have to know that:

The order of the values doesn't matter. You can combine all the values whatever the order:background: url("../images/skier.gif") no-repeat top right fixed;background: no-repeat fixed top right url("../images/skier.gif");
You're not compelled to specify all the values. Thus, if you don't want to put fixed, you can remove it without any problem:background:url("../images/skieur.gif") no-repeat top right;

The "mega-property" is interesting only if you have several values to combine of course

The example below is giving the same result as the last one but it uses background to combine values and make the CSS file shorter:
Code: CSS

body
{
   background: url("../images/skier.gif") no-repeat top right fixed;
}
h1
{
   font-style: italic;
   font-family: "Arial Black", Arial, Verdana, serif;
   text-align: center;
}
blockquote p
{
   text-align: justify;
   text-indent: 25px;
}

Try it!

One thing: in all of these examples, I specified a background to the whole page (body). But don't forget that you can specify a background for every element (a title, a paragraph, certain words of a paragraph, etc.).
I advise you to train yourself by applying a background to your titles or paragraphs. If you are tasteful (which I'm not) you'll certainly achieve giving a very nice appearance to your web page

Quiz

Which one of the following methods cannot set a colour?

RGB
Hexadecimal
Latin colour's name

Describe the following colour combination.

Code: CSS

color:rgb(180, 0, 212);

180 red, 0 blue, 212 green
180 red, 0 green, 212 blue
180 blue, 0 red, 212 green

Which property is to be used to set the colour of the background?

background-color
color
color-background

Which property should I use on my h1 title to make it italic and bold?

font-bold:bold and font-style:italic
font-style:oblique and font-weight:bold
font-weight:bold and text-style:italic

What does the following CSS code do?

Code: CSS

h1
{
font-variant:small-caps;
text-align:center;
}

The title is smaller and centered.
The title is centered and written in small capital letters.
The text is centered and lowercase.

How many standard colours are there?

What values to set to background so it includes all the following properties within a single line?

Code: CSS

background-image:url("../images/gradation.png");
background-repeat:repeat-x;
background-attachment:fixed;

background:repeat-x fixed url("../images/gradation.png");
background:url("../images/gradation.png"), repeat-x, fixed;
background:url("../images/gradation.png") + fixed + repeat-x;

What is the best name for a class using these effects?

Code: CSS

.class_no_name
{
font-family:"Comic Sans MS", "Trebuchet MS", Georgia, serif;
text-decoration:underline;
text-align:right;
}

.signature
.top_secret
.take_a_shout

What will this CSS do?

Code: CSS

p
{
background:url("background.png") bottom right no-repeat;
}

Display a vertical background from the webpage's center to the right which will not repeat itself.
Display a background in the upper right corner of paragraphs which will not repeat itself.
Display a background in the lower-right corner of paragraphs which will not repeat itself.

CSS is option rich, isn't it? To be honnest, they are almost unlimited and... I am sorry to tell you that you have not seen everything yet!

The only tough part with CSS is being able to remember all the properties and when to use them.
I do not know about you but I have not been gifted an elephant like memory. Practice is the key, of course, it is not easy at first, but you will make it. Luckily, I wrote an appendix with all the CSS properties we have been through, so you can find them easily.

Come on, let's follow through the tutorial: the best is yet to come!