Correction WEB02 - Style CSS

Exercice 1 : Analyse de règles CSS

Le modèle de boîte définit comment l'espace est calculé autour d'un élément HTML :

Pour l'espace extérieur (vis-à-vis des voisins) : On modifie la propriété margin.
Pour l'espace intérieur (confort du texte) : On modifie la propriété padding.

Pour appliquer un style spécifique lors du passage de la souris, on utilise la pseudo-classe :hover :

button {
    background-color: #3498db;
    transition: 0.3s; 
}

/* État au survol */
button:hover {
    background-color: #e67e22;
}

La transition permet de passer d'un bleu à un orange de manière fluide en 0.3 seconde.

Règles CSS répondant aux objectifs de mise en page :

1. Titres h1 centrés en bleu foncé :

h1 {
    color: #2c3e50;
    text-align: center;
}

2. Sections avec bordures arrondies et ombres :

section {
    border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}