🧪 TP2 : Découverte du CSS

🎯 Objectifs

Comprendre le rôle du CSS.
Modifier l’apparence d’une page HTML.
Appliquer différents styles sur du texte et une image.

🧬 Contexte

Le CSS permet de modifier l’apparence d’une page HTML : couleurs, polices, tailles, bordures, ombres, etc. Dans ce TP, vous allez styliser une page simple et appliquer différents styles à une image.

🌐 Outil utilisé

Capytale : pour écrire et afficher votre code HTML/CSS.

🔧 Consignes pour utiliser Capytale

Ouvrir Capytale depuis l'adresse https://capytale2.ac-paris.fr/web/c/0cab-8823341
Compléter le fichier nommé index.html.
Copier-coller le programme ci-dessous dans votre fichier.
Cliquer sur Afficher / Exécuter pour visualiser votre page web.

Vous pouvez modifier les couleurs, les tailles et les styles pour personnaliser votre page.

💻 Code HTML + CSS à copier

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Découverte du CSS</title>

    <style>
        body {
            background-color: lightyellow;
            font-family: Arial;
        }
        h1 {
            color: darkblue;
            text-align: center;
        }
        p {
            color: darkgreen;
            font-size: 18px;
        }
        /* 🎨 CSS de l'image à modifier */
        img {
            width: 180px;
            border: 4px solid blue;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            display: block;
            margin: 20px auto;
        }
    </style>
</head>

<body>
    <h1>Ma page stylisée avec CSS</h1>

    <p>Ce texte est stylé grâce au CSS.</p>
    <p>Modifiez les couleurs, la taille, l’alignement...</p>

    <h2>Image à styliser</h2>

    <img src="https://www.planetephysique.fr/2015/SNT2021/turtle.jpg"
         alt="image générée par Turle">

</body>
</html>

❓ Questions

À quoi sert le CSS ?
Quelle propriété permet de changer la couleur du texte ?
Quelle propriété permet de centrer un titre ?
Modifiez la page pour que le fond soit rose et le texte en bleu.
Ajoutez une bordure rouge autour de l’image.
Arrondissez les coins de l’image à 50px.
Augmentez l’ombre portée de l’image.
Changez la taille de l’image (plus grande ou plus petite).

📁 Enregistrement du fichier

Nom du fichier : TP_CSS2
Dossier : SNT sur le bureau de votre ordinateur