Introduzione a CSS

1. Origine di CSS

Quando si è capito che il browser non veniva utilizzato solo per scopi scientifici, ma anche per divertimento, mancava immediatamente qualcosa: video, animazioni, colori, suoni, trasparenze, ecc.

Inizialmente, si voleva aggiungere più tag per tutto ciò, ma poi si è compreso che sarebbero stati centinaia di nuovi tag, il che avrebbe reso molto complesso lavorare con i documenti HTML. Così è nata l'idea di separare la "colorazione del documento" (design) dal suo contenuto. Questo ha portato alla creazione di CSS.

Cascading Style Sheets (CSS) o fogli di stile a cascata, sono uno dei componenti chiave dello sviluppo web, responsabili della presentazione visiva delle pagine web.

CSS è un insieme di proprietà, ciascuna delle quali ha un nome e un valore. Lo sviluppatore web definisce queste proprietà, mentre il browser le rappresenta sullo schermo. Tali proprietà possono essere utilizzate su quasi ogni elemento. Esempio di stili CSS:

Ci sono meno di cento proprietà CSS (chiamate anche attributi CSS). Tuttavia, possono interagire tra loro in modi complessi e creare effetti inattesi. Su CodeGym imparerai a usarle per creare autentiche magie visive sulla pagina 🦄.

2. Stili degli elementi

Per ogni elemento HTML è possibile definire uno stile CSS personalizzato utilizzando l'attributo style.

Esempio:

      
<p style="color: blue; font-size: 16px;">Questo è un esempio di stile inline.</p>
      
    

Questo stile indica al browser che il testo all'interno del paragrafo deve essere visualizzato in colore blu e che la dimensione del carattere dev'essere di 16 pixel di altezza.

In realtà, qui ci sono due "stili":

• color = blue
• font-size = 16px

Sono semplicemente inseriti in un'unica riga, separati da un punto e virgola.

Puoi anche, ad esempio, creare un rettangolo nero e scrivere del testo in bianco al suo interno. Il codice apparirà così:

      
<div style="width:100%; height:200px;color:white;background-color:black"> 
Testo bianco su sfondo nero 
</div>
      
    

3. Colori

Studieremo i CSS in dettaglio dopo aver imparato l'HTML. Ma per iniziare, diamo un'occhiata ai colori. Con il CSS puoi definire qualsiasi colore che un computer può rappresentare, e anche oltre.

I colori nel CSS sono una parte importante della stilizzazione delle pagine web. Permettono di creare interfacce visivamente accattivanti e intuitive. Esistono diversi modi di specificare i colori in CSS, ognuno con le proprie caratteristiche e applicazioni.

1. Nomi dei colori (Color Names)

CSS supporta oltre 140 nomi di colori standard. Questo è un modo semplice e comprensibile per definire un colore.