Primer lesson: fogli di stile a cascata

Fogli di stile a cascata (CSS) nello sviluppo web

I fogli di stile a cascata, o CSS, sono un linguaggio che indica a una pagina web come apparire. I CSS aggiungono colore, stile e layout alla struttura semplice di un sito web. Proprio come scegli i tuoi vestiti per sentirti bene e apparire ordinato, i CSS aiutano una pagina web ad apparire più elegante e attraente. Nello sviluppo web, usiamo i CSS per cambiare il colore, le dimensioni e la posizione del testo e dei riquadri sulla pagina. Questa lezione ti introdurrà alle basi dei CSS in un linguaggio semplice. Impareremo cos'è il CSS, perché è importante e come funziona con HTML.

Introduzione ai CSS

CSS sta per Cascading Style Sheets. È un linguaggio speciale utilizzato per definire lo stile delle pagine web. Pensate a CSS come alla vernice e alle decorazioni di un edificio. L'edificio è fatto di HTML e CSS lo abbellisce. Utilizzando CSS, potete cambiare il colore di sfondo, gli stili dei caratteri e lo spazio intorno agli elementi della vostra pagina web. CSS è uno strumento che aiuta i web designer a rendere i siti web più belli e accattivanti.

Immagina di colorare un disegno. Le linee del disegno sono come la struttura di base di un sito web. Il CSS è come i pastelli e i pennarelli che danno vita al disegno. Con poche semplici regole, puoi trasformare l'intero disegno da semplice a colorato!

Perché usiamo CSS

Il CSS viene utilizzato per rendere i siti web accattivanti e facili da usare. Mantiene lo stile separato dal contenuto. Ciò significa che i testi e le immagini sulla pagina (forniti dall'HTML) rimangono invariati, mentre il CSS ne controlla l'aspetto. Quando si aggiorna lo stile, non è necessario modificare il contenuto. Questa separazione aiuta gli sviluppatori web a lavorare più velocemente e rende i siti più piacevoli da visitare.

Pensa al CSS come all'abito che scegli. Se indossi abiti diversi, il tuo aspetto sarà diverso, ma sarai sempre la stessa persona. Il CSS modifica l'aspetto di un sito web senza modificarne le informazioni. Questo semplifica l'aggiornamento del design di un intero sito web modificando un solo file CSS.

Come funziona CSS

Il CSS funziona a stretto contatto con l'HTML. L'HTML è la base che definisce la posizione dei vari elementi in una pagina web. Il CSS interviene poi per aggiungere colori, font e stili. Quando un browser carica una pagina web, prima ne costruisce la struttura con l'HTML e poi applica gli stili definiti nel CSS.

Il CSS è scritto come un insieme di regole. Ogni regola è composta da due parti: un selettore e un blocco di dichiarazione. Il selettore indica al browser a quale elemento HTML applicare lo stile. Il blocco di dichiarazione contiene una o più dichiarazioni. Ogni dichiarazione ha una proprietà e un valore. La proprietà è ciò che si desidera modificare, mentre il valore indica come modificarlo.

Ad esempio, per impostare il colore di sfondo della pagina su azzurro, puoi scrivere una regola simile a questa:

 <codice>corpo {
    colore di sfondo: azzurro;
}</codice>

Questa semplice regola modifica lo sfondo dell'intera pagina.

Sintassi di base dei CSS

Una regola CSS di base segue uno schema semplice. Mostra il selettore e un blocco di proprietà e valori. Lo schema si presenta così:

 <codice>selettore {
    proprietà: valore;
}</codice>

Qui, il selettore sceglie quale elemento HTML selezionare. La proprietà indica cosa si desidera modificare, mentre il valore indica come si desidera modificarlo.

Ad esempio, se si desidera che tutto il testo del paragrafo sia blu, si scrive:

 <codice>p {
    colore: blu;
}</codice>

Questa regola indica al browser web che ogni elemento <p> (paragrafo) deve avere testo blu.

Selettori CSS

I selettori CSS ti permettono di scegliere quali elementi della tua pagina web saranno interessati dalle regole di stile. Esistono diversi tipi di selettori, ognuno dei quali funziona in modo leggermente diverso.

Selettore di tipo: questo selettore seleziona tutti gli elementi di un certo tipo. Ad esempio, <code>p {}</code> seleziona tutti i paragrafi della pagina.
Selettore di classe: questo si riferisce agli elementi che hanno un attributo di classe specifico. Nel codice HTML, si scrive <code><p class="greeting"></code> e nel CSS si definisce <code>.greeting {}</code>.
Selettore ID: viene utilizzato per un elemento univoco sulla pagina. Un elemento può avere un attributo ID come <code><h1 id="header"></code>. In CSS, è possibile applicare lo stile a quell'elemento con <code>#header {}</code>.

Questi diversi selettori ti offrono un ampio potere di definire lo stile di parti specifiche della tua pagina web. Ti permettono di indirizzare gli elementi con precisione e di decidere come dovrebbero apparire.

Proprietà e valori CSS

Il CSS offre numerose proprietà diverse che puoi utilizzare per definire lo stile della tua pagina web. Ogni proprietà consente di modificare un aspetto specifico dell'aspetto di un elemento. Alcune proprietà comuni sono:

colore: imposta il colore del testo.
background-color: imposta il colore di sfondo di un elemento.
font-size: modifica la dimensione del testo.
margine: aggiunge spazio all'esterno di un elemento.
padding: aggiunge spazio all'interno di un elemento, attorno al contenuto.

Ogni proprietà CSS è seguita da un valore. Ad esempio, per dare al testo il colore rosso, puoi scrivere:

 <codice>p {
    colore: rosso;
}</codice>

Questa semplice regola fa sì che tutti i paragrafi abbiano il testo rosso. La proprietà color controlla l'aspetto del testo e il valore red indica il colore da utilizzare.

La cascata e l'ereditarietà in CSS

Il termine "cascading" in CSS significa che gli stili possono fluire da una regola all'altra. Se due regole possono essere applicate allo stesso elemento, l'ordine può determinare quale delle due prevale. Questo è simile all'accatastamento di blocchi, dove un blocco a volte copre parte di un altro.

Una regola comune è che gli stili scritti direttamente all'interno di un elemento HTML (chiamati stili inline) sovrascrivono gli stili nel file CSS. Un'altra regola è che se un elemento padre ha uno stile, i suoi elementi figlio possono ereditare quello stile, a meno che non venga specificato diversamente.

Ad esempio, se si imposta il colore del testo di un <div> su verde, anche il testo al suo interno apparirà spesso verde per via dell'ereditarietà. Questo aiuta a mantenere un design coerente in una pagina web.

Colori e caratteri CSS

Con i CSS, puoi cambiare i colori in molti modi. Puoi usare nomi di colori comuni come rosso , blu e verde . Puoi anche usare codici esadecimali come <code>#FF0000</code> per il rosso, o valori RGB come <code>rgb(255, 0, 0)</code>.

I font sono un altro aspetto importante del CSS. Un font è come lo stile di scrittura a mano che si sceglie in un quaderno. In CSS, è possibile modificare la famiglia di font, le dimensioni, il peso e lo stile. Ad esempio, se si desidera che i paragrafi vengano visualizzati in Arial, è possibile utilizzare:

 <codice>p {
    famiglia di caratteri: Arial, sans-serif;
}</codice>

Questa regola indica al browser di visualizzare il testo nel font Arial, se disponibile, e di utilizzare un altro font simile in caso contrario.

Modificando i colori e i caratteri con i CSS, il testo diventa più facile da leggere e la pagina web diventa più interessante da guardare.

Modello di scatola CSS

Il Box Model CSS è un modo per capire come le diverse parti di un elemento sono disposte su una pagina. Ogni elemento è come una scatola. Il Box Model è composto da quattro parti:

Contenuto: questa è l'area in cui si trovano il testo e le immagini.
Imbottitura: è lo spazio attorno al contenuto all'interno della casella.
Bordo: è la linea che circonda la spaziatura interna e il contenuto.
Margine: è lo spazio esterno al bordo che separa l'elemento dagli altri elementi.

Immagina una fotografia. La fotografia stessa è il contenuto. Il passepartout che la circonda è come l'imbottitura. La cornice che tiene insieme il tutto è il bordo. E lo spazio intorno alla cornice è il margine. Utilizzando questo modello, puoi assicurarti che tutte le parti del tuo progetto abbiano spazio ed equilibrio adeguati.

Layout e posizionamento CSS

Il CSS non riguarda solo colori e font; aiuta anche a disporre gli elementi su una pagina web. Questo si chiama layout e posizionamento. Con il CSS, puoi decidere dove posizionare ogni elemento sulla pagina.

Esistono diversi modi per controllare il layout di una pagina web, tra cui:

Display: questa proprietà definisce come un elemento appare nel layout. Ad esempio, <code>display: block;</code> fa sì che un elemento occupi una riga a sé stante, mentre <code>display: inline;</code> consente agli elementi di essere sulla stessa riga.
Posizione: questa proprietà imposta il tipo di metodo di posizionamento utilizzato per un elemento. I valori possono essere static , relative , absolute o fixed . Ad esempio, <code>position: relative;</code> sposta un elemento rispetto alla sua posizione normale.
Flexbox: Flexbox è un modo moderno per disporre gli elementi in righe o colonne. Semplifica l'allineamento degli elementi.

Usare queste tecniche di layout è come disporre i giocattoli su uno scaffale. Decidi dove collocare ogni giocattolo in modo che abbia abbastanza spazio e sia ordinato. Questo rende la tua pagina web più organizzata e invitante.

Esempio di codice CSS

Ecco un esempio di come HTML e CSS interagiscono. Questo codice di esempio mostra una semplice pagina web con un po' di stile:

 <codice><!DOCTYPE html>
<html>
<testa>
  <stile>
    corpo {
      colore di sfondo: azzurro;
    }
    h1 {
      colore: blu navy;
      dimensione carattere: 24px;
    }
    P {
      colore: verde;
      dimensione carattere: 18px;
    }
  </stile>
</testa>
<corpo>
  <h1>La mia prima pagina web</h1>
  <p>Questa è una semplice pagina web realizzata utilizzando CSS.</p>
</corpo>
</html></code>

Questo codice crea una pagina web con sfondo azzurro. Il testo dell'intestazione è blu navy e il testo del paragrafo è verde. Il CSS all'interno del tag <code><style></code> mostra come vengono scritte e applicate le regole.

Come collegare CSS a HTML

Puoi aggiungere CSS al tuo HTML in tre modi principali. Ogni metodo ha il suo utilizzo specifico a seconda della situazione:

CSS in linea: il codice CSS viene scritto direttamente in un elemento HTML utilizzando l'attributo <code>style</code>. Ad esempio: <code><p style="color: blue;">Hello</p></code> cambia il colore del testo di questo singolo paragrafo in blu.
CSS interno: le regole CSS vengono scritte all'interno di un tag <code><style></code> nella sezione head del documento HTML. Questo metodo è utile quando si lavora con una sola pagina web.
CSS esterno: le regole CSS vengono inserite in un file separato, solitamente denominato <code>style.css</code>. Puoi collegare il file CSS al tuo HTML con il tag <code><link></code>. Ad esempio: <code><link rel="stylesheet" href="style.css"></code>. Questo semplifica l'applicazione dello stesso stile a più pagine.

Il metodo esterno è il più comune nello sviluppo web professionale perché mantiene l'HTML ordinato e consente di aggiornare gli stili su più pagine contemporaneamente.

Vantaggi dell'utilizzo di CSS

Il CSS è molto utile in molti modi. Ecco alcuni vantaggi dell'utilizzo del CSS nello sviluppo web:

Separazione tra contenuto e stile: l'HTML gestisce il contenuto e la struttura, mentre il CSS gestisce l'aspetto e il design. Questa separazione semplifica l'aggiornamento del sito web.
Riutilizzabilità: una volta creata una regola CSS, è possibile utilizzarla su molti elementi in pagine diverse. Questo fa risparmiare tempo e mantiene tutto coerente.
Prestazioni del sito web migliorate: con i CSS in file separati, i browser possono caricare gli stili più velocemente e visualizzare la tua pagina web più velocemente.
Design coerente: il CSS aiuta a garantire che ogni pagina del tuo sito web abbia un aspetto simile. Questo crea un'esperienza migliore per gli utenti, che possono comprendere e navigare facilmente nel tuo sito.
Manutenzione semplificata: quando è necessario modificare uno stile, è sufficiente aggiornare un solo file CSS anziché molti file HTML. Questo semplifica la gestione di un sito web.

Usare i CSS è come avere una cassetta degli attrezzi speciale. Ogni strumento della cassetta degli attrezzi ti aiuta a migliorare facilmente l'aspetto della tua pagina web. Con la pratica, scoprirai quanto i CSS possano essere potenti nel rendere i siti web belli e intuitivi.

CSS nel mondo reale

Ogni sito web che visiti utilizza il CSS in qualche modo. Dai tuoi siti di fumetti preferiti alle pagine dei progetti scolastici, il CSS aiuta a creare un layout divertente e di facile lettura. Quando vedi una pagina web colorata con spaziatura ordinata e testo chiaro, è il CSS all'opera.

Si pensi al design di siti web popolari come quelli dedicati a giochi, cartoni animati o storie online. L'uso attento di colori, font e layout contribuisce a rendere questi siti web accattivanti e coinvolgenti. Il CSS viene utilizzato anche in app e siti per dispositivi mobili, garantendo che i contenuti vengano visualizzati correttamente sia sugli schermi di grandi dimensioni che sui telefoni più piccoli.

Nella vita di tutti i giorni, il CSS è simile all'arredamento di una stanza. Potresti scegliere un tema per la tua stanza, appendere quadri colorati e disporre i mobili in modo ordinato. Il CSS fa lo stesso per i siti web. Porta ordine e bellezza nello spazio digitale, rendendolo piacevole per i visitatori.

Riepilogo dei punti chiave

Ecco i punti principali che abbiamo imparato su CSS:

Definizione: CSS è l'acronimo di Cascading Style Sheets e viene utilizzato per definire lo stile delle pagine web.
Ruolo nello sviluppo web: i CSS rendono i siti web accattivanti aggiungendo colori, font e layout.
Sintassi di base: una regola CSS utilizza un selettore e un blocco di dichiarazione in cui le proprietà vengono impostate con valori.
Selettori: i selettori di tipo, classe e id aiutano a selezionare elementi HTML specifici.
Proprietà e valori: CSS utilizza proprietà come colore, colore di sfondo e margine per controllare vari aspetti della progettazione di una pagina web.
Cascata ed ereditarietà: le regole possono sovrascriversi a vicenda e gli stili possono essere trasmessi dagli elementi padre agli elementi figlio.
Box Model: ogni elemento HTML viene trattato come un box con contenuto, padding, bordo e margine.
Layout e posizionamento: CSS fornisce metodi per disporre gli elementi sulla pagina utilizzando proprietà come display, position e Flexbox.
Metodi per applicare CSS: i CSS possono essere applicati in linea, internamente nella sezione head o esternamente tramite un foglio di stile separato.
Vantaggi: i CSS separano il contenuto dalla presentazione, consentono la riutilizzabilità e garantiscono un design coerente in tutte le pagine web.

Il CSS è una parte fondamentale dello sviluppo web, poiché rende i siti belli e facili da navigare. Man mano che esplori e provi a creare le tue pagine web, ricorda che il CSS è il tuo strumento per esprimere la creatività. Divertiti a sperimentare con colori, font e layout, perché ogni piccolo cambiamento contribuisce alla magia di un sito web ben progettato.

Continua a esercitarti e osserva i tuoi siti web preferiti. Nota come stili diversi vengono utilizzati per catturare la tua attenzione e creare un'esperienza piacevole. Col tempo, scoprirai quanto sia potente il CSS nel trasformare semplici strutture HTML in pagine web visivamente accattivanti.

fogli di stile a cascata