CONTATTACI

Guide per aspiranti programmatori

schermo con all interno diverse tabelle aperte
Lezione 19 / 30

Come inserire il CSS in HTML

Vuoi aggiungere del linguaggio CSS al tuo progetto? Perfetto!
Ci sono 3 modi di incorporare il CSS all’interno della nostra pagina html: style in line, embedded, e link esterno. Vediamoli insieme!

CSS Style in line

Quando parliamo di style in line, intendiamo inserire il css su un’unica riga: la stessa dell’elemento che andremo a modificare. In questo caso creeremo un attributo globale, l’attributo “style” all’interno del tag html, seguito dalla proprietà css che stiamo andando a modificare e dal valore di quella proprietà, esattamente come nell’esempio a seguire.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline CSS Example</title>
</head>
<body>
    <h1 style="color: blue;">Questo è un testo blu con Inline CSS</h1>
    <p style="font-size: 18px;">Questo è un paragrafo con dimensione del carattere di 18px</p>
</body>
</html>

Questa modalità, in linea teorica, dovrebbe essere utilizzata per applicare alcuni stili o effetti ad un singolo elemento HTML, tuttavia il suggerimento è quello di non utilizzarla mai. Immagina, per esempio, che il cliente ti chieda di cambiare il colore a tutti i tag p della pagina: se hai utilizzato lo style in line per inserire il tuo css, dovrai modificare tutti i tag p presenti.. uno ad uno. Un vero incubo, soprattutto nel caso in cui si tratti di un progetto complesso!
Inoltre, lo style in line penalizza l’ottimizzazione SEO del tuo sito web, quindi ricorda: non usarlo!

 

CSS Embedded

Il secondo metodo per incorporare il CSS nella tua pagina html è internamente: come funziona? È molto semplice: all’ interno dell’ head della pagina html aprirai un tag “style” – che avrà, ovviamente, un’ apertura e una chiusura –  e, all’ interno di quest’ultimo, a sua volta, posizionerai il tuo selettore (ovvero l’ elemento del codice al quale andrà applicata la tua proprietà css: non preoccuparti, procedendo con la nostra guida troverai un approfondimento sui selettori)

La differenza, come puoi vedere nell’esempio a seguire, è proprio questa: col selettore potrai specificare a quale elemento vorrai applicare le tue proprietà CSS.  Ricorda, però: Il css embedded agisce solo sul documento in cui viene aggiunto.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS interno Example</title>
    <style>
        h1 {
            color: green;
        }
        p {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <h1>Questo è un testo verde con CSS interno</h1>
    <p>Questo è un paragrafo con dimensione del carattere di 20px</p>
</body>
</html>

CSS Link esterno

L’ultimo metodo per implementare il CSS nel tuo codice è l’inserimento di un link esterno. Si tratta del metodo più utilizzato e comune per inserire css nel codice html, per via della sua organizzazione ordinata e dello stile pulito, ma soprattutto per far fede al principio della separation of concerns, principio cardine della programmazione informatica. Per attuarlo, dobbiamo creare un nuovo file nel nostro editor di testo, che abbia estensione “.css” (la best practice è quella di chiamare il file “style.css”); in questo file scriveremo tutte le nostre regole CSS, e lo collegheremo al nostro file HTML mediante l’utilizzo di un tag “link”, sempre nell’head del nostro documento HTML. Vediamo un esempio in codice!

L’html dovrebbe apparire così

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example with External CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Benvenuti nel mio sito!</h1>
    <p>Questo è un paragrafo con del testo</p>
</body>
</html>

 Il css nel foglio creato di proposito (style.css) apparirà, per esempio, così

/* Stili per l'elemento h1 */
h1 {
    color: blue; /* colore del testo blu */
    font-size: 24px; /* dimensione del carattere 24px */
}

/* Stili per l'elemento p */
p {
    color: gray; /* colore del testo grigio */
    font-size: 18px; /* dimensione del carattere 18px */
    line-height: 1.5; /* altezza della linea 1.5 volte la dimensione del carattere */
}


NB. Il CSS embedded ha la priorità sul CSS esterno (è un concetto correlato alla specificità, che affronteremo nei prossimi capitoli della guida), tuttavia è sempre preferibile, per i motivi di cui sopra, utilizzare un foglio di stile a parte collegandolo con questa terza metodologia.

Ora conosci tutte le modalità per implementare il linguaggio CSS nel codice del tuo sito web. Continua a scoprire di più sul mondo dello sviluppo web senza paura! 

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.