Ceci est une ancienne révision du document !

Table des matières

Découverte du CSS

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

Des commentaires peuvent être utilisés pour décrire les différentes mise en forme :

ils commencent par // et se terminent à la fin de la ligne
ou commencent par /* et se terminent par */ s'ils nécessitent plusieurs lignes.

Les instructions sont groupées par type de balise et de la forme “type_de_mise_en_forme: valeur_de_mise_en_forme;”.

méthode à utiliser de préférence

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' />
...

le fichier contenant les mises en forme possède une extension “.css” et regroupe par balise les différentes instructions de mise en forme.

nom_feuille_de_style.css

/* Je suis un commentaire sur plusieurs ligne
qui commente le code 
et qui ne fait rien d'autre */
body{
    background-color: green;
}
p{ // Commentaire sur une ligne définissant des paragraphes de couleur rouge et de taille 14 points
    color: red;
    font-size: 14pt;
}
ul.menu{
    border: 5px solid red;
}

Autres méthodes

Directement dans le fichier HTML pour un ensemble de balise. On utilise dans l'entête la balise <style>.

<style>
/*
Je suis un commentaire sur plusieurs lignes
qui commente le code et rien d'autre
*/
body{
    background-color: green;
}
p{ // Commentaire sur 1 ligne pour un paragraphe de couleur rouge et taille 14 points
    color: red; 
    font-size: 14pt;
}
ul.menu{
    border: 5px solid red;
}
</style>

Directement dans le fichier HTML pour une balise spécifique avec l'attribut “style”.

<h1 style='color: red; font-size: 24pt;'>

Éléments à mettre en forme

Tous les types de balises peuvent être mis en forme.
Si la mise en forme s'applique à un type de balise (p { … }), par défaut, ce type aura toujours cette mise en forme.
Si la mise en forme s'applique à une classes (.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'>).
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
Si la balise modifiée contient d'autres balises, les modifications s'appliquent en cascade (exemple commande 'color' dans une balise <body>. La couleur de tous les textes <p>, <hx> … sera modifié).

types de commande

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. border-width: 3pt pour une bordure de 3 points de large.
font pour les polices. font-size: 14pt pour une police agrandi de 14 points.
…

Couleurs et dimensions

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