[CSS] Stili esterni
Gli stili esterni controllano l’aspetto degli oggetti presenti su diverse pagine di un sito.
Esistono tre tipi di fogli di stile CSS: esterni, interni, in linea.
Gli stili esterni in CSS si riferiscono a un metodo per applicare gli stili a una pagina web tramite un file CSS separato. Invece di includere direttamente gli stili all’interno del documento HTML, è possibile creare un file CSS esterno che contiene tutte le regole di stile desiderate. Questo file esterno viene quindi collegato al documento HTML tramite l’elemento <link>.
L’utilizzo di stili esterni presenta diversi vantaggi. Innanzitutto, separa chiaramente la struttura e il contenuto (HTML) dalla presentazione e dallo stile (CSS), rendendo il codice più pulito e manutenibile. Inoltre, consente di riutilizzare gli stili su più pagine web, semplificando l’aggiornamento e la coerenza visiva dell’intero sito.
Per utilizzare gli stili esterni, è necessario creare un file CSS separato con estensione “.css” e definire le regole di stile al suo interno. Ad esempio:
styles.css:
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
h1 {
color: #333;
text-align: center;
}Poi, nel documento HTML, è possibile collegare il file CSS esterno nel tag utilizzando l’elemento :
<!DOCTYPE html>
<html>
<head>
<title>Il mio sito</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Benvenuti nel mio sito</h1>
<p>Questo è un esempio di utilizzo degli stili esterni in CSS.</p>
</body>
</html>In questo modo, tutte le regole di stile definite nel file “styles.css” saranno applicate al documento HTML, garantendo una formattazione uniforme e coerente.
Un altro esempio
Supponiamo di avere un file CSS esterno chiamato “styles.css” con il seguente contenuto:
styles.css:
/* Regola di stile per il testo principale */
p {
font-size: 16px;
color: #333;
line-height: 1.5;
}
/* Regola di stile per i link */
a {
color: #007bff;
text-decoration: none;
}
/* Regola di stile per gli elenchi */
ul {
list-style-type: square;
}Nel nostro documento HTML, potremmo avere il seguente codice:
<!DOCTYPE html>
<html>
<head>
<title>Il mio sito</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Benvenuti nel mio sito</h1>
<p>Questo è un esempio di utilizzo degli stili esterni in CSS.</p>
<p>È possibile definire stili per i diversi elementi HTML, come paragrafi, link e elenchi, nel file CSS esterno.</p>
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>
<p>Puoi anche creare regole di stile personalizzate per i tuoi elementi specifici.</p>
<a href="https://www.example.com">Visita il nostro sito web</a>
</body>
</html>In questo caso, gli stili definiti nel file “styles.css” saranno applicati alle diverse parti del documento HTML. Ad esempio, i paragrafi avranno il font-size di 16px, i link saranno di colore blu (#007bff) senza sottolineatura e gli elenchi saranno mostrati con dei quadratini come segnaposto. Questo contribuisce a creare una formattazione coerente in tutto il sito web.
