# CSS – Débutant Le langage CSS (cascading style sheets) permet d'agir sur le style du document HTML. C'est-à dire toute la partie visuelle du contenu comme par exemple : - la mise en page - les couleurs - les tailles - les marges - les polices de caractères - etc. On parle de **“ règle CSS ”.** Une règle se construit ainsi : `sélecteur` `{` `propriété` `:` `valeur` `;` `}` ::: details Afficher l'exemple <<< @/snippets/css/base.css#rule - `p` est le sélecteur - `color` est la propriété - `blue` est la valeur - `color: blue;` est la déclaration - l'ensemble forme **la règle** ::: On écrit généralement les règles CSS en dehors du fichier HTML, dans un fichier `style.css`. Afin de relier les styles au HTML, il convient d'appeler le fichier via une balise ``, positionnée dans la balise `` du HTML. ::: details ```html … ``` ::: ## Sélecteurs CSS ### Sélecteurs de balise Ils sont identiques aux balises HTML (sauf head). ::: details Afficher le code <<< @/snippets/css/base.css#tag ::: ### Sélecteurs de classe Cible une classe définie dans le HTML avec un point. ::: details Afficher le code <<< @/snippets/css/base.css#class ::: ### Sélecteurs d’attribut Cible un attribut spécifique avec ou sans valeur entre crochets. ::: details Afficher le code <<< @/snippets/css/base.css#attr ::: ### Sélecteurs multiples et chaînés Il est possible de cibler plusieurs éléments ou d’enchaîner les sélecteurs. ::: details Afficher le code <<< @/snippets/css/base.css#chain ::: ::: tip Conseil Entraînez-vous à utiliser les sélecteurs avec [cet exercice intéractif.](https://flukeout.github.io/) ::: ## Propriétés CSS ::: info Il en existe beaucoup trop pour essayer de les résumer ici. Se référer à [la documentation.](https://developer.mozilla.org/fr/docs/Web/CSS/Reference) ::: ## La cascade du style Le CSS est régit par un concept appelé la cascade. La cascade est un ensemble de règles de priorité et d'importance. Elles servent à déterminer la règle CSS qui sera appliquée en cas de “ conflit ” entre plusieurs règles. Les deux éléments de la cascade que nous utiliseront le plus ici sont **la spécificité et l'ordre.** - [Cette présentation](https://slidr.io/bramus/the-css-cascade-a-deep-dive-2022-06-09-css-day#1) en anglais explique en détails le fonctionnement de la cascade. - [Cette page](https://wattenberger.com/blog/css-cascade) (en anglais également) permet de visualiser graphiquement la cascade.