• Introduction
• Découvrir le CSS
• CSS et Web
• Mettre en forme le HTML grâce au CSS
• Appliquer à une balise
• Règle d'importance
• Sélectionner les éléments à styler
• Appliquer à un élément spécifique grâce aux ID
• Appliquer à plusieurs éléments grâce aux classes
• Sélectionner les éléments selon la hiérarchie
• Sélectionner selon la position dans le code
• Sélectionner selon des types prédéfinis avec les pseudo-classes
• Les pseudo-éléments
• Sélectionner selon la position dans une série
• Sélectionner en excluant un élément particulier
• Sélectionner des balises selon les attributs
• Propriétés de texte
• Changer la police
• Corps et taille du texte
• Les marges et retraits
• Marges de paragraphes
• Alignement
• Changer les couleurs
• Graisse et style
• Changer la casse
• Lettrines CSS
• Propriétés de mise en page
• Mettre en colonne
• Césures
• Gestion du flux des éléments
• Positionner un élément
• Mise en forme de tableaux
• Effets
• Bordures et filets de paragraphe
• Ombres sur le texte
• Ombres sur la zone
• Ajouter des dégradés sur les zones
• Arrondis avec border-radius
• Modifier le contenu
• Changer l'aspect de la première ligne
• Ajouter automatiquement du texte
• Compter les éléments
• Les Animations
• Approche des animations CSS
• Créer une transition CSS
• Créer des animations CSS
• Créer un diaporama en CSS
• Les transformations
• Design Adaptatif (responsive web design)
• Qu'est-ce que le design adaptatif ?
• Enlever les paramètres par défaut des navigateurs
• Les unités de mesure adaptables
• Tester l'adaptabilité
• Définir le viewport
• Dimension des blocs
• Appliquer aux images
• Gérer le texte
• Les médias queries
• test

Les pseudo-éléments

Les pseudos-éléments fonctionnent de la même façon que les pseudo-classes. Cependant ils n'agissent pas au même niveau. Ils sont moins nombreux et modifient directement le contenu textuel de la page là où les pseudos-classes sont plutôt de l'ordre de l'interactivité.

::first-line

Modifie l'aspect de la première ligne de texte

::first-letter

Modifie l'aspect de la première lettre (par exemple pour une lettrine cf infra).

::before

Modifie l'aspect de ce qui précéde, en général avec utilisation de la propriété spécifique content

::after 

Modifie l'aspect de ce qui suit, en général avec utilisation de la propriété spécifique content

Par exemple, un code de ce type

<style>
 .note::before {
   content:"Remarque : ";
   font-weight:bold
}

</style>

<p class="note">Ceci est une note.</p>

produira

Remarque : Ceci est une note.