Basi di CSS
Un’introduzione allo stile con CSS (panoramica facoltativa)
Basi di CSS è una lezione HTML for Kids gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML for Kids, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML for Kids include 4 lezioni in totale.
Basi dei CSS: introduzione allo styling con i CSS
Benvenuto nel mondo dei CSS! Oggi impareremo a usare i Cascading Style Sheets (CSS) per definire lo stile delle Sue pagine web e renderle straordinarie.
Che cos'è il CSS?
CSS è l'acronimo di Cascading Style Sheets. È un linguaggio usato per controllare l'aspetto e lo stile delle Sue pagine web.
Con i CSS può cambiare colori, caratteri, layout e molto altro!
Come funzionano i CSS
I CSS funzionano selezionando gli elementi HTML e applicando loro degli stili. Può usare i CSS in tre modi:
- Inline: aggiunga gli stili direttamente agli elementi HTML.
- Interno: aggiunga gli stili all'interno di un tag
<style>nel<head>. - Esterno: usi un file CSS separato.
In questa lezione ci concentreremo sugli stili interni ed esterni.
CSS interno
Il CSS interno viene scritto all'interno di un tag <style> nel <head> del documento HTML.
Esempio:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
p {
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This page has styles applied using internal CSS.</p>
</body>
</html>
CSS esterno
Il CSS esterno viene scritto in un file separato con estensione .css. Lo colleghi al documento HTML usando il tag <link>.
Esempio:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Welcome to External CSS</h1>
<p>This page uses an external CSS file for styling.</p>
</body>
</html>
Selettori nei CSS
I selettori servono a individuare specifici elementi HTML a cui applicare gli stili. Tra i selettori più comuni ci sono:
- Selettore di tag: individua tutti gli elementi con un tag specifico. Esempio:
p. - Selettore di classe: individua gli elementi con una classe specifica. Esempio:
.myClass. - Selettore ID: individua un elemento con un ID specifico. Esempio:
#myID.
Vediamo come usarli!
Selettori di classe e ID
Usi una classe quando desidera definire lo stile di più elementi. Usi un ID per un singolo elemento univoco.
Esempio:
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: red;
font-weight: bold;
}
#unique {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<p class="highlight">This is highlighted text.</p>
<p id="unique">This text is unique.</p>
</body>
</html>
Provi in autonomia
Creiamo una pagina web usando il CSS interno. Ecco un esempio da cui iniziare:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lavender;
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
color: darkmagenta;
}
p {
color: gray;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>Welcome to My Styled Page</h1>
<p>This is an example of using internal CSS to style a page.</p>
</body>
</html>
Ottimo lavoro!
Congratulazioni! Ha imparato le basi dei CSS e come usarli per definire lo stile delle Sue pagine web. I CSS rendono le Sue pagine professionali e visivamente accattivanti. Nella prossima lezione approfondiremo colori e sfondi per rendere le Sue pagine ancora più vivaci. Si prepari a dare libero sfogo alla Sua creatività!
Domande Frequenti
La lezione «Basi di CSS» è gratuita?
Sì — il testo completo di «Basi di CSS» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML for Kids, passa a CoddyKit PRO. Il corso HTML for Kids include 4 lezioni in totale.
Cosa imparerò in «Basi di CSS»?
Un’introduzione allo stile con CSS (panoramica facoltativa) Eserciti HTML for Kids con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML for Kids?
Non è richiesta alcuna esperienza precedente. HTML for Kids su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Basi di CSS»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML for Kids?
Sì. Ogni lezione HTML for Kids include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.