CSS è il linguaggio essenziale per lo stile delle pagine web. Per questo motivo, non può rimanere da solo. Deve essere collegato ad una pagina HTML. Vediamo, quindi, dove posizionarlo.
Uno stile CSS può essere inserito con 3 diversi metodi all'interno delle pagine web (come avevamo visto nella lezione HTML). Vediamoli insieme.
Il metodo più semplice è inserire uno stile inline (ovvero, direttamente nel codice HTML). Per farlo, possiamo utilizzare l'attributo style all'interno di un elemento. Ad esempio, in questo modo creiamo una scritta verde:
<p style="color:green">Una scritta verde.</p>Nell'esempio, abbiamo aggiunto il colore verde all'elemento <p>, che abbiamo approfondito nella lezione HTML dei paragrafi, utilizzando l'attributo color, che vedremo nella lezione dei colori dei testi.
Nota: in una normale pagina web, gli stili CSS sono molto numerosi. Per alleggerire il caricamento della pagina, è consigliato inserire gli stili in un file CSS separato, come vedremo in questa lezione. Gli stili inline sono una soluzione d'eccezione e non dovrebbero essere usati spesso.
Un'altra soluzione per l'inserimento dello stile CSS è l'utilizzo del tag <style>. Tra l'apertura e la chiusura di questo tag, puoi inserire il codice CSS.
Ad esempio, vogliamo colorare di verde un elemento <p>.
<p>Una scritta verde.</p>
<style>
p {
color: green;
}
</style>Nell'esempio, abbiamo utilizzato il selettore del tag, che vedremo nella lezione dei selettori CSS, per recuperare l'elemento e colorarlo di verde tramite color.
La soluzione più efficiente dal punto di vista delle prestazioni è utilizzare un file esterno. Come avevamo detto nell'introduzione al corso CSS, l'estensione di questi file è .css.
Per collegare un file CSS ad una pagina HTML, possiamo usare il tag <link> in questo modo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Collegare un file CSS.</p>
</body>
</html>Per convenzione, di solito i file CSS si chiamano style.css, anche se il nome può variare in base alle esigenze. Usare un file esterno è il modo migliore per implementare lo stile all'interno di una pagina HTML.
Per piccole parti di codice CSS, si può scegliere di inserire lo stile in <style>. Questo tag può essere posizionato sia all'interno di <head>, ovvero la parte superiore della pagina, o in <body>, ovvero il corpo della pagina. La suddivisione del layout di una pagina HTML la trovi nella lezione La prima pagina web.
Tutto ciò che viene inserito in <head> viene caricato prima del contenuto della pagina. Quindi, se inseriamo gli stili CSS qui, verranno anch'essi caricati prima che il browser mostri qualsiasi parte della pagina.
Questa posizione è sicuramente la più consigliata, perché evita ritardi ed effetti grafici spiacevoli.
Il tag <style> può essere inserito anche in <body>. In questo caso, prima viene caricato dal browser tutto il codice presente in <head>, poi viene caricato il corpo della pagina. Tuttavia, visto che uno stile CSS obbliga sempre il browser a ricaricare tutto il contenuto (proprio perché deve modificare lo stile di un elemento), può rallentare il caricamento.
Per gli utenti più veloci, può sembrare che qualcosa appaia nella pagina prima del contenuto effettivo. Un effetto spiacevole che può rendere l'esperienza di navigazione peggiore.