Apprendre le HTML et le CSS en seconde

AssuAOU
24.7K views

Open Source Your Knowledge, Become a Contributor

Technology knowledge has to be shared and made accessible for free. Join the movement.

Create Content
Previous: HTML, Une histoire de balise

1: Introduction: Qu'est-ce que le CSS?

Les Cascading StyleSheets — ou CSS — (Feuilles de style en cascade) sont les premières techniques à apprendre après le HTML. Alors que le HTML s'utilise pour définir la structure du contenu, les CSS sont employées pour composer et déterminer l'apparence de ce contenu. Ainsi par exemple, vous utiliserez les CSS pour modifier les POLICE, la couleur, la taille et l'e s p a c e m e n t de votre contenu, pour le répartir sur plusieurs colonnes ou bien pour ajouter des animations et autres fonctionnalités décoratives.

Nous allons ajouter du style à la page suivante. Clique sur RUN pour voir le résultat.

Tu remarqueras que la page n'est pas très belle. Nous allons faire la mise en page de notre page avec le CSS.

Questionnaire QCM

Voici quelques QCM pour voir si tu as bien compris. N'hésite pas à relire ce qui précède si tu as un doute.


QCM 1
Que veut dire CSS?

QCM 2
Comment peut-on traduire CSS en français ?

QCM 3
Le CSS permet de:

QCM 4
Peut-on utiliser le CSS sans HTML?

QCM 5
On peut utiliser le HTML sans le CSS

2. Mise en forme de notre page

La couleur de fond et du texte.

On va commencer par modifier la couleur de fond de la page WEB et la couleur de police. On va mettre le fond en noir et le texte en blanc. Cette action se fait avec le code suivant:

body{
    color: white;
    background-color: black
  }

A toi
Clique sur RUN pour voir le résultat.
Ensuite:

  • Modifie le code pour afficher le texte en rouge (red)
  • Et le fond en vert(green)

Clique sur SUCCESS pour relancer la page et voir le résultat.

3. Les titres

On va ensuite changer la couleur des titres. En CSS, on peut cibler plusieurs éléments d'un coup en les listant, séparés par une virgule. Si on veut que tous les titres (h1, h2 et h3) et tous les éléments d'une liste soient en bleus, alors on écrira la règle suivante :

h1, h2, h3, li {
        color: blue;
  }

A toi
Clique sur RUN et observe le résultat. Ensuite change la couleur des titres en vert; la liste reste en bleu.

Note importante: Vous remarquerez que la première règles qu'on a écrit (fond noir et texte en jaune) n'est plus totalement respectée. En CSS, les règles sont appliquées les une à la suite des autres. Donc, si une règle vient contredire une autre, c'est la dernière qui est prise en compte.

Questionnaire QCM

Voici quelques QCM pour voir si tu as bien compris. N'hésite pas à relire ce qui précède si tu as un doute.


QCM 6
body{
    color: purple;
    background-color: yellow
  }
Que fait ce code?

QCM 7
h1, h2, h3, li {
       color: blue;
 }
Que fait ce code?(Plusieurs choix possibles)

QCM 8
.special {
  color: orange;
  font-weight: bold;
}
Que fait ce code?

QCM 9
En CSS, on peut cibler plusieurs éléments d'un coup

QCM 10
En CSS les règles sont appliquées

Sources

https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps/Getting_started

Open Source Your Knowledge: become a Contributor and help others learn. Create New Content