InnoMarts logo
InnoMarts
Fast websites
← Back to course

Selettori e Styling di Base

Selettori e Styling di Base

Bentornato.

Nella lezione precedente hai imparato cos’è CSS e come collegarlo a HTML.

Ora impariamo i selettori.

I selettori sono il modo in cui CSS sceglie cosa stilizzare.

Senza selettori, CSS sta semplicemente nella stanza a urlare:

“Fallo blu!”

E il browser chiede:

“Cosa esattamente?”

Domanda giusta, browser.

Molto professionale.

Cosa Imparerai

In questa lezione imparerai:

Cos’è un Selettore?

Un selettore dice a CSS quali elementi HTML deve stilizzare.

Esempio:

p {
  color: gray;
}

Qui p è il selettore.

Significa:

Seleziona tutti gli elementi paragrafo e rendi il testo grigio.

CSS deve sempre sapere cosa deve stilizzare.

Il selettore è il “chi”.

Le dichiarazioni sono il “cosa”.

Esempio:

h1 {
  color: blue;
  font-size: 48px;
}

Questo significa:

Trova ogni h1, rendilo blu e grande.

Molto diretto.

Quasi autoritario.

Ma nello sviluppo web, un po’ di autorità può essere utile.

Struttura Base di una Regola CSS

Una regola CSS appare così:

selector {
  property: value;
}

Esempio:

h2 {
  color: #111827;
}

Le parti sono:

Il selettore sceglie l’elemento.

La proprietà dice cosa cambiare.

Il valore dice come cambiarlo.

CSS è una lista di istruzioni.

A volte elegante.

A volte drammatica.

A volte a un punto e virgola mancante dalla confusione.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir css-lesson2
cd css-lesson2
touch index.html
touch style.css

Ora hai:

css-lesson2/
  index.html
  style.css

Apri la cartella nel tuo editor.

Scriveremo prima HTML.

Poi lo stilizzeremo con selettori diversi.

Questo è il piano.

E stavolta il piano potrebbe anche sopravvivere al contatto con il browser.

Scrivi l’HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Selettori CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header id="top">
    <h1>Selettori CSS</h1>
    <p class="intro">I selettori aiutano CSS a trovare gli elementi HTML giusti.</p>
  </header>

  <main>
    <section class="card">
      <h2>Selettori di Elemento</h2>
      <p>I selettori di elemento stilizzano tutti gli elementi dello stesso tipo.</p>
    </section>

    <section class="card featured">
      <h2>Selettori di Classe</h2>
      <p>I selettori di classe sono riutilizzabili e molto utili.</p>
    </section>

    <section class="card">
      <h2>Selettori ID</h2>
      <p>I selettori ID puntano a un elemento unico nella pagina.</p>
    </section>

    <section class="practice-box">
      <h2>Area di Pratica</h2>
      <p>Questa area ci aiuterà a testare diversi selettori.</p>
      <a href="#top">Torna su</a>
    </section>
  </main>

  <footer>
    <p>Creato mentre imparo i selettori CSS.</p>
  </footer>
</body>
</html>

Nota alcune cose importanti:

Questi sono agganci.

CSS può usarli per stilizzare parti specifiche della pagina.

Gli agganci sono importanti.

Senza agganci, CSS deve indovinare.

E CSS non è un investigatore.

Selettori di Elemento

I selettori di elemento puntano agli elementi HTML usando il nome del tag.

Esempio:

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

Questo stilizza tutto il body.

Altro esempio:

p {
  font-size: 18px;
}

Questo stilizza tutti i paragrafi.

Aggiungi questo a style.css:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
  margin: 0;
}

h1 {
  color: white;
  font-size: 48px;
}

h2 {
  color: #111827;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

Questi sono selettori di elemento:

Agiscono su ogni elemento corrispondente nella pagina.

Utili.

Potenti.

Ma a volte troppo generali.

Come usare un rullo da pittura per correggere un puntino minuscolo.

Selettori di Classe

Un selettore di classe punta agli elementi con una classe specifica.

In HTML:

<p class="intro">I selettori aiutano CSS a trovare gli elementi HTML giusti.</p>

In CSS:

.intro {
  font-size: 20px;
}

Il punto . significa classe.

Quindi .intro seleziona ogni elemento con:

class="intro"

Aggiungi questo a style.css:

.intro {
  font-size: 20px;
  color: #dbeafe;
}

Ora solo il paragrafo con classe intro viene stilizzato così.

Le classi sono riutilizzabili.

Puoi usare la stessa classe su molti elementi.

Esempio:

<section class="card">

E CSS:

.card {
  background-color: white;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 12px;
}

Aggiungi questo:

.card {
  background-color: white;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 12px;
}

Ora ogni sezione con classe card riceve lo stesso stile.

Questa è una delle idee più importanti di CSS.

Stili riutilizzabili.

Meno ripetizione.

Meno sofferenza.

Un obiettivo nobile.

Classi Multiple

Un elemento può avere più di una classe.

Esempio:

<section class="card featured">

Questo elemento ha due classi:

Riceve gli stili di entrambe.

Aggiungi questo CSS:

.featured {
  border: 2px solid #2563eb;
  background-color: #eff6ff;
}

Ora la card featured riceve uno stile extra.

Ha ancora gli stili normali di .card.

Ma riceve anche gli stili di .featured.

È utile quando vuoi uno stile base più una variazione speciale.

Come una pizza normale.

Poi una pizza con extra formaggio.

CSS capisce l’extra formaggio.

Almeno emotivamente.

Selettori ID

Un selettore ID punta a un solo elemento unico.

In HTML:

<header id="top">

In CSS:

#top {
  background-color: #111827;
}

Il simbolo # significa ID.

Aggiungi questo:

#top {
  background-color: #111827;
  padding: 40px;
  text-align: center;
}

Gli ID dovrebbero essere unici nella pagina.

Questo significa che non dovresti avere molti elementi con lo stesso ID.

Usa gli ID con attenzione.

Per lo styling, di solito le classi sono migliori.

Gli ID sono utili per:

Pensa all’ID come a un numero di passaporto.

La classe è più come una maglietta di squadra.

Molte persone possono avere la stessa maglietta.

Una sola persona dovrebbe avere lo stesso numero di passaporto.

Selettori Raggruppati

A volte vuoi applicare lo stesso stile a più selettori.

Invece di scrivere questo:

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

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

Puoi raggrupparli:

h1,
h2 {
  font-family: Arial, sans-serif;
}

La virgola significa:

Applica questa regola a entrambi i selettori.

Esempio:

h1,
h2 {
  margin-top: 0;
}

Aggiungi questo:

h1,
h2 {
  margin-top: 0;
}

I selettori raggruppati aiutano a tenere il CSS più corto e pulito.

CSS più pulito è più facile da leggere.

Più facile da leggere significa più facile da correggere.

Più facile da correggere significa meno sospiri drammatici.

Selettori Discendenti

Un selettore discendente punta a un elemento dentro un altro elemento.

Esempio:

footer p {
  color: #666;
}

Questo significa:

Seleziona ogni p dentro footer.

Non seleziona tutti i paragrafi.

Solo i paragrafi dentro il footer.

Aggiungi questo:

footer p {
  color: #666;
  text-align: center;
}

Altro esempio:

.practice-box a {
  color: #2563eb;
  font-weight: bold;
}

Questo punta ai link dentro .practice-box.

Aggiungilo:

.practice-box a {
  color: #2563eb;
  font-weight: bold;
}

I selettori discendenti sono utili quando il contesto conta.

Un link in un paragrafo può sembrare normale.

Un link dentro una box speciale può avere uno stile diverso.

CSS può gestirlo.

CSS ha opinioni.

Molte opinioni.

Stilizza il Layout

Ora aggiungi più struttura alla pagina:

main {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

.practice-box {
  background-color: #fff7ed;
  padding: 24px;
  border-radius: 12px;
  border: 2px dashed #fb923c;
}

footer {
  padding: 20px;
}

Ora la pagina dovrebbe sembrare più organizzata.

Stai usando:

È un passo serio.

La cassetta degli attrezzi CSS si sta aprendo.

Cerca di non colpirti con il martello.

CSS Completo

Il tuo style.css dovrebbe ora essere così:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #222;
  margin: 0;
}

#top {
  background-color: #111827;
  padding: 40px;
  text-align: center;
}

h1 {
  color: white;
  font-size: 48px;
}

h2 {
  color: #111827;
}

h1,
h2 {
  margin-top: 0;
}

p {
  font-size: 18px;
  line-height: 1.6;
}

.intro {
  font-size: 20px;
  color: #dbeafe;
}

main {
  max-width: 800px;
  margin: 40px auto;
  padding: 20px;
}

.card {
  background-color: white;
  padding: 24px;
  margin-bottom: 20px;
  border-radius: 12px;
}

.featured {
  border: 2px solid #2563eb;
  background-color: #eff6ff;
}

.practice-box {
  background-color: #fff7ed;
  padding: 24px;
  border-radius: 12px;
  border: 2px dashed #fb923c;
}

.practice-box a {
  color: #2563eb;
  font-weight: bold;
}

footer {
  padding: 20px;
}

footer p {
  color: #666;
  text-align: center;
}

Salva.

Aggiorna il browser.

Osserva.

Se non è cambiato nulla, controlla:

Il bug “ho dimenticato di salvare” è leggendario.

Ha sconfitto molti sviluppatori coraggiosi.

Classe o ID?

Usa classi nella maggior parte dei casi.

Usa ID solo quando qualcosa è davvero unico.

Buon uso della classe:

<section class="card">

Perché potresti avere molte card.

Buon uso dell’ID:

<header id="top">

Perché c’è una sola area top.

Brutta idea:

<section id="card">
<section id="card">
<section id="card">

Non farlo.

Gli ID non dovrebbero ripetersi.

Il browser potrebbe comunque mostrare la pagina.

Ma il codice diventa sospetto.

Come tre persone che usano lo stesso passaporto all’aeroporto.

Errori Comuni

Dimenticare il punto per le classi

Sbagliato:

card {
  background-color: white;
}

Corretto:

.card {
  background-color: white;
}

Senza il punto, CSS cerca un elemento HTML <card>.

E se non lo hai creato, non succede nulla.

CSS è severo.

Non indovina i tuoi sogni.

Dimenticare il cancelletto per gli ID

Sbagliato:

top {
  background-color: black;
}

Corretto:

#top {
  background-color: black;
}

Il # dice a CSS che è un ID.

Senza #, niente selettore ID.

Simbolo minuscolo.

Grande differenza.

Fare selettori troppo generali

Questo modifica tutti i paragrafi:

p {
  color: red;
}

A volte va bene.

A volte vuoi solo una zona:

.card p {
  color: #444;
}

Sii specifico quando serve.

Non stilizzare tutto il villaggio se volevi dipingere solo una porta.

Pratica

Crea una tua pagina con:

Usa:

Prova a stilizzare:

Tieni il CSS organizzato.

Non lanciare stili ovunque come coriandoli dopo un matrimonio.

I coriandoli sono divertenti.

Il debugging dei coriandoli no.

Mini Sfida

Crea tre card:

Dai a tutte le card la classe card.

Dai a Premium Plan anche la classe featured.

Esempio:

<section class="card featured">
  <h2>Premium Plan</h2>
  <p>This plan has extra features.</p>
</section>

Poi stilizza:

È proprio così che funzionano i siti reali.

Stili riutilizzabili.

Variazioni speciali.

Meno caos.

Più controllo.

Riassunto

Oggi hai imparato che:

I selettori sono la base di CSS.

Se capisci i selettori, puoi controllare la pagina.

Se non capisci i selettori, CSS diventa una zuppa misteriosa.

E lo abbiamo già detto:

La zuppa va nella ciotola.

Non nel tuo stylesheet.

Prossima Lezione

Nella prossima lezione stilizzeremo testo, font e colori in modo più dettagliato.

Perché il testo leggibile è importante.

Un sito con testo illeggibile è solo un puzzle con hosting.