4 modi per usare i CSS nel sito

Ci sono diversi modi per includere singole proprietà o interi fogli di stile CSS in un sito web, in questa pagina vengono analizzati uno ad uno per comprenderne meglio le differenze. Ecco alcuni esempi:

Inclusione nel head della pagina
Uno dei sistemi più semplici e diffusi per inserire regole CSS in una pagina web è quello di includerlo tra i tag <style> e </style> direttamente nel <head> del documento. Questo metodo va usato per includere piccole porzioni di codice da utilizzare solo quella pagina web.

<html>
<head>
<style type="text/css">
h1 { 
color: #900;
font-size: 24px;
}
.esempio {
background: #CCC;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<div class="esempio">Lorem ipsum dolor sit amet,...</div>
</body>
</html>

Inclusione inline dello style
Aggiungendo l’attributo “style” al tag di qualsiasi elemento presente nel documento HTML si può stilizzare l’elemento specificando delle regole CSS. Questo sistema va evitato dove possibile.

<h1 style="color: #900; font-size: 24px;">Hello World</h1>

Includere un file CSS
Un altro sistema molto comodo è quello di includere uno o più file .css nella pagina web richiamandoli con una singola riga di codice da inserire nel <head> del documento. In questo modo si puo creare la grafica del sito nel file css e includerlo facilmente in piu pagine web.

<html>
<head>
<link href="css/grafica.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>

Importare più files in un solo file CSS
È anche possibile importare più fogli di stile in un unico documento CSS, in questo modo basta richiamare con il metodo indicato sopra il file principale nella pagina web per caricare tutto il CSS contenuto in più files. Ecco un esempio del file “grafica.css” che richiama a sua volta il file “grafica2.css”.

@import url(grafica2.css);
h1 { 
color: #900;
font-size: 24px;
}
.esempio {
background: #CCC;
}

Ilario Pellandini

::: Certified Web developer 2006-2018 ::: ::: www.IPELWEB.com :::

More Posts - Website