Appearance
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 ; }
Afficher l'exemple
css
p { color: blue; }pest le sélecteurcolorest la propriétéblueest la valeurcolor: 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 <link>, positionnée dans la balise <head> du HTML.
Details
html
<head>
…
<link rel="stylesheet" href="./css/style.css" />
</head>Sélecteurs CSS
Sélecteurs de balise
Ils sont identiques aux balises HTML (sauf head).
Afficher le code
css
body {}
main {}
ul {}
p {}
span {}Sélecteurs de classe
Cible une classe définie dans le HTML avec un point.
Afficher le code
css
.class-personnelle {}
.container {}Sélecteurs d’attribut
Cible un attribut spécifique avec ou sans valeur entre crochets.
Afficher le code
css
a[href] {}
a[href="/"] {}Sélecteurs multiples et chaînés
Il est possible de cibler plusieurs éléments ou d’enchaîner les sélecteurs.
Afficher le code
css
ul, ol {}
ul.class-personnelle {}
ul > li {}
.class-personnelle img {}
* + * {}Conseil
Entraînez-vous à utiliser les sélecteurs avec cet exercice intéractif.
Propriétés CSS
INFO
Il en existe beaucoup trop pour essayer de les résumer ici. Se référer à la documentation.
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 en anglais explique en détails le fonctionnement de la cascade.
- Cette page (en anglais également) permet de visualiser graphiquement la cascade.