sabato 15 febbraio 2025

Corso di CSS & Web Design: 2 – Colori, font e testo

2 – Colori, font e testo

1. Gestione dei colori in CSS

In CSS possiamo definire i colori in diversi formati:

1.1 RGB

Rappresenta il colore tramite rosso, verde e blu (Red, Green, Blue) con valori da 0 a 255:

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

1.2 HEX

Codice esadecimale, formato #RRGGBB:

p {
  color: #00ff00; /* verde */
}

1.3 HSL

Hue-Saturation-Lightness (tonalità, saturazione, luminosità):

p {
  color: hsl(240, 100%, 50%); /* blu puro */
}

1.4 Trasparenze (RGBA / HSLA)

Aggiunge un canale alpha (0 = trasparente, 1 = opaco):

p {
  color: rgba(255, 0, 0, 0.5); /* rosso semi-trasparente */
}

2. Proprietà tipografiche

2.1 font-family

Definisce il tipo di carattere:

p {
  font-family: Arial, sans-serif;
}

Consiglio: sempre prevedere un “fallback” (sans-serif, serif, monospace).

2.2 font-size

Dimensione del testo. Valori comuni:

p {
  font-size: 16px;   /* pixel */
  font-size: 1.2em;  /* em relativi al font del genitore */
  font-size: 120%;   /* percentuale relativa al genitore */
}

2.3 line-height

Altezza della riga, utile per leggibilità:

p {
  line-height: 1.5; /* 1.5 volte l'altezza del font */
}

2.4 font-weight

Spessore del carattere:

p {
  font-weight: bold; /* normal, bold, 100-900 */
}

2.5 font-style

Stile del testo:

p {
  font-style: italic; /* normal, italic, oblique */
}

3. Allineamento e decorazioni del testo

3.1 text-align

Allinea il testo orizzontalmente:

p {
  text-align: left;   /* left, right, center, justify */
}

3.2 text-decoration

Decorazioni del testo:

p {
  text-decoration: underline; /* none, underline, line-through, overline */
}

3.3 text-transform

Trasformazioni di maiuscole/minuscole:

p {
  text-transform: uppercase; /* lowercase, capitalize */
}

4. Uso di Google Fonts

Per importare font personalizzati:

Andare su Google Fonts, scegliere un font.
Copiare il link nel <head> dell’HTML:

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Usare il font nel CSS:

body {
  font-family: 'Roboto', sans-serif;
}

5. Esercizio svolto: creare una landing page con tipografia personalizzata

Obiettivo

Creare una pagina con titolo e paragrafi usando colori, font e allineamenti personalizzati.

HTML

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Landing Page CSS</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="stile.css">
</head>
<body>
  <h1 id="titolo">Benvenuti nella Landing Page!</h1>
  <p class="sottotitolo">Scopri i nostri servizi e soluzioni innovative.</p>
  <p class="contenuto">Questa sezione contiene testo descrittivo della landing page, personalizzato con font e colori.</p>
</body>
</html>

CSS (stile.css)

/* Titolo principale */
#titolo {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: hsl(210, 100%, 40%);
  text-align: center;
  margin-bottom: 20px;
}

/* Sottotitolo */
.sottotitolo {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: rgb(50, 50, 50);
  text-align: center;
  text-transform: uppercase;
}

/* Contenuto */
.contenuto {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333333;
  text-align: justify;
  background-color: rgba(173, 216, 230, 0.2); /* azzurro leggermente trasparente */
  padding: 15px;
  border-radius: 8px;
}

Risultato

Titolo grande, blu scuro, centrato.
Sottotitolo maiuscolo, centrato e leggero.
Paragrafo giustificato, colore neutro, sfondo azzurro trasparente con padding.
Tutti i testi utilizzano il font Roboto importato da Google Fonts.

SILICIO E NUVOLE