Compagnon de code
CSS : l'essentiel, avec style !
Leçons :
Découverte & Sélecteurs
18:11
Styliser les textes
18:47
Comprendre les couleurs
14:11
Les backgrounds Color
10:49
Les modèles de boîtes
25:10
Notion de Clamp, le min et le max
09:12
Arrondis et Hover
14:57
Les Display
09:21
Invisibilité & Morale
08:57
Transformer des éléments ?
15:29
Les Positions
24:18
Positions & Précautions
08:11
MEP : Les positions
22:37
Les bases de Flexbox
36:54
MEP : un dé en flexbox
27:06
MEP : des cartes flexibles
19:08
Les animations en CSS
21:03
MEP : un système solaire animé
27:00
MEP : Un texte qui défile ?
09:12
MEP : un loader... des points sauteurs !
07:38
Sélectionner un enfant
07:04
Les variables CSS
15:42
Responsivité et Media Queries
19:36
Enoncé Exercice Twitter
05:15
Un clone de Twitter
54:11
Un site complet et Responsive en HTML / CSS
02:12:46
Notice
=> leçons
=> express
=> exercices
=> projets
Leçons :
Découverte & Sélecteurs
18:11
Styliser les textes
18:47
Comprendre les couleurs
14:11
Les backgrounds Color
10:49
Les modèles de boîtes
25:10
Notion de Clamp, le min et le max
09:12
Arrondis et Hover
14:57
Les Display
09:21
Invisibilité & Morale
08:57
Transformer des éléments ?
15:29
Les Positions
24:18
Positions & Précautions
08:11
MEP : Les positions
22:37
Les bases de Flexbox
36:54
MEP : un dé en flexbox
27:06
MEP : des cartes flexibles
19:08
Les animations en CSS
21:03
MEP : un système solaire animé
27:00
MEP : Un texte qui défile ?
09:12
MEP : un loader... des points sauteurs !
07:38
Sélectionner un enfant
07:04
Les variables CSS
15:42
Responsivité et Media Queries
19:36
Enoncé Exercice Twitter
05:15
Un clone de Twitter
54:11
Un site complet et Responsive en HTML / CSS
02:12:46
Notice
=> leçons
=> express
=> exercices
=> projets
CSS : Découverte & Sélecteurs
Tout comme pour l'HTML, c'est au CERN que le CSS est né en 1994.
L'idée était d'exporter la stylisation dans un fichier séparé.
Développement, maintien et HTML épuré, le CSS a changé la manière de développer les pages web.
Depuis, beaucoup de propriétés et fonctionnalités sont apparues.
Avant de découvrir les principales propriétés CSS,
voyons d'abord comment sélectionner les éléments que nous voulons styliser, du plus large au plus spécifique.
Pour commencer, créons le fichier CSS, pour l'exemple, à la racine de notre projet, à coté de notre index.html
entre les balises <head></head>, inserons un appel à notre fichier style.css
<link rel="stylesheet" href="style.css" />
Nous avons un lien, link, en relation, rel, avec une feuille se style, stylesheet, trouvée à l'adresse href.
Nous sélectionnons nos éléments à styliser par :
- Leur balise : mais attention, ça touchera TOUS les éléments du même type de balise ! Solution très peu spécifique donc non prioritaire, peu flexible, rarement utilisée pour le style.
- Dans l' HTML :
-
<h1>A la découverte du CSS</h1> - Dans le CSS :
-
h1 {color: blue;} - Leur(s) classe(s) : nous accèderons à TOUS les éléments portant la même classe.
- Solution plus spécifique donc plus prioritaire.
- Dans l' HTML :
-
<h1 class="en-bleu">A la découverte du CSS</h1> - Dans le CSS :
-
.en-bleu {color: blue;}
- Leur identifiant : nous accèderons à l'élément portant cet identifiant unique. Solution très spécifique donc très prioritaire.
- Dans l' HTML :
-
<h1 id="en-bleu">A la découverte du CSS</h1> - Dans le CSS :
-
#en-bleu {color: blue;}
Et pour résumer :
| Sélecteur | Exemple | Priorité |
Balise |
h1 { color: blue; } | Faible |
Classe |
.en-bleu { color: blue; } | Moyenne |
Identifiant |
#en-bleu { color: blue; } | Forte |
En CSS, l'ID est plus spécifique que la classe elle même plus spécifique que la balise.
En cas de 2 stylisations de même spécificité, le dernier qui a parlé a raison !!!
Écrit en 02/25 par Christophe C.
Mis à jour en 02/25