1. Syntaxe CSS de base

Le CSS permet de styliser les pages HTML. Exemple :

p {
                color: blue;
                font-size: 16px;
            }

2. Sélecteurs CSS

• Élément : h1 { color: red; }
• Classe : .ma-classe { font-weight: bold; }
• ID : #mon-id { background: yellow; }

3. Propriétés de texte et de couleur

• color : couleur du texte
• background-color : couleur de fond
• font-size : taille du texte
• font-family : police d’écriture
• text-align : alignement du texte

h2 {
                color: #3498db;
                background-color: #f0f0f0;
                text-align: center;
            }

4. Box Model (margin, padding, border)

• margin : espace extérieur
• border : bordure
• padding : espace intérieur
• content : contenu

.box {
                margin: 20px;
                border: 2px solid #333;
                padding: 10px;
                background: #fafafa;
            }

5. Bases de Flexbox

.container {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
            }

6. Positionnement

• static : position par défaut
• relative : décalage par rapport à la position normale
• absolute : positionné par rapport à l’élément parent le plus proche en position relative

.relative {
                position: relative;
                left: 20px;
            }
            .absolute {
                position: absolute;
                top: 10px;
                right: 10px;
            }

7. Styles Responsive

Pour adapter le site à tous les écrans, utilisez les media queries :

@media (max-width: 600px) {
                body {
                    font-size: 14px;
                }
                .container {
                    flex-direction: column;
                }
            }