Retour au menu

Le langage CSS

Vocabulaire

Le langage CSS (Cascading Style Sheets) est un langage qui décrit le style à donner à des balises HTML.


Placer le CSS

Le CSS peut être placé à plusieurs endroits :

  1. Directement dans une balise HTML. Exemple : <p style="color: red;"> Texte </p>
  2. Dans les métadonnées (head) dans une balise <style> ... </style>
  3. Dans un autre fichier.

Il est plus propre de mettre le code CSS dans un autre fichier. C'est pourquoi nous ne développerons pas les deux autres possibilités.

Tout d'abord, il faut créer un fichier avec l'extension ".css".

Puis, dans la balise head du fichier HTML, il faut placer un lien vers le fichier CSS pour qu'il soit utilisé.

Exemple :

<link rel="stylesheet" type="text/css" href="chemin/vers/le/fichier/style_de_la_page.css">

Structure du code

Les styles CSS sont généralement écrits de la façon suivante :

nom_d_une_balise { nom_d_un_style: propriete_du_style ; nom_d_un_style: propriete_du_style ; }

Exemple :

h1 { color: red ; }

Vous pouvez observer que ce code CSS est utilisé pour le titre de la page. En effet, le texte de la balise <h1> est coloré en rouge.



Observer le code CSS

Pour observer le code CSS de la page, faites "Ctrl+Shift+i" ou "F12" et aller l'onglet "Sources". Cherchez ensuite le fichier CSS dans les fichiers chargés pour afficher la page. En cliquant sur le fichier, le code de celui-ci s'affiche.

Rappel : Voici la touche "Shift"


Exercice 1 :

Observez le code CSS de la page "2.2. Page à observer".

Notez vos observations des styles CSS (leur utilité, leur spécificité, ...). Cela vous permettra d'avoir un mémo sur ces styles pour votre projet.

Les principaux styles à connaître pour concevoir une page Web :
color width font-family
background-color height text-decoration
font-size border-radius
border list-style

Ces styles CSS sont les "grands basiques" de ce langage. Nous verrons plus tard comment changer les dispositions des éléments (aligner à droite, mettre deux éléments côte-à-côte, etc.).


Exercice 2 :

D'après-vous, quel code faut-il écrire pour mettre un fond sur toute la page ?


Exercice 3 :

Faire les exercices de la page suivante "2.2. Page à observer".