Liste des ressources sur CSS
Documentation Officielle
Cours sur CSS
- Grafikart
- CodeCademy
- OpenClassroom
- Flexbox Froggy
Autour de CSS
- Les Frameworks
- Les préprocesseurs
- Outils
Cheat Sheet
Sommaire
- Appeler un fichier CSS
- Inline à proscrire
- Entre balises
<style>à proscrire - Depuis un fichier CSS externe
- Les sélecteurs CSS
- Les pseudos-classes
- Flexbox
Appeler un fichier CSS
3 façons de faire :
Inline
Il est possible de rédiger du CSS directement dans un fichier HTML à l’aide de l’attribut style, placé dans une balise HTML.
Exemple :
<div style="color:blue;font-size:28px;">Lorem Ipsum</div>
Entre des balises <style>
Placée dans le <head>, la balise <style> permet également d’intégrer du CSS dans un fichier HTML
Depuis un fichier CSS externe
Il est fortement conseillé de rédiger son CSS dans un fichier séparé. Une fois fait, il devra être appelé dans le head du document html afin de l’appliquer à la page.
Pour ce faire, utiliser la balise <link> de la manière suivante :
<link rel="stylesheet" type="text/css" href="style.css">
Bien penser à spécifier correctement le chemin vers le fichier CSS. S’il est dans le même dossier que le fichier HTML, il s’uffit d’écrire son nom. S’il se trouve dans un dossier enfant, spécifier comme suit :
<link rel="stylesheet" type="text/css" href="/mon-dossier/style.css">
Les sélecteurs CSS
Il existe en CSS trois moyens de définir un style à un élément :
- Les balises
- Les classes
- Les ID
Les balises
Il est possible d’assigner un style à des balises en spécifiant simplement leur nom :
h1 {
color:blue;
}
Dans cet exemple, toutes les balises <h1> seront de couleur bleue.
Les classes
Il est possible d’assigner un style à des éléments en fonction de leur classe précisée dans l’attribut class="ma-classe" en ajoutant un point avant le nom de la classe :
.ma-classe {
background-color:green;
}
Dans cet exemple, tous les éléments ayant la classe ma-classe auront un background de couleur verte.
Les ID
Il est enfin possible d’appliquer un style à des éléments en fonction de leur identifiant précisé dans l’attribut id="mon-id" en ajoutant un dièse avant le nom de l’identifiant :
#mon-id {
text-decoration:underline;
}
Dans cet exemple, l’élement ayant pour identifiant mon-id aura son texte souligné.
Les pseudos classes
Sélectionner un élément
Il est possible de sélectionner des éléments sans leur attribuer de classe ou d’ID grâce aux pseudos classes.
:first-child: modifie le style du premier élément enfant de son parent:nth-child: modifie le style du n ième élément enfant de son parent:first-of-type: modifie le style du premier élément enfant du type choisi de son parent:nth-of-type: modifie le style du n ième élément enfant du type choisi de son parent
Styliser un état
Il est possible de styliser des états particuliers grâce aux pseudos classes.
On peut ainsi définir un style au survol de la souris grâce à la pseudo classe :hover comme ceci :
a {
opacity:0.8;
}
a:hover {
opacity:1;
}
Dans cet exemple, lorsqu’on survolera un lien, l’opacité de l’élément passera de 0.8 à 1.
Styliser un état
Flexbox
Les propriétés flexbox
Flex-direction
Définition
La propriété flex-direction définit la direction dans laquelle le conteneur veut aligner ses éléments enfants
Elle peut accepter 4 valeurs :
flex-direction: row;(par défaut) : les enfants s’aligneront en lignesflex-direction: row-reverse;: les enfants s’aligneront en lignes inverséesflex-direction: column;: les enfants s’aligneront en colonnesflex-direction: column-reverse;: les enfants s’aligneront en colonnes inversées
Flex-wrap
Définition
La propriété flex-wrap définit si le parent alignera ses enfants sur une ou plusieurs lignes.
Elle peut accepter 3 valeurs :
flex-wrap: nowrap;(par défaut) : les enfants s’aligneront sur une seule ligne et peuvent donc déborder du parentflex-direction: wrap;: les enfants s’aligneront sur plusieurs lignes, de gauche à droite avec saut de ligne en cas de débordementflex-direction: wrap-reverse;: les enfants s’ligneront sur plusieurs lignes de droite à gauche avec saut de ligne en cas de débordement
Flex-flow
Définition
La propriété flex-flow permet de paramètrer d’un seul coup les propriétés flex-direction et flex-wrap.
Elle s’utilise comme suit :
flex-flow: center nowrap;
La première valeur renseignée correspond à flex-direction et la seconde à flex-wrap.
Justify-content
Définition
La propriété justify-content définit l’alignement des enfants le long de l’axe principal.
Elle peut accepter 5 valeurs :
justify-content: flex-start;(par défaut) : les enfants sont regroupés en début de lignejustify-content: flex-end;: les enfants sont regroupés en fin de lignejustify-content: center;: les enfants sont centrés le long de la lignejustify-content: space-between;: les enfants sont répartis sur la ligne. Le premier enfant est donc collé contre le début de son parent et le dernier enfant contre la fin de son parent.justify-content: space-around;: les enfants sont repartis sur la ligne avec les mêmes marges autour de chacun
Align-items
Définition
La propriété align-items définit l’alignement des enfants le long de l’axe secondaire.
Si flex-direction:row est utilisée, align-items alignera les enfants verticalement.
Si flex-direction:column est utilisée, align-items alignera les enfants horizontalement.
Elle peut accepter 5 valeurs :
align-items: flex-start;: les enfants sont regroupés au début de l’axe secondairealign-items: flex-end;: les enfants sont regroupés à la fin de l’axe secondairealign-items: center;: les enfants sont centrés sur l’axe secondairealign-items: baseline;: les enfants sont répartis sur l’axe secondaire. Le premier enfant est donc collé contre le début de son parent et le dernier enfant contre la fin de son parent.align-items: stretch;(par défaut) : les enfants sont étirés jusqu’à remplir le parent (sauf si les dimensions de l’axe correspondant des enfants sont précisées)