Un foglio di stile esterno definisce l'aspetto di una pagina web. Puoi utilizzare un foglio di stile per specificare cose come la dimensione, il colore e il carattere del testo, il colore dei pulsanti o la posizione dei menu e delle barre laterali.
Codice utilizzato in un foglio di stile esterno
Esistono due tipi di codice utilizzati per creare una pagina Web di base:
- Hyper Text Markup Language (HTML): definisce il contenuto di una pagina web. Contiene il testo effettivo con un contrassegno che identifica se le sezioni di testo sono paragrafi, intestazioni o elenchi. Contiene anche collegamenti alle immagini che appaiono sulla pagina e collegamenti ipertestuali a pagine esterne.
- Fogli di stile (CSS): un linguaggio di codifica utilizzato per specificare come viene visualizzato il contenuto. Definisce come viene visualizzato ogni tipo di elemento di testo e può visualizzare lo stesso tipo di elemento in modo diverso se appartengono a classi diverse o hanno un id diverso. Ciò consente a elementi come menu ed elenchi di comportarsi in modo molto diverso all'interno del testo principale di una pagina web.
In generale, separare lo stile dal contenuto è una buona idea, poiché ti consente di concentrarti su una cosa alla volta. Questo diventa ancora più importante in un team, consentendo agli specialisti in contenuti e presentazione di lavorare indipendentemente dal resto. Forse ancora più importante, consente anche di applicare uniformemente un singolo set di istruzioni di stile su un intero sito web.
La presentazione visiva del sito Web può quindi essere modificata da un singolo foglio di stile senza modificare singolarmente ogni pagina Web. Per siti Web più complessi, è possibile utilizzare un numero di fogli di stile per controllare il testo, i menu e le divisioni all'interno delle pagine. Questa raccolta di fogli di stile può essere definita un "tema".
Utilizzo di un CSS esterno per collegare HTML a CSS
È possibile includere lo stile CSS direttamente all'interno dell'HTML di una pagina web, utilizzando CSS per dare uno stile diverso a ciascun paragrafo e intestazione. Questo tipo di stile in linea generalmente non è una buona idea, poiché perdi tutti i vantaggi della separazione dello stile dal contenuto. In particolare, perdi la possibilità di aggiornare l'intero sito Web in modo coerente da un singolo file.
Il modo giusto per applicare uno stile a un sito Web è creare un singolo file di foglio di stile esterno per ogni tipo di stile che si desidera applicare, quindi fare riferimento a questi file da ogni file HTML. Ad esempio, potresti avere i seguenti fogli di stile esterni:
- testo.css
- menu.css
- layout.css
Puoi apportare modifiche al codice CSS all'interno di quei fogli di stile esterni senza modificarli i nomi dei file, ovvero i riferimenti a quei file, all'interno dell'HTML di tutte le tue pagine web, non lo saranno cambiato.
Esempi di HTML e CSS
Una pagina HTML molto semplice potrebbe contenere il seguente codice:
Tutto su di me!
Questa pagina parla di me e del motivo per cui sono fantastico.
Se vuoi vedere come appare in un browser web, copia il testo in un editor di testo come Bloc notes. Salva il file come qualcosa come "index.html" e trascinalo nel tuo browser per vedere lo stile della vecchia scuola.
Un semplice foglio di stile esterno può essere collegato a questa pagina aggiungendo il codice seguente sotto il file.
tipo = "testo/css"
href = "mioStile.css" />
Crea un altro file di testo chiamato myStyle.css, che si trova nella stessa cartella di index.html che contiene il seguente codice:
h1 {
colore: #FF7643;
carattere: Arial'
}
p {
colore rosso;
dimensione del carattere: 1.5em;
}
C'è molto di più che puoi fare con i CSS. Se vuoi saperne di più, Scuole W3 è un ottimo punto di partenza.