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
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 commandes

Mise en œuvre

Elles sont de la forme “type_de_mise_en_forme: valeur_de_mise_en_forme;”. Des commentaires peuvent être insérés :

Ils commencent par // et se terminent à la fin de la ligne
Ils commencent par /* et se terminent par */

L'élément à mettre en forme (balise généralement) peut dépendre d'un autre, appartenir à une catégorie (“class”) ou être unique (“id”). Elles peuvent être incluses :

dans la balise

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

dans la page avec la balise <style> et regroupées par bloc

<style>
/*Je suis un commentaire qui commente le code et qui ne fait rien*/
body{
    background-color: green;
}
p{
    color: red; // Commentaire pour couleur rouge
    font-size: 20px;
}
ul.menu{
    border: 5px solid red;
}
</style>

Dans un fichier séparé (méthode à utiliser de préférence) dont le contenu est identique à celui de la balise <STYLE>. Le fichier HTML doit contenir dans l'entête :

page.html

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

nom_feuille_de_style.css

/*Je suis un commentaire qui commente le code et qui ne fait rien*/
body{
    background-color: green;
}
p{
    color: red; // Commentaire pour couleur rouge
    font-size: 20px;
}
ul.menu{
    border: 5px solid red;
}

Éléments à mettre en forme

Les plus utilisés sont les balises : body, h1, p, img …
Il est possible de spécifier des classes. Une classe est défini dans le fichier HTML par l'attribut class='nom_de_classe' précisant une balise. Dans le fichier CSS on utilise la notation .nom_de_classe seul ou à la suite d'une balise.
Une autre possibilité est de désigner un élément unique identifié par l'attribut id='identifiant_unique' de n'importe quelle balise. Dans le fichier CSS on utilise la notation #identifiant_unique.
les balises et les classes 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, c'est l'ensemble qui est modifié (exemple commande 'color' dans une balise <body>. La couleur de tous les textes <p>, <hx> … sera modifié)
- On peut créer avec la balise <span class='nom_de_classe'> un élément quelconque.

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)

Avantages

Une nouvelle présentation peut être facilement créée dans une nouvelle feuille de style et rapidement remplacée sur quelques ou toutes les pages.

Le site peut aussi s'adapter facilement (par exemple aux tablettes et smartphone de plus faible largeur d'écran). Cela peut se faire de 2 façons :

Mettre en place dans les fichiers .html une 2ème feuille de style en plus de la feuille standard.

  <!-- Choix de la feuille de style en fonction de la largeur d'écran -->
  <link rel="stylesheet" href="style1.css" />
  <link rel="stylesheet" media="screen and (max-width: 800px)" href="style2.css" />

Ajouter à fin de la feuille de style des nouvelles règles pour les écrans étroits

/* Modification des règles pour les écrans étroits */
@media screen and (max-width: 800px) {
  body {
     margin-left: 0px;
     margin-right: 0px;
  }
  img {
    width: 200px;
  }
  .info {
    left: 300px;
}

Activités

Création d'un premier site avec CSS

WikiTechno.morceau.fr (amen.fr)

Outils pour utilisateurs

Outils du site