Introduction à CSS

Dans cette partie, nous allons voir l’utilisation de base du CSS. Si vous avez déjà travaillé avec ce langage, n’hésitez pas à sauter ce cours.

Si vous commencez ce tutoriel, c’est que vous avez déjà acquis les compétences en HTML, ou que vous avez déjà une page Web existante sans style. Si ce n’est pas le cas, je vous recommande de consulter le tutoriel "Introduction à HTML".

Qu’est ce que c’est ?

CSS (pour Cascade Style Sheet) est un fichier complémentaire au fichier HTML afin d’ajouter du style à votre page.

Les fichiers CSS permettent quant à eux de styliser votre page : ajouter de la couleur, modifier la mise en page ou la taille des élements, etc.

Nous allons voir dans cette section comment créer et utiliser un fichier CSS.

Il est impossible de tout traiter en CSS tant il y a de propriété. La documentation officielle est très complète, n’hésitez pas à y jeter un coup d’oeil !

Comment écrire du CSS dans ma page ?

Pour ajouter du CSS, vous avez 3 possibilités :

  • l’écrire dans le code source HTML grâce à la balise <style>

  • l’écrire directement dans une balise HTML grâce au paramètre style

  • l’écrire dans un fichier séparé, au format .css, puis le lier dans le HTML avec la balise <link>

La première méthode est plus pratique pour débuter, mais votre code sera sûrement plus difficile à lire.

La deuxième méthode est pratique si vous voulez débugger une propriété CSS, mais ne doit en aucun cas servir à écrire votre code CSS en entier.

La dernière méthode est la plus recommandée, car sur le long terme, votre code sera sûrement très long. Cela évitera les fichiers HTML très long.

Structure du langage

Le langage CSS utilise des sélecteurs pour désigner un groupe d’éléments, puis applique des règles aux éléments sélectionnés.

sélecteur {
    propriété : valeur;
}

Il existe 3 grands types de sélecteur :

  • les sélecteurs par nom de balise : p, h1, html, body, …​

  • les sélecteurs par classe, qui commencent toujours par un point : .class, .titre, …​

  • les sélecteurs par ID, qui commencent toujours par un croisillon : #id, #element, #titre, …​

h1 { /* Sélecteur par nom de balise */
    color : darkred;
}

.classe { /* Sélecteur par classe */
    font-size : 18px;
}

#id { /* Sélecteur par ID */
    font-weight : bold;
}

Pseudo-classes

Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d’indiquer l’état spécifique dans lequel l’élément doit être pour être ciblé par la déclaration.

button { /* Tous les éléments "button" */
    /* Mes propriétés actives dans tous les cas */
}

button:hover { /* Tous les éléments "button" survolés */
    /* Mes propriétés actives uniquement quand un bouton est survolé */
}

Pseudo-éléments

Un pseudo-élément CSS est un mot-clé ajouté à un sélecteur qui vous permet de mettre en forme une partie spécifique du ou des éléments sélectionnés.

p { /* Tous les éléments "p" */
    /* Mes propriétés actives dans tous les cas */
}

button::first-line { /* La première ligne de tous les éléments "p" */
    /* Mes propriétés actives uniquement quand il s'agit de la première ligne d'un élément "p" */
}

Flex & Grid

HTML vous permet de structurer du contenu, mais sans CSS, tous les éléments s’empilent verticalement. Pour faire des mises en page modernes, réactives et propres, on utilise des flexboxs ou des grids

Flex

Les flexboxs sont des compartiments permettant d’organiser des éléments sur un seul axe (ligne ou colonne).

Si vous voulez vous entraîner avec la propriété flex, n’hésitez pas à consulter le site Flexbox Froggy !

Grid

Les grids sont des compartiments permettant d’organiser des éléments dans des grilles à 2 dimensions (ligne et colonne).

Si vous voulez vous entraîner avec la propriété grid, n’hésitez pas à consulter le site Grid Garden !

Variables CSS

Les propriétés personnalisées CSS (appelés variables CSS) sont des entités définies par les développeurs ou les utilisateurs d’une page Web, contenant des valeurs spécifiques utilisables à travers le document.

Pour déclarer une variable CSS, il suffit de commencer la propriété de l’élément par --. Pour l’utiliser, il suffit d’utiliser var(<nom de la variable>).

element {
  --main-bg-color: brown;
}

element {
  background-color: var(--main-bg-color);
}

Media queries

Les requêtes média (qu’on appellera media query par la suite) permettent de modifier l’apparence d’un site ou d’une application en fonction de l’appareil et de ses caractéristiques.

Elles sont très utiles notamment pour faire des sites responsive.

On utilise le plus couramment les media queries pour modifier le comportement d’un site en fonction de la taille de la fenêtre du navigateur. Il est possible de les regrouper avec des mots clés logique ('and' et 'or').

@media (max-width: 1250px) { /* Taille de la fenêtre au maximum à 1250px */
    h1 {
        color : darkred;
    }
}

@media (min-width: 500px) { /* Taille de la fenêtre au minimum à 1250px */
    h1 {
        color : darkblue;
    }
}

@media (min-width: 1300px) and (max-width: 1650px) { /* Taille de la fenêtre comprise entre 1300px et 1650px */
    h1 {
        color : darkgreen;
    }
}

Aller plus loin

Si vous souhaitez en apprendre encore plus sur le CSS, n’hésitez pas à vous renseigner sur des tutoriels (comme celui-ci).