🎨 CSS
Écris et exécute ton propre code CSS, puis pioche des idées dans les 20 propriétés les plus utiles.
🧪 Compilateur CSS
Écris du HTML à gauche et du CSS au milieu, puis clique sur « Exécuter » pour voir ta page stylée à droite.
🛡️ Ce compilateur est fabriqué par ClicksSchool et fonctionne 100 % dans ton navigateur.
📚 Aide-mémoire
Besoin d'une idée ? Pioche dans ces exemples et colle-les dans ton compilateur ci-dessus.
color
Change la couleur du texte.
<p style="color:#e85d4c;">Texte en couleur</p>background-color
Change la couleur de fond d'un élément.
<p style="background-color:#f4a93b; padding:10px;">Fond coloré</p>font-size
Change la taille du texte.
<p style="font-size:28px;">Grand texte</p>font-family
Choisit la police d'écriture utilisée.
<p style="font-family:'Courier New', monospace;">Texte façon machine à écrire</p>font-weight
Rend le texte plus ou moins épais.
<p style="font-weight:bold;">Texte en gras</p>text-align
Aligne le texte à gauche, au centre ou à droite.
<p style="text-align:center;">Texte centré</p>text-decoration
Ajoute (ou enlève) un soulignement.
<p style="text-decoration:underline;">Texte souligné</p>text-transform
Change la casse du texte automatiquement.
<p style="text-transform:uppercase;">texte en majuscules</p>border
Ajoute un contour autour d'un élément.
<p style="border:3px solid #3e7cb1; padding:8px;">J'ai une bordure</p>border-radius
Arrondit les coins d'un élément.
<p style="border:3px solid #4c9a6a; border-radius:16px; padding:8px;">Coins arrondis</p>box-shadow
Ajoute une ombre portée autour d'un élément.
<div style="background:#fff; box-shadow:0 6px 14px rgba(0,0,0,0.3); padding:14px; border-radius:10px;">J'ai une ombre</div>margin
Ajoute de l'espace à l'extérieur d'un élément.
<div style="background:#f4ede0;">
<div style="background:#e85d4c; color:white; margin:20px; padding:8px;">Espace autour (margin)</div>
</div>padding
Ajoute de l'espace à l'intérieur d'un élément.
<div style="background:#e85d4c; color:white; padding:24px;">Espace intérieur (padding)</div>width & height
Fixent la largeur et la hauteur d'un élément.
<div style="width:120px; height:60px; background:#4c9a6a;"></div>opacity
Rend un élément plus ou moins transparent (de 0 à 1).
<div style="width:100px; height:60px; background:#e85d4c; opacity:0.4;"></div>display: flex
Aligne plusieurs éléments côte à côte facilement.
<div style="display:flex; gap:10px;">
<div style="background:#e85d4c; color:white; padding:10px;">1</div>
<div style="background:#f4a93b; color:white; padding:10px;">2</div>
<div style="background:#4c9a6a; color:white; padding:10px;">3</div>
</div>background (dégradé)
linear-gradient crée un dégradé de couleurs.
<div style="width:140px; height:70px; background:linear-gradient(135deg, #e85d4c, #f4a93b); border-radius:12px;"></div>transform
Fait pivoter, agrandir ou déplacer un élément.
<p style="transform:rotate(-8deg); display:inline-block;">Texte penché</p>cursor
Change l'apparence du curseur de la souris au survol.
<button style="cursor:pointer;">Survole-moi</button>transition + :hover
Anime un élément en douceur quand la souris passe dessus (essaie de survoler le bouton !).
<style>
.hov { transition: transform 0.2s; }
.hov:hover { transform: scale(1.15) rotate(-4deg); }
</style>
<button class="hov" style="padding:10px 16px; border-radius:10px; border:none; background:#4c9a6a; color:white;">Survole-moi !</button>