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

## Obiettivo
Il passo successivo consiste nell'aggiungere stili al nostro sito affinché non appaia come semplice HTML grezzo. Forniremo inoltre i colori che desideriamo visualizzare sul sito web.

Possiamo utilizzare la seguente fonte (<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>) per selezionare la palette di colori che preferiamo.

Abbiamo selezionato la seguente palette di colori:

## Possibile Prompt
Crea un foglio di stile CSS da applicare a quell'HTML, assicurandoti che includa elementi di stile e rispetti la seguente palette di colori: `#32012F`, `#524C42`, `#E2DFD0` e `#F97300`. Scrivi il codice CSS completo per ottenere questo risultato, incorporando le migliori pratiche per un design visivamente gradevole.

## Risultato
**Importante:** L'unica modifica da apportare al nostro codice è collegare il file CSS al file HTML nell'elemento `head`.

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

LyogUmVzZXQgZGVmYXVsdCBtYXJnaW4gYW5kIHBhZGRpbmcgKi8KYm9keSwKaDEsCmgyLApwLAppbWcgewogIG1hcmdpbjogMDsKICBwYWRkaW5nOiAwOwp9CgovKiBBcHBseSBmb250IGFuZCBiYWNrZ3JvdW5kIGNvbG9ycyAqLwpib2R5IHsKICBmb250LWZhbWlseTogQXJpYWwsIHNhbnMtc2VyaWY7CiAgYmFja2dyb3VuZC1jb2xvcjogI2UyZGZkMDsKICBjb2xvcjogIzMyMDEyZjsKfQoKLyogSGVhZGVyIHN0eWxpbmcgKi8KaGVhZGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTI0YzQyOwogIHBhZGRpbmc6IDIwcHg7CiAgdGV4dC1hbGlnbjogY2VudGVyOwp9CgovKiBNYWluIGNvbnRlbnQgc3R5bGluZyAqLwptYWluIHsKICBwYWRkaW5nOiAyMHB4Owp9CgovKiBBcnRpY2xlIHN0eWxpbmcgKi8KYXJ0aWNsZSB7CiAgbWFyZ2luLWJvdHRvbTogMzBweDsKfQoKLyogQXJ0aWNsZSB0aXRsZSBzdHlsaW5nICovCmFydGljbGUgaDIgewogIGNvbG9yOiAjMzIwMTJmOwogIGZvbnQtc2l6ZTogMjRweDsKICBtYXJnaW4tYm90dG9tOiAxMHB4Owp9CgovKiBBcnRpY2xlIHBhcmFncmFwaCBzdHlsaW5nICovCmFydGljbGUgcCB7CiAgbGluZS1oZWlnaHQ6IDEuNjsKICBtYXJnaW4tYm90dG9tOiAxNXB4Owp9CgovKiBJbWFnZSBzdHlsaW5nICovCmFydGljbGUgaW1nIHsKICBkaXNwbGF5OiBibG9jazsKICBtYXgtd2lkdGg6IDEwMCU7CiAgaGVpZ2h0OiBhdXRvOwogIG1hcmdpbi1ib3R0b206IDE1cHg7Cn0KCi8qIENhdGVnb3J5IHN0eWxpbmcgKi8KYXJ0aWNsZSBwOmxhc3QtY2hpbGQgewogIGZvbnQtc3R5bGU6IGl0YWxpYzsKICBjb2xvcjogI2Y5NzMwMDsKfQoKLyogRm9vdGVyIHN0eWxpbmcgKi8KZm9vdGVyIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjNTI0YzQyOwogIGNvbG9yOiAjZTJkZmQwOwogIHRleHQtYWxpZ246IGNlbnRlcjsKICBwYWRkaW5nOiAxMHB4Owp9

Apprendi le basi dello sviluppo web sfruttando la potenza degli strumenti di IA come ChatGPT. Comprendi i ruoli di HTML, CSS e JavaScript nella creazione di siti web e come l'IA possa migliorare la velocità e la creatività nella programmazione. Esercitati nella creazione di prompt efficaci e nella generazione di codice con ChatGPT. Realizza un sito blog completo da zero utilizzando lo sviluppo assistito dall'IA, acquisendo competenze pratiche per i tuoi progetti web.

Introduzione ai concetti chiave e alle tecnologie nello sviluppo web, incluso il ruolo dell'IA nella programmazione moderna. Questa sezione pone le basi per il percorso di apprendimento, trattando le nozioni fondamentali dello sviluppo web e come l'IA migliori produttività, creatività ed efficienza nella programmazione.

Apprendere le tecnologie essenziali per lo sviluppo web. Esplorazione dei fondamenti di HTML, CSS e JavaScript, analizzando le loro funzionalità individuali e il ruolo collettivo nella definizione del panorama digitale.

Scopri la potenza di ChatGPT esplorandone le capacità e imparando come utilizzarlo in modo efficace.
Approfondimenti sulla creazione di prompt e sull'utilizzo del codice tramite ChatGPT.
Conclusione con suggerimenti pratici su come sfruttare ChatGPT in diverse applicazioni.

Creazione di un sito web di blog completo e funzionale da zero, integrando diverse tecniche di sviluppo web utilizzando ChatGPT.

Applicazione Dello Stile Del Sito Web Con CSS

Obiettivo

Possibile Prompt

Risultato

Stato del sito web