Benvenuti su questa mia guida dedicata ai fogli di style o CSS. Non ha la pretesa di insegnare tutte le molteplici tecniche legate a questo modo di integrare stile nelle pagine web ma vuole, con tutta onestà, essere qualcosa di più di una semplice indicazione introduttiva che renda meglio l’idea di che cosa sono, come si adoperano e a che cosa servono i CSS.
Quando ho scritto la primissima versione di questa guida erano davvero pochi i siti che ne facevano uso. Oggi le parti si sono invertite e a diventare piuttosto rari sono quei siti che non li adoperano.
Volendo contribuire è possibile scaricare la guida anche in formato compresso .zip (E-book e PDF) per poterla stampare su carta o consultare a video comodamente off-line, cioè scollegati dalla rete, per farlo è sufficiente cliccare su questo link: Scarica Guida CSS
Attenzione! eventuali ultime modifiche potrebbero non essere state ancora inserite in questa versione on line (priorità alla versione zip), questa on line viene aggiornata ad intervalli prestabiliti o quando ci siano modifiche di una certa importanza. Sono gradite segnalazioni, commenti e qualsiasi altra cosa ritenuta utile al fine di migliorare il lavoro che sarà sempre e solo a beneficio di tutti quanti voi.
Una sola raccomandazione: nelle mie spiegazioni, per quanto abbia cercato di renderle più semplici e comprensibili possibile, ho dato per scontato che voi sappiate muovere almeno i primi passi con HTML, per cui, se così non fosse, molte delle cose scritte potrebbero risultare incomprensibili, a questo proposito vi rimando alla lettura dell’altra mia guida: “Primi Passi in HTML” dove sarà possibile apprendere i concetti base di questo metaliguaggio.
Per parlare dei fogli di style e vedere finalmente a cosa servono e cosa producono, vi basta notare l’impaginazione di questo documento: lo sfondo, la giustificazione del testo, i suoi margini dai bordi, i vari rientri ad inizio paragrafo, il titolo sotto, la barra di scorrimento laterale colorata (per chi adopera Internet Explorer), sono soltanto alcune delle cose fattibili con i css, che non sono riportati in ogni singola pagina html ma definiti una sola volta per tutte in un unico foglio di stile esterno richiamato da tutte le pagine. Come minimo in questo momento starete pensando “ah però, comodo” o no?
I CSS, ovvero Cascading Style Sheets sono ormai molto comuni sul web, servono per migliorare l’aspetto estetico ed al tempo stesso facilitano la creazione e la manutenzione di siti web e questo a prescindere che si tratti di poche pagine o di grossi portali.
Se combinati con un linguaggio di scripting, quale per esempio JavaScript, danno vita al DHTML ovvero un HTML Dinamico, consentendo di superare quelli che erano considerati un tempo i limiti di html standard.
Con questa tecnica è possibile creare persino delle vere e proprie animazioni sfruttando l’elevata versatilità offerta dal posizionamento degli oggetti sullo schermo, siano essi grafici oppure no, posizionamento che a differenza del solo html è ora possibile fare con accurata precisione.
Come quasi tutte le cose di questo mondo vanno create, per cui scegliete cosa preferite fare, se procurarvi un editor specifico per CSS oppure adoperare lo stesso editor che usate abitualmente per le vostre pagine html.
Se non avete un editor specifico vi ricordo che anche in questo caso, così come per html, serve un editor puro (ASCII), il notepad o il wordpad a corredo di windows, per esempio, andranno benissimo. Il mio consiglio è quello di procurarvi un editor per CSS, vi sarà di maggiore aiuto. vi consiglio per esempio TopStyle nella sua versione lite free.
Vorrei ribadire che per fare uso di questa “tecnica” si deve necessariamente conoscere un minimo di html essendo di fatto i fogli di style un’estensione di html stesso. Senza le conoscenze di base di questo linguaggio sarebbe davvero difficile capirli ed utilizzarli al meglio.
Dovendo illustrarli in modo sintetico direi che non si usano solo per giustificare il testo o stabilirne i suoi rientri; pensate alle dimensioni dei font di caratteri, non esistono più limiti. E le immagini? queste possono essere sovrapposte come se si trattasse di piani trasparenti dove ad ognuno è possibile assegnare una diversa priorità di visualizzazione. In poche parole: se non ci fossero si dovrebbero inventare.
Da non trascurare neppure l’aspetto pratico legato al risparmio di tempo e di energie in fase di stesura e modifiche. Provate ad immaginare un sito composto da decine (a volte centinaia) di pagine e che queste facciano tutte riferimento ad uno o più fogli di stile esterni, sarà sufficiente una veloce modifica a quel foglio per vedere immediatamente la modifica applicata a tutte le pagine che lo richiamano.
C’è soltanto da chiedersi come mai un sistema che a quanto pare offre solo vantaggi abbia trovato difficoltà nel raggiungere il successo che attualmente merita.
La sola possibile spiegazione che ho trovato è stata quella che inizialmente non tutti i browser li supportavano ed ancora oggi non tutti li supportano allo stesso modo. Fra i vari browser ci sono differenze a volte davvero sorprendenti e tali da scoraggiare chi fosse indeciso nel farne uso.
Attualmente le cose sono decisamente cambiate a favore dei CSS, forse perché è venuto meno il predominio del browser IE, era lui infatti che più di altri non rispettava le regole dettate dal W3C (organo ufficiale che si preoccupa di stabilirne le regole). Di fatto trovare ad oggi un sito che non ne faccia uso è cosa davvero rara.
Finita questa premessa credo si possa passare al lato pratico per vedere finalmente come si adoperano.
Su questa guida per facilitarne la comprensione ho inserito in box a sfondo verde tutto quello che riguarda il codce CSS mentre nei box a sfondo giallo tutto quello che riguarda il codice html visto che le due cose si integrano a vicenda.
codice CSS
codice HTML
risultato degli esempi
Per prima cosa devono essere racchiusi in un elemento (tag) che viene specificato in html, si tratta dell’elemento: <style> e relativa chiusura </style>. Questo elemento serve ad informare il browser che si tratta di stili e che questi apporteranno le dovute modifiche ai vari elementi (tags) di HTML definiti al loro interno, per tutti i tags, nessuno escluso, dipenderà soltanto dalle combinazioni che si vorranno creare.
Fondamentalmente sono tre i modi di usare i css, quale sia il migliore dipende soltanto da voi, dalla vostra organizzazione mentale e dalle vostre reali esigenze:
1. Direttamente in linea
2. Ad inizio pagina a stile incorporato
3. Nel collegamento ad un foglio di stile esterno
Se avete domande da fare potete scrivere sul forum di supporto, gratuito e aperto a tutti.