Collegare CSS nei documenti HTML: una guida con esempi
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.
Web hosting con consulente personale!
Web hosting veloce e scalabile + consulente personale con IONOS!
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.
Articoli simili
Comprimere il codice CSS e migliorare la performance del sito
Elementi strutturali che si trovano direttamente sul codice HTML sono rari. Colori, font o dimensioni degli elementi HTML vengono ormai definiti generalmente nei fogli di stile come i CSS. Man mano che il sito web diventa sempre più complesso, aumentano anche le dimensioni e il numero dei file CSS necessari e questo incide sui tempi di caricamento del sito. È per questo motivo che diventa…
CSS Grid: il layout con funzioni intelligenti
Come si crea un layout piacevole ed efficace senza conoscere la dimensione dell’area del display di destinazione? Con CSS Grid non è un problema: questa tecnologia consente ai web designer di progettare un raster proprio e di posizionare tutti gli elementi. Grazie a funzioni intelligenti e automatiche il layout CSS Grid si adatta dinamicamente a diversi display.
Tipografia nel responsive web design: formattazioni CSS
Nel responsive web design la tipografia è un campo trascurato, nonostante la realizzazione di un carattere reattivo non sia più un segreto per pochi. Ma come si fa a realizzarlo? E quali font sono adatti a una scrittura responsive? Vi offriamo una panoramica su come realizzare una tipografia reattiva e come inserirla sul vostro sito tramite i CSS.
Tailwind CSS e gli aspetti che contraddistinguono il framework utility-first
Se avete già esperienza con i CSS e cercate un framework particolarmente flessibile e personalizzato, Tailwind CSS è un’ottima scelta. Questa soluzione per professionisti semplifica il lavoro e offre numerose opzioni di design. Continuate a leggere per saperne di più sul framework e sul motivo per cui i principianti potrebbero voler trovare un’alternativa a Tailwind CSS.
Padding vs margin in CSS: i componenti del box model
La quantità di elementi contenuta in un linguaggio di programmazione come CSS può mettere a dura prova. Ma non temete: nel nostro articolo di approfondimento sul confronto tra padding e margin nel CSS vi illustriamo le maggiori differenze che intercorrono tra i due attributi. Inoltre, vi presentiamo il box model: un diagramma semplice da memorizzare che vi consente di distinguere facilmente i due…
Dominio omaggio per un anno