Exemples interactifs CSS

Déclaration simples de propriétés CSS :

• Mettre du style simplement sur un titre H1 et sur une image : http://jsbin.com/upinet/edit#html,live
• Le même exemple avec une aggrégation des règles pour l'élément H1 : http://jsbin.com/otagic/3/edit#html,live
• Exemple avec des erreurs à corriger : http://jsbin.com/iwebel/4/edit#html,live

Compteurs

• Exemples de numérotation automatique de paragraphes : http://jsbin.com/uqeduz/edit#html,live

Selecteurs

• Exemples de selecteurs pour changer les couleurs de divers éléments, titres, paragraphes, etc : http://jsbin.com/ixabaf/edit#html,live
• Exemple avec des patterns de type "élément élément" ou "élément.class" ou ".class" : http://jsbin.com/iforor/3/edit#html,live
• Exemple avec des patterns de type "#id", "élément + élément", "élément > élément" : http://jsbin.com/inodox/2/edit#html,live
• Exemple avec des patterns de type "élément[attribut]", "élément[attribut="valeur"] et "élément[attribut~="valeur"] : http://jsbin.com/evoyod/2/edit#html,live

Pseudo classes

•  Exemple d'utilisation des pseudos classes focus et focus:over : http://jsbin.com/uzejag/2/edit#html,live

Pseudo éléments

• Exemple d'insertion de texte dans le texte à l'aide de pseudo-éléments :before, etc. : http://jsbin.com/inibin/edit#html,live