CSS Cheatsheet

Author

Patrick Reuter (version de travail non-exhaustive)

Published

April 17, 2025

Déclaration de styles

  1. Feuille de style CSS externe (à préférer, dans l’en tête <head>...</head> du document HTML)
<link href="style.css" rel="stylesheet" type="text/css">
  1. Styles CSS interne dans une balise <style>
<style type="text/css">
...
</style>
  1. Styles CSS dans le code html (“inline”)
<p style="text-align: center; color: red">
...
</p>

Structure de base

sélecteur
{
    propriété : valeur ;
}

Sélecteurs

sélecteur balises sélectionnées
p Tous les éléments de la balise <p>
h1, h2 Tous les éléments des balises <h1> et <h2>
.menu Tous les éléments de la classe “menu”
#contenu L’unique élément avec un attribut id “contenu”
td.colonne Tous les éléments de la balise <td>avec la classe colonne
main h1 Tous les éléments de la balise <h1> inclus dans <main>
main > h1 Tous les éléments de la balise <h1> étant enfant de <main>
…. ….

Pseudo-Sélecteurs

sélecteur balises sélectionnées
:link Lien non-actif, non-pas encore visité
:visited Lien visité
:hover Survol de la souris
:active Elément actif
:focus Elément avec focus
:first-child Le sélecteur ne vise que le premier enfant
:first-line Le sélecteur ne vise que la première ligne
:first-letter Le sélecteur ne vise que la première lettre
:nth-child(2n) Le sélecteur vise que les enfants numéro 2n pour tout n naturel
…. ….

Propriétés

Texte

propriété valeurs
color couleur du texte, p.ex. #FF0000 ou red ou rgb(255,0,0)
font-weight épaisseur du texte, p.ex. pour en gras bold
font-family type de police, p.ex. Helvetica ou Arial
font-size taille de police, p.ex. 2em ou 32px (il vaut mieux éviter les px)
font-style style tu texte, p.ex. italic
text-decoration effets sur du texte, p.ex. underline
text-align alignement du texte, p.ex. left, right, center, justify
line-height interligne, p.ex. 2em
letter-spacing espacement entre les caractères, p.ex. 5px
text-indent indentation de la première ligne, p.ex. 10px
text-transform Formattage du texte, p.ex. uppercase, lowercase, capitalize
…. ….

Bordures

propriété valeurs
border-width épaisseur bordure,p .ex. homogène 1px, hétérogène 1px 2px 3px 1px
border-style style de la bordure, p.ex. solid, dashed, dotted, ..
border-color couleur de la bordure
border forme courte width style color, p.ex. 1px solid black
…. ….

Arrière-plan

propriété valeurs
background-color Couleur de l’arrière-plan
background-image Image de l’arrière-plan
…. ….

Box Model

propriété valeurs
margin marges extérieures
padding marges intérieures
border bordure
background-color couleur de fond, p.ex. white
…. ….

Media queries

  • Les “Media queries” permettent la mise en forme en fonction du média (ordinateur, tablette, téléphone) dans lequel la page web est affichée.
  • On parle aussi de sites web adaptatifs ou **responsive web design*
@media screen and (max-width: 640px) {
  body {
    background-color : #FFFFFF;
  }
}

@media screen and (min-width: 641px) {
  body {
    background-color : #CCCCCC;
  }
}