Cours & tutos DKTS

1. Premiers pas avec CSS

Table des matières

La syntaxe de CSS

Commençons par la syntaxe. L’ensemble de règles CSS comprend deux parties : le sélecteur et la déclaration.

CSS est appliqué à un élément HTML particulier ou à un groupe d’éléments HTML. Mais d’abord, nous avons besoin de quelque chose pour trouver ces éléments. Un sélecteur CSS est utilisé pour trouver les éléments HTML.

Le bloc de déclaration contient le CSS. Une déclaration unique comporte une paire clé-valeur.

La clé est la propriété CSS et elle est séparée de la valeur par deux points.

Pour comprendre le fonctionnement des propriétés CSS, créez un dossier sur votre bureau contenant 2 fichiers :

  • 1 fichier index.html (vide pour le moment)
  • 1 fichier style.css qui contient ces lignes :
p {
   color:red;
}


h1 {
   color:blue;
}

Ici, p est le sélecteur qui va attribuer des propriétés à toutes les balises <p> du document html.

Comme vous le verrez un peu plus tard, il existe plusieurs types de sélecteurs CSS.

Le bloc de déclaration contient une déclaration, où « color » est la propriété et « red » est sa valeur. Nous pouvons également avoir plusieurs déclarations et chaque déclaration doit être séparée par un point-virgule. Voici un schéma simplifié pour vous souvenir du modèle de déclaration d’un style css :

sélecteur {

propriété: valeur;

propriété2: valeur;

}

Il y a 3 façons d’utiliser le CSS :

  • Via un fichier css externe,
  • En interne dans l’en-tête du document,
  • Ou directement dans le document html (on dit aussi “en ligne”)

Le fichier externe

Lorsque nous avons beaucoup de CSS et que le CSS est commun à plusieurs documents HTML,  la bonne solution consiste à utiliser un fichier CSS externe. Comme son nom l’indique, le CSS est écrit dans un fichier séparé portant l’extension .css.

Le nom de ce fichier est style.css. Pour l’utiliser dans un fichier HTML, nous devons en inclure une référence dans la section head du HTML à l’aide de la balise <link>.

Testez l’utilisation d’un fichier externe :

  • Ouvrez le fichier index.html précédemment créé (et vide) dans votre éditeur de texte.
  • Copiez-collez ces lignes :
<!DOCTYPE html>
<html lang="fr">
<head>
   <link rel="stylesheet" href="style.css" type="text/css">
   <title> Test du CSS </title>
</head>
<body>
   <p>Voici un paragraphe rouge</p>
   <h1>Et un en-tête bleu</h1>
</body>
</html>

Observez la balise <link>. Elle possède trois attributs obligatoires :

  • rel : Spécifie la relation entre le fichier lié et le fichier actuel. Comme le fichier lié est un fichier CSS, nous devons spécifier  » stylesheet  » comme valeur.
  • type : Spécifie le type de média du fichier qui est lié au fichier HTML. Le type d’un fichier CSS est  » type/CSS « .
  • href : spécifie l’emplacement du fichier lié.

C’est ainsi que la balise <link> est utilisée pour lier le fichier CSS externe avec un fichier HTML. Ouvrez votre page index.html dans votre navigateur : vous devriez voir ceci :

La couleur du paragraphe et de l’en-tête est modifiée en rouge et en bleu, respectivement.

CSS interne

Il faut donc préférer le CSS externe si le CSS est commun à plusieurs pages.

Mais si vous voulez appliquer des règles CSS pour une seule page, vous pouvez utiliser du CSS interne en l’écrivant directement dans la partie <head> de votre page html, entre 2 balises <style> et </style>.

Ce genre de pratique est souvent utilisée pour créer des pages uniques comme des templates de newsletter.

Testez l’utilisation des règles internes :

  • Supprimez tout le contenu de votre page index.html et remplacez-le par celui-ci :
<!DOCTYPE html>
<html lang="fr">
<head>
   <style>
       p {
           color:red;
       }    
       h1 {
           color:blue;
       }
   </style>
   <title> Test du CSS </title>
</head>
<body>
   <p>Voici un paragraphe rouge</p>
   <h1>Et un en-tête bleu</h1>
</body>
</html>

Ouvrez de nouveau votre fichier index.html dans votre navigateur : vous devriez voir la même chose qu’auparavant (paragraphe rouge et titre bleu).

La différence ? Vous n’avez fait aucun lien vers un fichier style.css externe, toutes les règles sont écrites directement dans l’en-tête du document html.

CSS en ligne

La troisième méthode est un peu différente. Chaque balise HTML peut utiliser un attribut appelé attribut de style. Cet attribut est utilisé pour spécifier le CSS d’une seule balise.

Testez l’utilisation des règles CSS en ligne :

  • Effacer de nouveau tout le contenu de votre fichier index.html, puis recopiez ces lignes :
<!DOCTYPE html>
<html lang="fr">
<head>
   <title> Test du CSS </title>
</head>
<body>
   <p style="color:red;">Voici un paragraphe rouge</p>
   <h1 style="color:blue;">Et un en-tête bleu</h1>
</body>
</html>

En ouvrant votre fichier index.html dans votre navigateur, vous remarquerez que là encore tout s’affiche comme avant (paragraphe rouge, titre bleu). Mais cette fois, vous n’avez ni défini de lien vers un fichier style.css externe, ni défini de règles dans l’en-tête <head> du document.

Les règles sont directement appliquées dans les balises <p> et <h1> en passant par l’attribut html style.

Cette pratique est peu recommandée de manière générale, mais elle peut s’avérer utile quand vous n’avez pas le choix .

Par exemple, si vous travaillez avec un CMS comme WordPress, et que vous n’avez qu’un accès en éditeur, vous n’avez certainement pas accès à la feuille de styles du site ou à l’en-tête des pages sur lesquelles vous rédigez vos contenus.

Avec cette méthode, vous pouvez ajouter du style directement dans vos textes !

Ordre de priorité

Que se passe-t-il si le même CSS est utilisé pour le même élément HTML dans un seul fichier HTML avec les trois manières ?

Faites un essai :

  • Videz le contenu de votre fichier index.html et copiez-collez le code suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
   <title> Test du CSS </title>
   <link rel="stylesheet" type="text/css" href="style.css">
   <style>
       p {
       color:green;
       }
   </style>
</head>
<body>
   <p style="color:red;">Voici un paragraphe rouge</p>
   <h1 style="color:blue;">Et un en-tête bleu</h1>
</body>
</html>

Comme vous le voyez, on applique les 3 méthodes au document (appel de fichier externe, ajout de règles dans l’en-tête, et ajout de règles directement dans le corps du document).

Eh oui, c’est possible ! Maintenant reste à savoir ce que ça va faire…

Ensuite, videz votre fichier style.css et copiez uniquement ceci :

p {
   color:purple;
}

Cela aura pour effet – en théorie – de modifier la couleur du texte dans la balise <p>.

Voici ce qui a été fait :

  • On applique la couleur violet au paragraphe <p> dans un fichier externe
  • On applique la couleur vert dans les règles définies dans l’en-tête
  • On applique la couleur rouge  directement sur la balise html <p> dans le contenu

Qu’est-ce que ça va donner ? Ouvrez votre page index.html dans votre navigateur : vous devriez voir ceci

La couleur est rouge, cela signifie que le CSS en ligne a plus de priorité que les deux autres.

Maintenant, enlevons le CSS en ligne écrit sur la balise <p> et voyons, qui a plus de priorité parmi le CSS interne et externe :

<!DOCTYPE html>
<html lang="fr">
<head>
   <title> Test du CSS </title>
   <link rel="stylesheet" type="text/css" href="style.css">
   <style>
       p {
       color:green;
       }
   </style>
</head>
<body>
   <p>Voici un paragraphe rouge</p>
   <h1 style="color:blue;">Et un en-tête bleu</h1>
</body>
</html>

La couleur est verte, cela signifie donc que le CSS interne est prioritaire sur le CSS externe.

Enfin, changez l’ordre de leur placement à l’intérieur de la balise <head> :

<!DOCTYPE html>
<html lang="fr">
<head>
   <title> Test du CSS </title>
   <style>
       p {
       color:green;
       }
   </style>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
   <p>Voici un paragraphe rouge</p>
   <h1 style="color:blue;">Et un en-tête bleu</h1>
</body>
</html>

Cette fois, le CSS interne est placé avant le CSS externe.

Le texte contenu dans la balise <p> devient violet. Ainsi, la priorité entre les CSS internes et externes dépend de l’ordre dans lequel ils sont placés à l’intérieur de la section head.

Le CSS qui est placé en dernier dans la section d’en-tête a donc plus de priorité.

En résumé

  • Il y a deux parties dans les règles CSS – le sélecteur et la déclaration.
  • Le sélecteur est utilisé pour sélectionner un ou plusieurs éléments HTML tandis que la déclaration comporte les propriétés CSS et leurs valeurs correspondantes.
  • Une seule déclaration comporte une propriété et sa valeur, séparées par un deux-points.
  • Il peut y avoir plusieurs déclarations dans un bloc, chacune étant séparée par un point-virgule.
  • Il existe trois façons d’utiliser CSS : externe, interne et en ligne.
  • En externe, le CSS est écrit dans un fichier distinct portant l’extension .css. La référence au fichier CSS est écrite à l’aide de la balise <link> qui est placée à l’intérieur de la section head.
  • Le CSS interne est écrit à l’aide de la balise <style> placée à l’intérieur de la section d’en-tête.
  • Chaque balise HTML possède un attribut de style
  • Le CSS en ligne a la priorité sur les deux autres.
  • La priorité entre le CSS externe et interne dépend de l’ordre de leur placement à l’intérieur de la section d’en-tête. Les derniers placés auront une priorité plus élevée.

Maintenant que vous avez compris la logique “générale” de fonctionnement du CSS, nous allons pouvoir nous attarder sur les sélecteurs.