Skip to main content

Bases

Définition​

Le CSS ( Cascading Style Sheet ) est un langage de feuilles de style utilisé pour décrire la présentation d'un document écrit en langage de balisage comme HTML.

Il permet de contrôler la mise en forme et la mise en page des éléments d'une page web, tels que la couleur, la taille, la police, la disposition et d'autres aspects visuels.

Installation​

Css est nativement comprit par le navigateur web. Il ne faut rien installer mais simplement incluer ou lier notre css dans notre page web.

Au niveau du navigateur c'est le moteur de rendu qui va se charger de comprendre le css et en réaliser l'affichage.

Css est une façon de demander à notre navigateur de mettre en couleur, ajouter des espaces, disposé notre html

html css

Intégration​

Il existe plusieurs façons d'intégrer du CSS dans du HTML :

Style Inline​

Le CSS est inclut directement dans les balises HTML en utilisant l'attribut style.

<div style="color: red; font-size: 16px;">Contenu</div>

Ca mélange HTML et CSS rendant la maintenance un peux complexe.
Avec cette approche on va devoir définir notre css sur chaque élément html, impossible de définir du CSS une fois et l'appliquer sur plusieurs éléments.
Rend l'ensemble plus lourd et moins lisible mais peut être utilie dans certains cas pour "forcer" le css d'un élement html.

La balise <style>​

Il est possible d'utiliser la balise <style> pour inclure des styles CSS dans la section <head> de notre document HTML.

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        h1 {
            color: blue;
        }
    </style>
</head>

Ici tous le css se retrouve à un même endroit et on peut le généraliser en l'appliquant non plus sur un élément html mais sur un selecteur.
h1 est un selecteur dont le travail est de fair le lien entre la règles css ( color: blue ) et tout les élements h1 de notre page html.
Les sélecteurs sont vus plus loin dans le cours.

Fichier Externe CSS​

Il est aussi possible de créer un fichier CSS séparé avec nos styles, puis le lier à votre document HTML à l'aide de la balise <link>.

<head>
    <link rel="stylesheet" href="styles.css">
</head>

Avec cette approche on peut aussi lier d'autre fichier css comme une librairie tiers ou un framework css.
L'avantage c'est que le css et le html sont bien séparé. Ca rend plus facile la maintenance et la lisibilité des deux.
On peut facilement réutiliser du css et l'organiser

Cascade​

L'effet de cascade (Cascade Effect) en CSS est l'un des principes fondamentaux de la conception web avec CSS.
Il définit comment les styles sont appliqués aux éléments HTML lorsqu'ils sont affectés par plusieurs règles de style.

L'effet de cascade (Cascade Effect) en CSS est l'un des principes fondamentaux de la conception web avec CSS. Il définit comment les styles sont appliqués aux éléments HTML lorsqu'ils sont affectés par plusieurs règles de style. Voici quelques points clés à retenir sur l'effet de cascade en CSS :

  1. Priorité basée sur la spécificité des sélecteurs : Les règles CSS sont appliquées en fonction de la spécificité des sélecteurs. Plus un sélecteur est spécifique, plus sa règle aura de priorité. Par exemple, un sélecteur d'ID (#id) est plus spécifique qu'une classe (.class), qui est elle-même plus spécifique qu'un élément (tag).

Spécificité des sélecteurs​

Les règles CSS sont appliquées en fonction de la spécificité/précision des sélecteurs.
Plus un sélecteur est spécifique, plus sa règle aura de priorité.

Par exemple, un sélecteur d'ID (#id) est plus spécifique qu'une classe (.class), qui est elle-même plus spécifique qu'un élément (tag).

Ordre de déclaration​

Si deux règles ont la même spécificité, alors la dernier dans la feuille de style prendra le dessus. Cela signifie que si une règle est déclarée plus bas dans votre fichier CSS, elle annulera les règles précédentes qui ciblent le même élément.

Styles inline​

Les styles définis directement dans l'attribut style d'un élément HTML ont la priorité la plus élevée. Ils remplaceront toutes les autres règles CSS pour cet élément.

Héritage des styles​

Certains styles sont hérités des éléments parents aux éléments enfants.

Par exemple, si on définie la couleur du texte pour un élément <div>, tous les éléments <p> à l'intérieur de ce <div> hériteront de cette couleur, sauf s'ils ont une règle spécifique qui annule cet héritage.

Utilisation de !important​

En ajoutant !important à une déclaration de style, on accorde une priorité maximale à cette règle.
L'utilisation excessive de !important peut rendre le code difficile à maintenir et à comprendre.