Cos’è il CSS, introduzione per principianti ai fogli di stile

CSS è quello che viene chiamato Cascading Style Sheet language e viene utilizzato per stilizzare gli elementi scritti in un linguaggio di markup come HTML . Separa il contenuto dalla rappresentazione visiva del sito.

CSS è stato sviluppato dal W3C ( World Wide web Consortium ) nel 1996, per un motivo piuttosto semplice. L’HTML non è stato progettato per avere tag che aiutino a formattare la pagina. Dovevi solo scrivere il markup per il sito.

Tag come <font> sono stati introdotti nella versione HTML 3.2 e hanno causato molti problemi agli sviluppatori. Poiché i siti web avevano caratteri, sfondi colorati e stili diversi, riscrivere il codice era un processo lungo, doloroso e costoso. Pertanto, i CSS sono stati creati dal W3C per risolvere questo problema.

La relazione tra HTML e Cascading Style Sheet è fortemente legata tra loro. Poiché HTML è un linguaggio di markup (il fondamento stesso di un sito) e CSS enfatizza lo stile (tutta l’estetica di un sito web), vanno di pari passo.

I CSS non sono tecnicamente una necessità, ma probabilmente non vorrai avere un sito che presenta solo HTML in quanto sembrerebbe completamente scarno.

Vantaggi CSS

La differenza tra un sito web che implementa i CSS e uno che non lo fa è enorme e sicuramente evidente.

Potresti aver visto un sito web che non si carica completamente e ha uno sfondo bianco con la maggior parte del testo blu e nero. Ciò significa che la parte Cascading Style Sheet del sito non è stata caricata correttamente o non esiste del tutto.

E’ proprio cosi’ che appare un sito con solo HTML, e penso che converrai sul fatto che non sia molto attraente.
Prima di usare i CSS, tutta la stilizzazione doveva essere inclusa nel markup HTML. Ciò significa che dovevi descrivere separatamente tutto lo sfondo, i colori dei caratteri, gli allineamenti, ecc.

CSS ti consente di stilizzare tutto su un file diverso, creando così lo stile lì e successivamente integrando il file Cascading Style Sheet nel markup HTML. Ciò rende il markup HTML effettivo molto più pulito e più facile da mantenere.

In breve, con i CSS non è necessario descrivere ripetutamente l’aspetto dei singoli elementi. Ciò consente di risparmiare tempo, accorcia il codice e lo rende meno soggetto a errori.

CSS ti consente di avere più stili su una pagina HTML, rendendo quindi le possibilità di personalizzazione quasi infinite. Al giorno d’oggi, questo sta diventando più una necessità che una cosa utile.

Leggi anche: Come eliminare JS e CSS che bloccano il rendering delle pagine del sito

Come funziona il CSS

I CSS utilizzano una semplice sintassi basata sull’inglese con un insieme di regole che la governano. Come abbiamo detto prima, l’HTML non è mai stato concepito per utilizzare elementi di stile, ma solo il markup della pagina. È stato creato per descrivere semplicemente il contenuto. Ad esempio: <p>Questo è un paragrafo.</p> .

Ma come dare uno stile al paragrafo? La struttura della sintassi Cascading Style Sheet è piuttosto semplice. Ha un selettore e un blocco di dichiarazione. Si seleziona un elemento e quindi si dichiara cosa si vuole fare con esso. Abbastanza semplice, vero?

Tuttavia, ci sono regole che devi ricordare. Le regole della struttura sono piuttosto semplici, quindi non preoccuparti.

Il selettore punta all’elemento HTML a cui vuoi applicare lo stile. Il blocco di dichiarazione contiene una o più dichiarazioni separate da punto e virgola.

Ogni dichiarazione include un nome di proprietà CSS e un valore, separati da due punti. Una dichiarazione Cascading Style Sheet termina sempre con un punto e virgola e i blocchi di dichiarazione sono racchiusi tra parentesi graffe.

Vediamo un esempio:

Tutti gli elementi <p> saranno colorati in blu e in grassetto:

<style>
p {
 color: blue;
 text-weight: bold;
}
<style>

In un altro esempio, tutti gli elementi <p> saranno allineati al centro, larghi 16x e rosa:

<style>
p {
   text-align: center;
   font-size: 16px;
   color: pink;
  
}
</style>

Ora parliamo dei diversi stili di CSS che sono esterni, interni e inline.

Stili CSS interni, esterni e inline

Esamineremo brevemente ogni stile, per una spiegazione approfondita di ciascun metodo, ci sarà un collegamento sotto la panoramica.

Iniziamo parlando dello stile interno . Gli stili CSS eseguiti in questo modo vengono caricati ogni volta che viene aggiornato un sito web, il che può aumentare il tempo di caricamento. Inoltre, non sarai in grado di utilizzare lo stesso stile CSS su più pagine poiché è contenuto in una singola pagina. Tuttavia, questo comporta anche dei vantaggi. Avere tutto su una pagina rende più facile condividere il modello per un’anteprima.

Il metodo esterno potrebbe essere il più conveniente. Tutto viene fatto esternamente su un file .css . Ciò significa che puoi eseguire tutto lo stile su un file separato e applicare il CSS a qualsiasi pagina desideri. Lo stile Esterno potrebbe anche migliorare i tempi di caricamento.

Infine, parleremo dello stile CSS Inline che funziona con elementi specifici che hanno il tag <style>. Ogni componente deve essere stilizzato, quindi potrebbe non essere il modo migliore o più veloce per gestire i CSS. Ma può tornare utile. Ad esempio, se desideri modificare un singolo elemento, visualizzare rapidamente l’anteprima delle modifiche o forse non hai accesso ai file CSS.

Conclusione

Riassumiamo quello che abbiamo imparato qui:

• CSS è stato creato per funzionare in combinazione con linguaggi di markup come HTML. È usato per stilizzare una pagina.
• Esistono tre stili di implementazione dei CSS e puoi utilizzare lo stile esterno per assegnare più pagine contemporaneamente.
• Non andrai lontano senza vedere una sorta di implementazione al giorno d’oggi poiché è un requisito tanto quanto il linguaggio di markup stesso.

Buon lavoro.