[Guida CSS #1] Introduzione ai fogli di stile


[Guida CSS #1] Introduzione ai fogli si stile

INTRODUZIONE


CSS non è un semplice acronimo, difatti esso è uno dei linguaggi fondamentali nel mondo del Web Design. Linguaggio standard del W3C, la sua storia ha radici lontane, e si sviluppa parallelamente a quella dell’ HTML. Infatti i CSS (Cascading Style Sheets), nascono proprio per completare le mancanze del linguaggio HTML da un punto di vista prettamente estetico e strutturale. Chiamati anche Fogli di stile a cascata o, più semplicemente, fogli di stile, i CSS non costituiscono un linguaggio di programmazione, né di scripting. Il loro utilizzo è ben diverso e, se volessimo definire il linguaggio in qualche modo, sarebbe meglio etichettarlo come linguaggio strutturale.


UTILIZZO (A COSA SERVONO REALMENTE?)


Innanzi tutto è meglio affermare che, se avete reale interesse a entrare nel mondo del Web Design, CSS è un linguaggio che va conosciuto e, assieme a esso, l’ HTML. Queste sono le basi di questo grande mondo, strettamente connesse tra di loro, difatti se qualcuno di voi conosce l’ HTML sa benissimo come esso non dia grandi possibilità di personalizzazione della struttura di una pagina web. Tutto quello che non riuscite a fare con il famosissimo linguaggio di contrassegno, lo potete fare con i fogli di stile.

Lavorare con gli sfondi della vostra pagina, posizionare gli elementi in essa al fine di rendere il tutto più intuitivo e accessibile all’ utente, usare stili diversi per determinate tipologie di testo, impostare colori e interlinee, margini e bordi, tutto questo è possibile con i CSS. Vogliamo parlare della facilità d’ utilizzo? Immaginate di avere un sito web con centinaia di pagine e, d’ un tratto, il colore del testo non vi garba più. Pagina per pagina, dovreste andare a modificare il colore del testo, dando un valore diverso all’ apposito attributo HTML. Con i CSS personalizzazioni di questo tipo sono un gioco da ragazzi, difatti questi sono separati dal normale HTML (non sempre – a volte possono essere integrati con la stessa pagina HTML) e, in ogni caso, vi basterà individuare lo stile che avete dato al vostro testo e cambiare il suo colore, facile no? Le potenzialità di questo linguaggio sono grandissime, con una sola modifica potrete cambiare l’ aspetto di un intero sito web.

NOTE


Ecco alcune considerazioni affinché la guida possa risultare più facile da consultare all’ utente:

  • E’ necessario che voi abbiate una buona conoscenza dell’ HTML poiché, senza di esso, la conoscenza dei CSS può considerarsi futile (i due standard lavorano a stretto contatto tra di loro);
  • Laddove sarà possibile, vi saranno degli esempi per facilitarvi alla comprensione di quanto scritto;
  • A fondo pagina troverete il link dell’ articolo precedente e di quello successivo (in caso di mancanza di quest’ ultimo significa che l’ articolo deve ancora essere redatto);
  • Dove necessario e possibile, l’ articolo sarà diviso in più parti al fine di renderlo più comprensibile e sinottico possibile;
  • La guida, nel suo complesso, è da considerarsi di base. Una volta completata, se necessario, vi saranno degli articoli di approfondimento che la completeranno il più possibile;
  • Scoprirete, mano a mano che andrete avanti, che vi sono delle irregolarità nella visualizzazione dei CSS in ogni singolo browser. Purtroppo questo è uno dei problemi contro cui combattono da sempre i Web Designer, non potete far altro che sperimentare voi stessi e scoprire come risolvere tali irregolarità;
  • Per concludere vi invito a scaricare questo file, si tratta di una parte dei CSS dello ShikaBlog, iniziate a prendere confidenza, a vedere la sintassi poiché d’ ora in avanti, oltre quello che scriverò, starà a voi fare pratica (moltissima), e solo con essa vedrete col tempo ottimi risultati. Buona lettura a tutti, ci vedremo il prima possibile con la lezione numero 2 😉

Lezione Successiva (La classificazione degli elementi e l’ ereditarietà) ->

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *