php

C’est quoi le CSS ?

Cascading Style Sheets (CSS) est un langage de feuilles de style utilisé pour décrire la présentation d’un document généralement écrit en HTML. Le CSS va donc décrire la façon dont les éléments doivent être affichés à l’écran.

Si on compare notre page web à une maison que l’on vient d’acheter, le HTML serait la structure, les poutres, les murs et grâce au CSS on va pouvoir peindre les murs, ajouter des meubles, décorer nos chambres avec des tableaux etc.

Comment ça marche le css ?

Une fois que l'on a structuré notre code en HTML nous allons avoir une page web qui ressemble à ça :

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <head>
    <title>Titre de l'onglet de la page web</title>
  </head>
  <body>
    <header>
      <h1>Titre de la page</h1>
    </header>
    <div>Contenu de la page, articles, sections etc...</div>
    <footer>Bas de page</footer>
  </body>
</html>

Titre de la page

Contenu de la page, articles, sections, etc....

Afin de donner du style à un élément HTML il va falloir sélectionner cet élément, avec ce que l’on appelle un sélecteur. Pour cela, nous pouvons utiliser les 3 méthodes ci-dessous !

Le CSS interne

Le code va être placé dans la section head d’une page en particulier. Afin de donner une couleur rouge à notre titre h1, il faudra procéder comme ceci :

1
2
3
4
5
6
7
<head>
  <style type="text/css">
    h1 {
      color: red;
    }
  </style>
</head>

Titre rouge

Le CSS en ligne

Le code va être placé directement dans la balise HTML que l’on veut styliser comme ceci :

1
<h1 style="color: red;">Titre de la page</h1>

Titre de la page

Le CSS externe

C’est le moyen le plus pratique d’ajouter un style CSS à un site et c’est justement celui-ci que l’on va utiliser lors de ce parcours d’initiation au CSS. On va lier un fichier .css externe à notre fichier HTML, ainsi toutes les modifications apportées à un fichier CSS externe seront visibles sur votre site web.

Il faut donc dans un premier temps lier notre fichier .css que l’on va appeler style.css à notre fichier html dans la balise head comme ceci :

1
2
3
<head>
  <link rel="stylesheet" type="text/css" href="style.css" />
</head>

Maintenant dans notre fichier style.css, pour ajouter une couleur rouge à notre titre h1
il nous suffira de sélectionner notre élément et lui donner du style entre des accolades {} comme ceci :

1
2
3
h1 {
  color: red;
}

Titre rouge

Il est possible de donner plusieurs styles à un même élément HTML et d’en sélectionner plusieurs dans notre feuille de style.css. Voici un autre exemple où l’on va donner une couleur rouge à notre titre h1 et le transformer pour qu’il apparaisse en majuscules grâce à la propriété text-transform. Nous allons en dessous donner du style à un paragraphe p en le centrant au milieu de la page.

1
2
3
4
5
6
7
h1 {
  color: red;
  text-transform: uppercase;
}
p {
  text-align: center;
}

Titre rouge

Mon paragraphe

On passe aux leçons !

Vous savez maintenant à quoi sert le css et à quoi ça ressemble

Il ne reste plus qu’à démarrer le parcours !

Commencer le parcours css