• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

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

Setting up CSS

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

Having spent the first part of the course working on HTML only, we're now going to find out about CSS that I deliberately sidelined. CSS is no more complicated than HTML. It supplements HTML to help you format your web page.

This first chapter on CSS deals with the theory behind it: what is it? What does it look like? Where do you write the CSS code? Although these theoretical aspects are not very complicated, you need to know about them as it's the very basis of CSS. And it's the only thing I'm going to ask you to remember by heart in CSS as you can find the rest in the memo in the appendix.

So let's get going, I can see that you are burning with impatience!

The story behind CSS

I warned you about this right at the start of this course: we're going to learn two languages. We've already found out quite a lot about HTML, even if there are still quite a few things to learn (we'll come back to it in a few chapters). However, it's now time to concern ourselves with CSS.

CSS (Cascading Style Sheets), is the other language that complements HTML.
Do you remember what its purpose is? To manage the formatting of your website.

Brief reminder: what is CSS used for?

CSS? It's what allows you to choose the color of your text.
It's also what allows you to select the font used on your website.
And it's also what allows you to set the text size, borders, background, etc.

And also what you use for the page layout of your website. You can use it to say: I want my menu to be on the left and be just so wide, I want my website header to be top-aligned and always visible, etc.

Remember this little comparison that we saw in the first chapter (next figure).

With and without CSS
With and without CSS

We used HTML to write the content of our website but it was rough around the edges. CSS supplements this code to format the whole content and give the appearance that you want.

CSS: a hesitant start

It should be pointed out that CSS didn't exist at the time the Web started. There was only HTML to start with, in fact.
HTML was created in 1991 and CSS in 1996. So you're probably wondering: how did they format text from 1991 to 1996? Well actually, in HTML alone! Indeed, there used to be HTML tags for formatting. <font color="#aab1c3">, for example, was used to define the text color.

However, HTML pages began to get quite complex. There were ever more tags with a nice mess between content and form, which made updating web pages increasingly complex. That's why the CSS language was created.

CSS was not immediately adopted by webmasters, however, far from it. A number of bad habits had to be discarded and this took time. Even now, you can still find websites with old, obsolete HTML formatting tags, such as <font>!

CSS: support for browsers

CSS has changed, just like HTML. I told you that there were four major versions of CSS:

  • CSS 1;

  • CSS 2.0;

  • CSS 2.1;

  • CSS 3.

The most complex work is carried out by web browsers: they have to read the CSS code and understand how to display the page.

Although Internet Explorer was the most common browser at the start of the 2000s, the way it managed CSS remained mediocre (if not downright bad) for a long time. This was in the heyday of version 6 (IE6), which is unfortunately still used today by a small proportion of users (fortunately, this proportion is decreasing).

Since then, many browsers have come on the scene and have given Internet Explorer a rocky ride: Mozilla Firefox of course, but also Google Chrome. And not to mention the success of Macs and iPhones with their Safari browser. This prompted Microsoft to respond and publish (after a long period of inactivity) IE 7, IE 8 and then IE 9. There is already talk of IE 10.

Well, your history lesson is nice but how does it concern me today?

What can we learn from all this? That browsers do not know all existing CSS properties. The older the browser, the less its knows about CSS features.

I'm going to show you in this course a number of features of CSS that do not necessarily work on older browsers. I can't avoid it, it's just the way it is: no browser has a complete knowledge of all CSS features in any case! If the browser does not know a CSS property, it at worst ignores it and does not format it, but it does not crash your page: it will thus still be readable.

I highly recommend you bookmark the www.caniuse.com and normansblog.de websites which provide tables showing the compatibility between HTML and CSS features in various browsers (and their different versions). In particular, take a look at the CSS compatibility tables of www.caniuse.com (next figure).

CSS compatibility tableCSS compatibility table

CSS compatibility table of caniuse.com

Where do we write the CSS?

You can choose as you can write code in CSS language in three different places:

  • in a file with the extension .css (most recommended method);

  • in the HTML file <head> header;

  • directly in the tags of the HTML file via a style attribute (least recommended method).

Although I'll describe all three of these methods, I can tell you now that the first one... is the best.

In a .css file (recommended)

As I just said, CSS code is most often written in a special file with the extension .css (unlike HTML files which have the extension .html). This is the most convenient and flexible method. It avoids mixing everything in a single file. I'm going to use this technique in the rest of this course.

Let's get started straight away! We're going to use the HTML file below:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>First tests of CSS</title>
</head>

<body>
<h1>My super website</h1>

<p>Hello and welcome to my website!</p>
<p>My website is still a bit <em>empty</em>. But wait a while yet!</p>
</body>
</html>

Notice the content of line 5, <link rel="stylesheet" href="style.css" />: this is the line that indicates that this HTML file is associated with a file called style.css which does the formatting.

Save this file as any name you want (for example, page.html). Up to now, there's nothing special except for the new tag we've added.

Now create a new empty file in your text editor (for example, Notepad++) and copy this piece of CSS code (don't worry, I'll explain to you what this means later):

p
{
color: blue;
}

Save the file giving it a name ending with .css, such as style.css. Place this .css file in the same folder as your .html file.

In Notepad++, you should see something similar to the next figure.

HTML and CSS files in Notepad++
HTML and CSS files in Notepad++

In your file explorer, you should see them displayed side by side. The .html file on one side and the .css file on the other, as shown in the next figure.

HTML and CSS files in the file explorer
HTML and CSS files in the file explorer

Now open your page .html file in your browser to test it, as you usually do. Just look, it's magic: your paragraphs are shown in blue, as in the next figure!

The text is written in blue
The text is written in blue

In the HTML file <head> header

There's another way of using CSS in your HTML files: this involves inserting the CSS code directly in a <style> tag inside the header <head>.

Here's how you can get exactly the same result with a single .html file containing the CSS code (lines 5 to 10):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
p
{
color: blue;
}
</style>
<title>First tests of CSS</title>
</head>

<body>
<h1>My super website</h1>

<p>Hello and welcome to my website!</p>
<p>My website is still a bit <em>empty</em>. But wait a while yet!</p>
</body>
</html>

Test it, you'll see that the result is the same.

Directly in the tags (not recommended)

Last method, to be handled with care: you can add a style attribute to any tag. You insert your CSS code directly in this attribute:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>First tests of CSS</title>
</head>

<body>
<h1>My super website</h1>

<p style="color: blue;">Hello and welcome to my website!</p>
<p>My website is still a bit <em>empty</em>. But wait a while yet!</p>
</body>
</html>

This time, only the text of the first paragraph (line 11), containing the CSS code, will be colored blue (next figure).

The first paragraph is written in blue
The first paragraph is written in blue

Which method should you choose?

I think that the first method you recommend is more complicated than the other two! Why do you advise us to create two files? I was doing fine with just one .html file!

I strongly recommend you get used to working with the first method as it's the one used by most webmasters... Why?

For the time being, you perform your tests on a single HTML file. However, your website will later on include several HTML pages, right?
Just imagine: if you put the CSS code directly in the HTML file, you'll have to copy this code into all the HTML files of your website! And if you change your mind tomorrow and, for example, want your paragraphs written in red instead of blue, you'll have to change each HTML file one by one, as shown in the next figure.

The CSS code is repeated in each HTML file
The CSS code is repeated in each HTML file

If you work with an external CSS file, you'll only have to write this instruction once for your entire website, as shown in the next figure.

The CSS code is given once and for all in a CSS file
The CSS code is given once and for all in a CSS file

Applying a style: selecting a tag

Now that we know where to put the CSS code, let's have a closer look at it. I gave you a first bit of CSS code without explaining it:

p
{
color: blue;
}

CSS code like this contains three different items:

  • Tag names: you write the names of the tags the appearance of which you want to change. For example, if you want to change the appearance of all <p> paragraphs, you have to write p.

  • CSS properties: the page "style effects" are stored in properties. For example, the color property allows you to specify the text color, and the font-size property is used to specify the text size, etc. There are a lot of CSS properties and, as I already told you, I'm not going to make you learn them all by heart.

  • Values: for each CSS property, you have to specify a value. For the color property, for example, you have to specify the color name. For the font-size property, specify the size you want, etc.

A CSS style sheet thus broadly speaking looks like this:

tag1
{
property1: value1;
property2: value2;
property3: value3;
}

tag2
{
property1: value1;
property2: value2;
property3: value3;
property4: value4;
}

tag3
{
property1: value1;
}

In this code snippet, you can see the tags, properties and values I've just mentioned.

As you can see, you write name of the tag (for example, h1) and include the properties and values you want inside braces. You can include as many properties as you want inside braces. Each property is followed by the "colon" (":" symbol) and then the corresponding value. Finally, each line ends with a semicolon ";".

I'm going to teach you about a number of properties in the following chapters. For the time being, we'll just change the color in the examples as an exercise.

The CSS code we've used so far:

p
{
color: blue;
}

… thus means: "I want all my paragraphs to be written in blue.". The result is shown in the next figure.

Paragraphs written in blue
Paragraphs written in blue

Try changing the name of the tag affected by the CSS code. For example, if I write h1, the title will be written in blue. Edit your style.css file like this:

h1
{
color: blue;
}

Now open your HTML page again (remember, it's the HTML page you open in the browser, not the CSS file!): you should see its title displayed in blue (next figure)!

Title written in blue
Title written in blue

Applying a style to several tags

Let's take the CSS code below:

h1
{
color: blue;
}

em
{
color: blue;
}

It means that our titles <h1> and our important texts <em> must be displayed in blue. However, it's a bit repetitive, don't you think?

Fortunately, there's a way in CSS to go faster if both tags have to have the same presentation. Simply combine the declaration, separating the tag names with a comma, like this:

h1, em
{
color: blue;
}

The result is shown in the next figure.

Title and important text written in blue
Title and important text written in blue

This means: "I want the text of my <h1> and <em> tags to be written in blue".

You can specify as many tags one after the other as you want.

Comments in CSS

Like in HTML, you can include comments. Comments are not displayed and are simply used to specify information intended for you, to find your way, for example, through a long CSS file.

And, as you will see, the HTML file is generally fairly short and the CSS sheet fairly long (if it contains all your website's style items, this is quite normal). Note that you can create several CSS files for your website if you feel the need to separate your CSS code somewhat (depending on the various sections in your website, for example).

What were we talking about, again? Ah yes, comments in CSS.

So, to include a comment, it's easy! Enter /* followed by your comment, then */ to complete your comment.
You can write comments on one or more lines. For example:

/*
style.css
---------
 
By Mathieu Nebra
*/
 
p
{
    color: blue; /* The paragraphs will be blue */
}

I may use comments in the rest of the course to provide explanations within .css files themselves.

Applying a style: class and id

What I've shown you so far still has a shortcoming: it means, for example, that ALL paragraphs will have the same presentation (in this case, they'll all be written in blue).
What do you have to do to make only some paragraphs be written in a different way? You could put the CSS code in a style attribute on the intended tag (this is the technique I showed you earlier), but as I said, this is not recommended (it's better to use an external CSS file).

To solve the problem, you can use these special attributes which work on all tags:

  • the class attribute ;

  • the id attribute.

Let's be clear about this from the start: the class and id attributes are virtually the same. There's only a small difference that I'll show you below.
For the time being, and to put it simply, we're only going to concern ourselves with the class attribute.

As I just told you, this is an attribute that can be put in any tag, whether title, paragraph, image, etc.

<h1 class=""> </h1>
<p class=""> </p>
<img class="" />

Yes, but what value do you include for the class attribute?

In fact, you have to enter a name that identifies the tag. Whatever you want, as long as the name starts with a letter.

For example, I'm going to associate the introduction class with my first paragraph (line 12):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>First tests of CSS</title>
    </head>

    <body>
        <h1>My super website</h1>
        
        <p class="introduction">Hello and welcome to my website!</p>
        <p>My website is still a bit <em>empty</em>. But wait a while yet!</p>
    </body>
</html>

Having done this, your paragraph is now identified. It has a name: introduction. You'll be able to reuse this name in the CSS file to say: "I only want the tags called 'introduction' to be displayed in blue".

To do this in CSS, enter the name of your class starting with a dot, as shown below:

.introduction
{
    color: blue;
}

Test the result: only your paragraph called introduction will be displayed in blue (figure below)!

Only the first paragraph is displayed in blue
Only the first paragraph is displayed in blue

And what about the id attribute?

It works in exactly the same way as class, with one exception: it can only be used once in the code.

What's the point of this? Not all that much, to be honest. It would be useful to you if you use JavaScript later on to recognise certain tags. And we've already seen the id attribute in the chapter on links (to enter anchors). In practice, we'll only enter an id on items that are unique in the page, such as the logo:

<img src="images/logo.png" alt="Website logo" id="logo" />

If you use ids, when defining their properties in the CSS file, you have to put a hash character (#) in front of the id name:

#logo
{
    /* Specify the CSS properties here */
}

Don't bother to test it, it works exactly like class.

General purpose tags

You may sometimes need to apply a class (or an id) to some words that were originally not surrounded by tags.

Indeed, the problem with class is that it's an attribute. So you can only enter it on a tag. If, for example, I want to only change "welcome" in the paragraph below:

<p>Hello and welcome to my site!</p>

It would be easy to do if there was a tag around "welcome", but unfortunately there's not. Luckily, someone invented... the tag-which-has-no-purpose.

In fact, two so-called general purpose tags were invented, which have no special meaning (they don't specify that the word is important, for example). There's a small (but significant!) difference between these two tags:

  • <span> </span>: is an inline type tag, in other words a tag that is placed within a paragraph of text, to only select certain words. The <strong> and <em> are of the same family. This tag is thus used in the middle of a paragraph and is the tag we're going to use to color "welcome".

  • <div> </div>: is a blocktype tag, which surrounds a block of text. The <p>, <h1>, etc. are of the same family. These tags have something in common: they create a new "block" in the page and thus necessarily insert a line break. <div> is a tag frequently used in building a design, as we shall see later.

So for now, we'll instead use the tag <span>. You place it around "welcome", add a class to it (any name you want), create the CSS and that's it!

<p>Hello and <span class="heybuddy">welcome</span> to my website!</p>
.heybuddy
{
    color: blue;
}

You can see the result in the figure below.

The word welcome is written in blue
The word welcome is written in blue

Applying a style: the advanced selectors

In CSS, the most difficult thing is to know how to target the text for which you want to change the formatting. To target (we say "select") the items of the page to changed, you use what are called selectors. You already used a few of them earlier on in this chapter, so let's summarize them to begin with.

The selectors you already know

These selectors, as we saw above, are by far the most commonly ones used. You should know them by heart. Let's start from the beginning:

p
{

}

... means "I want to change every paragraph". After that, it's up to you to say what you want to do to these paragraphs (write them in blue, for example).

We also saw:

h1, em
{

}

... which means "All titles and all important texts." We've selected two tags in one go.

And finally, we saw how to select specific tags to which we gave a name using the class and id attributes:

.class
{

}

#id
{

}

And you know what? There are dozens of other ways of targeting tags in CSS! We're not going to look at them all as there are a lot and some are complex, but here's what you can do to be more effective in CSS!

The advanced selectors

*: general purpose selector
*
{

}

Selects all tags without exception. It's called the general purpose selector.

A B: one tag within another
h3 em
{

}

Selects all <em> tags located inside a <h3> tag. Note that there's no comma between the two tag names.

Corresponding sample HTML code:

<h3>Title with <em>important text</em></h3>
A + B: a tag that follows another tag
h3 + p
{

}

Selects the first <p> tag located after a <h3> title.

Example:

<h3>Title</h3>

<p>Paragraph</p>
A[attribut]: a tag that has an attribute
a[title]
{

}

Selects all the <a> links that have a title attribute.

Example:

<a href="http://site.com" title="Tooltip">
A[attribute="Value"]: a tag, an attribute and an exact value
a[title="Click here"]
{

}

Ditto, but the attribute must also have the exact value "Click here".

Example:

<a href="http://site.com" title="Click here">
A[attribute*="Value"]: a tag, an attribute and a value
a[title*="here"]
{

}

Ditto, the attribute must this time contain the word "here" in its value (in any position).

Example:

<a href="http://site.com" title="Somewhere around here">

There are also other selectors!

I've only described a few CSS selectors here and there are many others. If you want a complete list, you can find out directly from the source: on the W3C website! It's very comprehensive.

We'll discover some of these other selectors later in this course!

Summing up

  • CSS is another language that complements HTML. Its role is to format your web page.

  • You need to be vigilant about the compatibility of browsers with some recent CSS3 features. When a browser does not know a formatting instruction, it simply ignores it.

  • You can write CSS code in several different places, the most advised way being to create a separate file with the extension .css (for example: style.css).

  • In CSS, you select which parts of the HTML page you want to edit and then change their presentation with CSS properties:

tag1
{
    property1: value1;
    property2: value2;
}
  • There are many ways of selecting the portion of the page you want to format. For example, you can target:

    • all the tags of the same type, just by entering their name (h1 for example);

    • some specific tags, which you have assigned names to using the attributes class or id (.classname or #idname) ;

    • only tags that are located in other tags (h3 em).

    • ...

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