I Fogli di Stile (CSS) di Web-Link: Tutto per la costruzione delle tue pagine web

Benvenuti su questa mia breve, ma spero esauriente, descrizione dedicata ai fogli di style o CSS. Non ha certo la pretesa di insegnare le molteplici tecniche legate a questo modo di integrare le pagine web, vuole con tutta semplicità essere qualcosa di più di una semplice introduzione, così da rendere  meglio l’idea di che cosa siano, 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 quelli che non li adoperano sono divenuti piuttosto rari.

Per stampare le singole pagine di questa guida basta un clic sull’immagine grafica della stampante che si trova a fondo pagina. Nel caso (raro) in cui non dovesse funzionare, sarà possibile ottenere la stampa anche dal menù file del vostro programma di navigazione dopo aver selezionato con un clik del mouse questo riquadro (frame).

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 il metaliguaggio HTML, per cui se così non fosse molte delle cose scritte potrebbero risultare incomprensibili, a questo proposito vi rimando prima alla lettura dell’altra mia rubrica: “primi passi in HTML” dove sarà possibile apprendere i concetti di 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 solo per IE), sono soltanto alcune delle cose fattibili con i css,  che non sono riportati in ogni singola pagina ma definiti una sola volta in un unico foglio di stile esterno. Direi estremamente comodo… o no?

I CSS, ovvero Cascading Style Sheets  sono ormai divenuti molto comuni sul web, servono per migliorare l’aspetto estetico e al tempo stesso facilitare la creazione e/o la manutenzione di siti grandi o piccoli che possano essere. Se combinati con un linguaggio di scripting, quale JavaScript, danno vita al DHTML ovvero 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 è possibile fare con accurata precisione.

Come quasi tutte le cose di questo mondo vanno create, per cui scegliete cosa preferite fare:

1) procurarvi un editor per CSS specifico.
2) 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, sia  notepad che  wordpad a corredo di windows andranno benissimo. Il mio consiglio è quello di procurarvi un editor per CSS quale per esempio TopStyle.

Vorrei dire ancora una volta 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 conoscenza di base di questo metalinguaggio non sarebbe possibile capirli ed utilizzarli al meglio.

Dovendo illustrarli brevemente direi che non si limitano a giustificare il testo o a stabilirne i suoi rientri; pensate alle dimensioni dei caratteri, non esistono più limiti. E le immagini? queste possono essere sovrapposte come se si trattasse di piani trasparenti ad ognuno dei quali assegnare una diversa priorità di visualizzazione, per questo che le possibilità offerte sono davvero notevoli… In poche parole avrete certamente capito che se non ci fossero stati si sarebbero dovuti inventare.

Da non sottovalutare 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 quante riferimento ad un solo ed unico foglio di stile, sarà sufficiente una modifica a quel foglio per vedere immediatamente modificate tutte le pagine che lo richiamano.

C’è soltanto da chiedersi perché mai un sistema che a prima vista offre solo vantaggi abbia trovato difficoltà nel raggiungere il successo che meritava. L’unica possibile spiegazione che ho trovato è stata quella che non tutti i browser li supportavano ed ancora oggi li supportano allo stesso modo, fra alcuni di questi ci sono differenze a volte davvero sorprendenti e tali da scoraggiare chi ha deciso di farne uso, specie poi se questo qualcuno non è mai stato veramente convinto di usarli 🙂

Ultimamente le cose sono cambiate, forse il dominio del browser IE ha fatto venire meno certi scrupoli di compatibilità con gli altri browser, o forse le recenti versioni di quegli stessi browsers sono divenute un po’  più compatibili, di fatto trovare un sito che non faccia uso di questa tecnica è oggi cosa abbastanza rara.

Finita questa lunga ma doverosa premessa credo si possa passare al lato pratico per capire finalmente come si adoperano.

Per prima cosa hanno un loro 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, comprese immagini e links, dipende 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

Continua: la Sintassi