Découverte du CSS

Le CSS (Cascading Style Sheets) décrit la présentation des documents HTML et XML. Il est normalisé par le W3C. Il permet aussi d'adapter les pages aux différents navigateurs, site RWD (Responsive Web Design).

Le CSS existe depuis les début du web mais la mise en forme était quasiment toujours obtenue grâce à des attributs des balises HTML. Depuis les années 2000 et le HTML4, il est recommandé de ne plus les utiliser et de passer par le CSS.

Aujourd'hui la référence devient la version CSS3.

Référence

Référence du langage sur w3schools
Référence du langage sur Mozilla
Cours sur le HTML et le CSS sur OpenClassrooms
Page officielle du CSS sur le site du W3C
Validateur de feuille CSS sur le site du W3C

Les instructions CSS

Mise en œuvre recommandée

Les mises en forme sont écrites dans une feuille de style (un fichier avec une extension “.css”).
Les instructions de mise en forme sont groupées par type de balise grâce à des accolades.
Chaque instruction est de la forme “type_de_mise_en_forme: valeur_de_mise_en_forme;”.
Des commentaires peuvent être utilisés pour décrire les différentes mise en forme.
Le fichier HTML doit contenir dans son entête le lien vers le fichier contenant les mises en forme :

...
<link rel='stylesheet' href='nom_feuille_de_style.css' type='text/css' />
...

Les commentaires peuvent prendre 2 formes.

Sur une ligne, ils commencent par // et se terminent à la fin de la ligne
Sur plusieurs lignes, ils commencent par /* et se terminent par */

Autres méthodes

Directement dans le fichier HTML pour un ensemble de balise. On utilise dans l'entête la balise (<style> … </style>).
Directement dans le fichier HTML pour une balise. On utilise dans la balise l'attribut “style” (<h1 style=' … '>).

Éléments à mettre en forme

Si la mise en forme s'applique à un type de balise (p { … }), ce type aura toujours cette mise en forme.
Si la mise en forme s'applique à une classes de balise (.nom_de_classe { … }), toutes les balises possédant cet attribut classe sont concernées (dans le fichier HTML : <balise class='nom_de_classe'>).
Si la mise en forme s'applique à une balise unique (#identifiant_unique { … }), seule cette balise est concernée (dans le fichier HTML : <balise id='identifiant_unique'>).
Si la balise modifiée contient d'autres balises, les modifications s'appliquent en cascade.

Les balises, les classes et les identifiants peuvent se compléter mutuellement :

p {toutes les balises paragraphes}
p.info {uniquement les paragraphes de classe info}
.info {tous les éléments de classe info qu'ils soit paragraphes ou titres de paragraphe ou autres

Exemple de modification en cascade : Si la couleur du texte est modifiée dans la balise <body>, tous les textes contenus dans la pages qu'ils soit de type <hx> ou <p> auront cette couleur (sauf si une nouvelle couleur est redéfinie pour un élément plus précis).

types de mise en forme

Il existe un très grand nombre de commande qui contiennent plusieurs possibilités. Les principales sont :

color pour la couleur du texte. color: blue; écrit les textes en bleu
background pour le fond. background-color: gray; passe le fond de l'élément en gris.
margin et padding pour les marges et les espaces. margin-top: 10px; crée une distance de 10 points par rapport à la balise du dessus.
border pour des encadrements.
font pour les polices.
…

Les couleurs peuvent être nommées par :

leur nom HTML (red, green)
le code RVB correspondant (#FF0000, #008000)

Les dimensions peuvent être indiquées en :

px pixels (taille écran)
pt points (fonction de la résolution écran)
% pourcentage (de la taille écran)
cm centimètre (dimension précise)

Mise en forme responsive

Une nouvelle présentation peut être facilement mise en place en changeant la feuille de style.

Le site peut lui aussi s'adapter aux différents écrans (ordinateurs, tablettes et smartphone).

Mettre en place dans les fichiers .html d'autres feuilles de style en plus de la feuille standard.

  <!-- Choix de la feuille de style par défaut -->
  <link rel="stylesheet" href="style1.css" />
  <!-- Choix d'une feuille de style alternative pour les écrans inférieurs à 800 pixels de large -->
  <link rel="stylesheet" media="screen and (max-width: 800px)" href="style2.css" />

Activités

Création d'un premier site avec CSS

WikiTechno.morceau.fr (amen.fr)

Outils pour utilisateurs

Outils du site

Table des matières