Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Apprendre Appliquer le Style du Site Web avec CSS | Construction du Site Web du Blog
Essentiels du Développement Web avec l'IA

book
Appliquer le Style du Site Web avec CSS

Objectif

La prochaine étape consiste à ajouter des styles à notre site afin qu'il ne ressemble pas à du HTML brut. Nous fournirons également les couleurs que nous souhaitons voir sur le site web.

Nous pouvons utiliser la source suivante (https://colorhunt.co/) pour sélectionner la palette de couleurs que nous préférons.

Nous avons sélectionné une telle palette de couleurs :

Invite Possible

Créez une feuille de style CSS qui peut être appliquée à ce HTML, en veillant à inclure des éléments de style et à respecter la palette de couleurs suivante : #32012F, #524C42, #E2DFD0, et #F97300. Écrivez le code CSS complet pour y parvenir, en incorporant les meilleures pratiques pour un design visuellement attrayant.

Résultat

Important : Le seul changement que nous devons apporter à notre code est de connecter le fichier CSS au fichier HTML dans le head.

html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>My Blog</title>

<!-- Linking CSS file to HTML document -->
<link rel="stylesheet" href="index.css" />
</head>
<body>
<header>
<h1>Welcome to My Blog</h1>
</header>

<main>
<article>
<h2>Article 1: Exploring Nature</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, tortor non
ullamcorper commodo, justo libero maximus purus, vel pulvinar turpis quam vitae mi. Nullam
auctor, tortor id sagittis fermentum, leo lacus venenatis tortor, at tristique leo magna
in lorem.
</p>
<img src="nature.jpg" alt="Nature Image" />
<p>Category: Nature</p>
</article>

<article>
<h2>Article 2: Cooking Adventures</h2>
<p>
Phasellus rutrum tincidunt sapien, sed vestibulum velit vehicula nec. Sed pharetra dui in
fermentum sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas.
</p>
<img src="cooking.jpg" alt="Cooking Image" />
<p>Category: Cooking</p>
</article>

<article>
<h2>Article 3: Traveling Around the World</h2>
<p>
Nullam efficitur lacus nec urna fringilla, ut venenatis tortor lacinia. Duis vitae mauris
sed mi semper aliquet. Aenean vestibulum libero eget nibh malesuada, id luctus libero
pharetra. Fusce auctor mauris sed tristique efficitur.
</p>
<img src="travel.jpg" alt="Travel Image" />
<p>Category: Travel</p>
</article>
</main>

<footer>
<p>&copy; 2024 My Blog. All rights reserved.</p>
</footer>
</body>
</html>

État du site Web

Tutoriel Vidéo

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 3
We use cookies to make your experience better!
some-alt