Collegare CSS nei documenti HTML: una guida con esempi
La redazione di IONOS4 mins
Quando si tratta di siti web, non è solo il contenuto a contare ma anche la sua presentazione. Il linguaggio dei fogli di stile a cascata, CSS è comunemente usato per formattare HTML in modo appropriato. In questo modo vengono definiti attributi come il layout, il colore e la forma dei singoli elementi HTML. Le istruzioni CSS esistono indipendentemente da HTML e devono essere integrate in un documento elettronico.
- Certificato SSL e protezione DDoS
- Velocità, flessibilità e scalabilità
- Dominio e consulente personale
- 1 anno gratis del gestionale di fatturazione elettronica FlexTax
Come aggiungere CSS a HTML: quali sono i metodi esistenti?
È generalmente possibile collegare CSS a HTML tramite dei fogli di stile interni o esterni. Con dei fogli di stile interni, le istruzioni CSS vengono localizzate nei documenti HTML. È quindi possibile integrare CSS all’inizio dei file HTML o posizionarlo nel codice sorgente. Una buona comprensione di base di HTML e la sua sintassi è sicuramente un vantaggio se si sceglie di utilizzare questo metodo. Il modo più comune e pulito per sviluppare un sito web è attraverso l’utilizzo dei fogli di stile CSS esterni. CSS viene integrato collegando il documento HTML a un file CSS esterno. Di seguito riportiamo i tre metodi possibili:
- Stile inline, ovvero posizionato direttamente nel codice sorgente
- Posizionato all’inizio di un documento HTML
- Esternalizzato in un file CSS esterno
Il MyWebsite di IONOS include un’ampia gamma di modelli di design per poter creare un sito web dall’aspetto professionale.
Includere CSS: stile inline
Con questo metodo, le istruzioni di design sono integrate direttamente nel codice sorgente utilizzando un tag “style”. Le proprietà desiderate sono assegnate solo a un elemento di modo tale che siano possibili design diversi in tutto il documento HTML. Nell’esempio qui riportato, l’intestazione h1 deve essere visualizzata in blu e con un carattere avente una dimensione di 14 punti:
<h1 style="color:blue; font-size:14px;">Questo è un titolo</h1>Con questo tipo di integrazione, molti vantaggi di CSS vanno persi. Tra questi vi è l’opzione di definire un singolo comando da applicare, ad esempio, a tutti gli elementi h1 nel documento HTML. In alcuni casi, ciò comporta anche uno sforzo maggiore per quanto riguarda il mantenimento poiché è richiesto un intervento diretto sul codice HTML.
Aggiungere CSS all’inizio di HTML
Tramite questo metodo è possibile includere CSS nell’intestazione del documento HTML. Il tag style diventa dunque parte dell’elemento head e viene applicato all’intero file. Le istruzioni di design sono contenute nel documento ma separate dal codice HTML. Nell’esempio riportato di seguito, viene applicato lo stesso comando dell’esempio precedente. Questa volta, tuttavia, tutte le intestazioni h1 del file dovrebbero essere formattate secondo l’informazione data.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:14px;}
</style>
</head>
<body>
<h1>Questo è un titolo</h1>
<p>Questo è un paragrafo</p>
</body>
</html>Integrare CSS tramite un file esterno
Questo è possibilmente il metodo migliore per collegare CSS nei documenti HTML. Infatti un sito web consiste spesso di tante pagine ed è quindi opportuno salvare le istruzioni di design in un file separato. Ciò permette una separazione netta e pulita tra il contenuto e il design e aiuta a semplificare il mantenimento. Il file esportato è semplicemente collegato al documento HTML. Bisogna salvare il foglio di stile esterno con l’estensione .css e utilizzare un tag link per includerlo nel file HTML. Nel seguente esempio, il file CSS viene chiamato stylesheet.css.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>Questo è un titolo</h1>
<p>Questo è un paragrafo</p>
</body>
</html>L’attributo rel definisce il tipo di relazione logica mentre href si riferisce al file CSS da incorporare. Notate che l’elemento link può assumere attributi propri. Con media = print specificate, ad esempio, che il foglio di stile è utilizzato solo nella visualizzazione di stampa. Il foglio di stile esterno non contiene alcun tag HTML ma solo il rispettivo selettore e le parentesi graffe contenenti le dichiarazioni, come dimostrato nel seguente esempio:
h1 {
color: blue;
font-size:14px;
}Scoprite i migliori trucchi per CSS per poter ottimizzare il design del vostro progetto web. Per ottenere risultati professionali, affidatevi al servizio MyWebsite Design.
