Summary  
This chapter covers how to link an external CSS file to an HTML document and apply cascading stylesheet rules—using element and class selectors—to control colors, typography, spacing, and layout. It also demonstrates best practices like resetting default margins and padding and adhering to a consistent color palette.

General domain of usage  
Front-end web development

## 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 (<a href="https://colorhunt.co/" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" >https://colorhunt.co/</a>) 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`.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9IlVURi04IiAvPgogICAgPG1ldGEgbmFtZT0idmlld3BvcnQiIGNvbnRlbnQ9IndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjAiIC8+CiAgICA8dGl0bGU+TXkgQmxvZzwvdGl0bGU+CgogICAgPCEtLSBMaW5raW5nIENTUyBmaWxlIHRvIEhUTUwgZG9jdW1lbnQgLS0+CiAgICA8bGluayByZWw9InN0eWxlc2hlZXQiIGhyZWY9ImluZGV4LmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8aGVhZGVyPgogICAgICA8aDE+V2VsY29tZSB0byBNeSBCbG9nPC9oMT4KICAgIDwvaGVhZGVyPgoKICAgIDxtYWluPgogICAgICA8YXJ0aWNsZT4KICAgICAgICA8aDI+QXJ0aWNsZSAxOiBFeHBsb3JpbmcgTmF0dXJlPC9oMj4KICAgICAgICA8cD4KICAgICAgICAgIExvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LCBjb25zZWN0ZXR1ciBhZGlwaXNjaW5nIGVsaXQuIFNlZCBldWlzbW9kLCB0b3J0b3Igbm9uCiAgICAgICAgICB1bGxhbWNvcnBlciBjb21tb2RvLCBqdXN0byBsaWJlcm8gbWF4aW11cyBwdXJ1cywgdmVsIHB1bHZpbmFyIHR1cnBpcyBxdWFtIHZpdGFlIG1pLiBOdWxsYW0KICAgICAgICAgIGF1Y3RvciwgdG9ydG9yIGlkIHNhZ2l0dGlzIGZlcm1lbnR1bSwgbGVvIGxhY3VzIHZlbmVuYXRpcyB0b3J0b3IsIGF0IHRyaXN0aXF1ZSBsZW8gbWFnbmEKICAgICAgICAgIGluIGxvcmVtLgogICAgICAgIDwvcD4KICAgICAgICA8aW1nIHNyYz0ibmF0dXJlLmpwZyIgYWx0PSJOYXR1cmUgSW1hZ2UiIC8+CiAgICAgICAgPHA+Q2F0ZWdvcnk6IE5hdHVyZTwvcD4KICAgICAgPC9hcnRpY2xlPgoKICAgICAgPGFydGljbGU+CiAgICAgICAgPGgyPkFydGljbGUgMjogQ29va2luZyBBZHZlbnR1cmVzPC9oMj4KICAgICAgICA8cD4KICAgICAgICAgIFBoYXNlbGx1cyBydXRydW0gdGluY2lkdW50IHNhcGllbiwgc2VkIHZlc3RpYnVsdW0gdmVsaXQgdmVoaWN1bGEgbmVjLiBTZWQgcGhhcmV0cmEgZHVpIGluCiAgICAgICAgICBmZXJtZW50dW0gc29kYWxlcy4gUGVsbGVudGVzcXVlIGhhYml0YW50IG1vcmJpIHRyaXN0aXF1ZSBzZW5lY3R1cyBldCBuZXR1cyBldCBtYWxlc3VhZGEKICAgICAgICAgIGZhbWVzIGFjIHR1cnBpcyBlZ2VzdGFzLgogICAgICAgIDwvcD4KICAgICAgICA8aW1nIHNyYz0iY29va2luZy5qcGciIGFsdD0iQ29va2luZyBJbWFnZSIgLz4KICAgICAgICA8cD5DYXRlZ29yeTogQ29va2luZzwvcD4KICAgICAgPC9hcnRpY2xlPgoKICAgICAgPGFydGljbGU+CiAgICAgICAgPGgyPkFydGljbGUgMzogVHJhdmVsaW5nIEFyb3VuZCB0aGUgV29ybGQ8L2gyPgogICAgICAgIDxwPgogICAgICAgICAgTnVsbGFtIGVmZmljaXR1ciBsYWN1cyBuZWMgdXJuYSBmcmluZ2lsbGEsIHV0IHZlbmVuYXRpcyB0b3J0b3IgbGFjaW5pYS4gRHVpcyB2aXRhZSBtYXVyaXMKICAgICAgICAgIHNlZCBtaSBzZW1wZXIgYWxpcXVldC4gQWVuZWFuIHZlc3RpYnVsdW0gbGliZXJvIGVnZXQgbmliaCBtYWxlc3VhZGEsIGlkIGx1Y3R1cyBsaWJlcm8KICAgICAgICAgIHBoYXJldHJhLiBGdXNjZSBhdWN0b3IgbWF1cmlzIHNlZCB0cmlzdGlxdWUgZWZmaWNpdHVyLgogICAgICAgIDwvcD4KICAgICAgICA8aW1nIHNyYz0idHJhdmVsLmpwZyIgYWx0PSJUcmF2ZWwgSW1hZ2UiIC8+CiAgICAgICAgPHA+Q2F0ZWdvcnk6IFRyYXZlbDwvcD4KICAgICAgPC9hcnRpY2xlPgogICAgPC9tYWluPgoKICAgIDxmb290ZXI+CiAgICAgIDxwPiZjb3B5OyAyMDI0IE15IEJsb2cuIEFsbCByaWdodHMgcmVzZXJ2ZWQuPC9wPgogICAgPC9mb290ZXI+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogUmVzZXQgZGVmYXVsdCBtYXJnaW4gYW5kIHBhZGRpbmcgKi8KYm9keSwKaDEsCmgyLApwLAppbWcgewogIG1hcmdpbjogMDsKICBwYWRkaW5nOiAwOwp9CgovKiBBcHBseSBmb250IGFuZCBiYWNrZ3JvdW5kIGNvbG9ycyAqLwpib2R5IHsKICBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2UyZGZkMDsKICBjb2xvcjogIzMyMDEyZjsKfQoKLyogSGVhZGVyIHN0eWxpbmcgKi8KaGVhZGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTI0YzQyOwogIHBhZGRpbmc6IDIwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwp9CgovKiBNYWluIGNvbnRlbnQgc3R5bGluZyAqLwptYWluIHsKICBwYWRkaW5nOiAyMHB4Owp9CgovKiBBcnRpY2xlIHN0eWxpbmcgKi8KYXJ0aWNsZSB7CiAgbWFyZ2luLWJvdHRvbTogMzBweDsKfQoKLyogQXJ0aWNsZSB0aXRsZSBzdHlsaW5nICovCmFydGljbGUgaDIgewogIGNvbG9yOiAjMzIwMTJmOwogIGZvbnQtc2l6ZTogMjRweDsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9CgovKiBBcnRpY2xlIHBhcmFncmFwaCBzdHlsaW5nICovCmFydGljbGUgcCB7CiAgbGluZS1oZWlnaHQ6IDEuNjsKICBtYXJnaW4tYm90dG9tOiAxNXB4Owp9CgovKiBJbWFnZSBzdHlsaW5nICovCmFydGljbGUgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXgtd2lkdGg6IDEwMCU7CiAgaGVpZ2h0OiBhdXRvOwogIG1hcmdpbi1ib3R0b206IDE1cHg7Cn0KCi8qIENhdGVnb3J5IHN0eWxpbmcgKi8KYXJ0aWNsZSBwOmxhc3QtY2hpbGQgewogIGZvbnQtc3R5bGU6IGl0YWxpYzsKICBjb2xvcjogI2Y5NzMwMDsKfQoKLyogRm9vdGVyIHN0eWxpbmcgKi8KZm9vdGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTI0YzQyOwogIGNvbG9yOiAjZTJkZmQwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBwYWRkaW5nOiAxMHB4Owp9

Embarquez pour un voyage captivant à travers les bases de la théorie et des technologies du web. Approfondissez votre compréhension grâce aux insights de ChatGPT et concluez votre apprentissage en créant votre site web entièrement fonctionnel avec l'IA. Ce cours est votre porte d'entrée pour maîtriser les essentiels de HTML, CSS et JavaScript tout en exploitant la puissance de ChatGPT pour améliorer l'interactivité et l'intelligence de vos projets web.

Découvrez les concepts clés et les technologies du développement web, y compris le rôle de l'IA dans le codage moderne. Cette section pose les bases de votre parcours d'apprentissage, couvrant les fondamentaux du développement web et comment l'IA améliore la productivité, la créativité et l'efficacité dans le codage.

Apprenez les technologies essentielles du développement web. Plongez dans les rudiments de HTML, CSS et JavaScript, en démêlant leurs fonctionnalités individuelles et leur rôle collectif dans la formation du paysage numérique.

Découvrez la puissance de ChatGPT en explorant ses capacités et en apprenant à l'utiliser efficacement. Obtenez des informations sur la création de prompts et le travail avec le code via ChatGPT. Terminez avec des conseils pratiques sur l'utilisation de ChatGPT dans diverses applications.

Construisez le site web du blog ! Créez un site web de blog complet et fonctionnel à partir de zéro, en incorporant diverses techniques de développement web en utilisant ChatGPT.

Appliquer le Style du Site Web avec CSS

Objectif

Invite Possible

Résultat

État du site Web