Italiano

Tutorial CSS

Tutorial CSS3

CSS Avanzato

Riferimenti CSS

CSS Reattivo

CSS - Guida Rapida

Benvenuti, futuri sviluppatori web! Oggi ci immergeremo nel mondo colorato del CSS. Prendete il vostro seggiolino, perché stiamo per intraprendere un viaggio che trasformerà per sempre il modo in cui vedete i siti web!

CSS - Quick Guide

Cos'è il CSS?

CSS, o fogli di stile a cascata, è come il fashion designer del mondo web. Se l'HTML è lo scheletro di un sito web, il CSS è la pelle, i vestiti e il trucco. È ciò che rende i siti web belli e unici.

Immaginate di costruire una casa. L'HTML sarebbe i mattoni e il cemento, mentre il CSS sarebbe la vernice, il tovaglie e i mobili. È ciò che trasforma una struttura piatta in una casa.

Iniziamo con un esempio semplice:

body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}

Questo piccolo pezzo di CSS dice al browser di dipingere l'intera pagina di un colore grigio chiaro (#f0f0f0) e di usare Arial come font predefinito. Se Arial non è disponibile, userà qualsiasi font sans-serif.

CSS - Sintassi

La sintassi CSS è come una ricetta. Ha due parti principali: il selettore e il blocco di dichiarazione.

selettore {
proprietà: valore;
}

Il selettore punta all'elemento HTML che si desidera stilizzare. Il blocco di dichiarazione contiene una o più dichiarazioni separate da punto e virgola. Ogni dichiarazione include un nome di proprietà CSS e un valore, separati da due punti.

Guardiamo un esempio più complesso:

h1 {
color: blue;
font-size: 24px;
text-align: center;
}

Qui, stiamo mirando a tutti gli elementi <h1>. Stiamo rendendo il testo blu, impostando la sua dimensione a 24 pixel e centrandolo sulla pagina.

CSS - Inclusione

Ci sono tre modi per includere il CSS nel vostro HTML:

  1. CSS inline
  2. CSS interno
  3. CSS esterno

CSS Inline

Il CSS inline viene applicato direttamente a un elemento HTML utilizzando l'attributo style. È come dare consigli di moda a una sola persona.

<p style="color: red; font-size: 16px;">Questo è un paragrafo rosso.</p>

CSS Interno

Il CSS interno viene posizionato nella sezione <head> di una pagina HTML, all'interno dei tag <style>. È come stabilire le regole di dress code per tutti a una festa.

<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
</head>

CSS Esterno

Il CSS esterno è memorizzato in un file separato con estensione .css. È collegato al file HTML utilizzando il tag <link>. È come creare una rivista di moda a cui tutti possono fare riferimento.

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

CSS - Unità di Misura

CSS ha diverse unità per esprimere la lunghezza. Esaminiamo le più comuni:

Unità Descrizione
px Pixel (1px = 1/96esimo di 1in)
% Percentuale
em Relativo alla dimensione del font dell'elemento (2em significa 2 volte la dimensione del font corrente)
rem Relativo alla dimensione del font dell'elemento radice
vw Relativo al 1% della larghezza della viewport
vh Relativo al 1% dell'altezza della viewport

Ecco un esempio che utilizza diverse unità:

div {
width: 300px;
height: 50%;
font-size: 1.5em;
padding: 2rem;
margin-top: 10vh;
}

CSS - Colori

I colori in CSS possono essere specificati in diversi modi:

  1. Per nome: red, blue, green, ecc.
  2. Per valori RGB: rgb(255, 0, 0) per il rosso
  3. Per codici esadecimali: #FF0000 per il rosso

Vediamo questi in azione:

h1 {
color: blue;
}

p {
color: rgb(255, 0, 0);
}

div {
background-color: #00FF00;
}

CSS - Sfondi

Gli sfondi possono davvero fare risaltare il vostro sito web. Potete impostare un colore di sfondo, un'immagine, o entrambi!

body {
background-color: #f0f0f0;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

Questo CSS imposta un colore di sfondo grigio chiaro, aggiunge un'immagine centrata nella pagina, garantisce che l'immagine non si ripeta, e la fa coprire l'intera viewport.

CSS - Font

I font sono fondamentali per la leggibilità e lo stile. Ecco come potete impostare i font:

body {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: italic;
}

Questo imposta Helvetica come font preferito, con Arial e qualsiasi font sans-serif come backup. Imposta anche la dimensione a 16 pixel, il peso a normale e lo stile a italic.

CSS - Testo

Le proprietà del testo controllano come viene visualizzato il testo:

p {
color: #333;
text-align: justify;
text-decoration: underline;
text-transform: uppercase;
line-height: 1.5;
}

Questo CSS rende il testo di un colore grigio scuro, giustificato, sottolineato, tutto maiuscolo, con un'altezza della linea 1.5 volte quella normale.

CSS - Utilizzo delle Immagini

Le immagini possono essere stilizzate come qualsiasi altro elemento:

img {
width: 100%;
max-width: 500px;
height: auto;
border-radius: 50%;
}

Questo rende l'immagine reattiva (larghezza 100% fino a 500px), mantenendo le proporzioni, e le dà una forma circolare.

CSS - Link

I link possono essere stilizzati diversamente in base al loro stato:

a {
color: blue;
text-decoration: none;
}

a:hover {
color: red;
text-decoration: underline;
}

a:visited {
color: purple;
}

Questo cambia il colore del link a blu, rimuove la sottolineatura, lo rende rosso e lo sottolinea all'hover, e rende i link visitati di colore viola.

Ricorda, il CSS è tutto sobre creatività e sperimentazione. Non aver paura di giocare con diverse proprietà e valori. Più pratichi, meglio diventerai a creare bellissimi design web reattivi. Buon codice!

Credits: Image by storyset

Tutorial precedente:
CSS - Domande e risposte
Prossimo tutorial:
CSS - Riferimenti