Créer un site web est un excellent moyen de vous exprimer créativement. Bien que de nombreux outils no-code existent, coder vous-même HTML et CSS est une façon ludique et enrichissante de comprendre le fonctionnement des sites web. Ce tutoriel débutant vous guide pour créer une page simple et y ajouter une image de fond avec CSS.
CSS signifie Cascading Style Sheets (Feuilles de style en cascade). C'est un langage qui permet de styliser les documents HTML (HyperText Markup Language), langages de balisage utilisés pour structurer les sites web. HTML gère la structure, tandis que CSS offre un contrôle précis sur l'apparence, les couleurs, les polices et les images de fond.
Pour utiliser CSS, commencez par une page HTML simple affichant "Bonjour le monde".
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Bonjour le monde</p>
</body>
</html>HTML utilise des balises comme <p></p> pour définir les paragraphes, <body></body> pour le contenu visible, et <head></head> pour les métadonnées.
Ajoutez une bordure au paragraphe via un style inline :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="border-style: solid;">Bonjour le monde</p>
</body>
</html>Ajoutez du padding et centrez le texte :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="border-style: solid; padding: 30px; text-align: center;">Bonjour le monde</p>
</body>
</html>Pour un code plus propre, déplacez les styles dans <head> :
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
}
#paragraphePrincipal {
border-style: solid;
padding: 30px;
}
</style>
</head>
<body>
<p id="paragraphePrincipal">Bonjour le monde</p>
</body>
</html>Les sélecteurs p ciblent tous les paragraphes, #paragraphePrincipal un élément spécifique via son ID.
Pour réutiliser les styles sur plusieurs pages, créez styles.css :
p {
text-align: center;
}
#paragraphePrincipal {
border-style: solid;
padding: 30px;
}Liez-le dans HTML :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p id="paragraphePrincipal">Bonjour le monde</p>
</body>
</html>Appliquez une image de fond au <body> :
body {
background-image: url("sky.jpg");
}
p {
text-align: center;
}
#paragraphePrincipal {
border-style: solid;
padding: 30px;
}Propriétés CSS : background-image: url("chemin/vers/image.jpg");. Ajoutez background-repeat: no-repeat; pour éviter la répétition. Pour couvrir tout l'écran sans déformation : background-size: cover;.
Améliorez la lisibilité du paragraphe :
body {
background-image: url("sky.jpg");
}
p {
text-align: center;
}
#paragraphePrincipal {
background-color: white;
border-style: solid;
padding: 30px;
}
Maâtrisez la syntaxe : sélecteur { propriété: valeur; }. Expérimentez avec MDN CSS Reference. Défi : changez la couleur du texte !
[]