CSS in linea
Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 6 di 76.
CSS inline è un metodo per aggiungere stili CSS direttamente a un elemento HTML utilizzando l'attributo style. Questo approccio ti consente di applicare stili unici ai singoli elementi senza bisogno di fogli di stile esterni o interni. Gli stili inline sono utili per apportare modifiche rapide e specifiche allo stile di un singolo elemento.
Ecco la sintassi di base per usare CSS inline:
<element style="property: value;"></element><element>: L'elemento HTML a cui vuoi applicare uno stile.style: Un attributo che contiene le dichiarazioni CSS.
property: La proprietà CSS che vuoi impostare (ad es., color, font-size).value: Il valore che vuoi impostare per la proprietà (ad es., blue, 16px).
Ad esempio:
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>In questo esempio, l’elemento paragrafo ha stili in linea che impostano il colore del testo sul blu e la dimensione del carattere su 16 pixel. Questi stili si applicheranno solo a questo specifico elemento paragrafo.
Sfida
FacileTi viene fornito un documento HTML con un elemento paragrafo. Usa CSS in linea per applicare al paragrafo le seguenti proprietà:
- Imposta il colore del testo su rosso.
- Imposta la dimensione del carattere su 18 pixel.
Per indicazioni, consulta l’esempio nella lezione!
Provalo tu
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Mettiti alla provaQuesta lezione include un breve quiz. Inizia la lezione per rispondere e tenere traccia dei tuoi progressi.
Tutte le lezioni di Stilizzare con CSS
4Fondamenti del testo
Colore del testoFamiglia di caratteriDimensione del carattereSpessore del carattereAllineamento del testoDecorazione del testoSfida di ripasso #1Sfida di ripasso #27Modello a scatola - Parte 1
Cos'è il modello a scatola?Spaziatura internaMarginiBordiLarghezza e altezzaSfida di riepilogo
8Modello a scatola Parte 2
Dimensionamento del boxRaggio del bordoOverflowOmbra del boxSfida di ripassoEsercitati da solo: Playground Web