CSS esterno

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 8 di 76.

CSS esterno è un metodo per aggiungere stili CSS a un documento HTML inserendoli in un file CSS separato e collegando quel file al documento HTML usando il tag <link>. Questo approccio ti permette di applicare gli stessi stili a più pagine HTML, facilitando la manutenzione e l’aggiornamento del design del tuo sito web. Il CSS esterno è ideale per i progetti di grandi dimensioni, in cui la coerenza e l’efficienza sono fondamentali.

Ecco come usare CSS esterni:

Crea un file CSS (ad es. styles.css) con le tue regole CSS:

body {
    background-color: lightblue;
}
p {
    color: blue;
    font-size: 16px;
}

2. Collega il file CSS al tuo documento HTML aggiungendo un tag <link> nella sezione <head>:

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

In questo esempio, il tag <link> collega il file styles.css al documento HTML. L'attributo rel specifica la relazione tra il documento HTML e il file collegato (foglio di stile), mentre l'attributo href specifica il percorso del file CSS.

Sfida

Facile

Ti vengono forniti i file HTML e CSS (index.html e styles.css): aggiungi un tag link al file HTML per collegare i file e aggiungi gli stili al file HTML!

Provalo tu

<!DOCTYPE html>
<html>
<head>
    <title>External CSS</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>