Cascading Style Sheets (CSS): introduzione e fondamenti

 In Web design

Il CSS, o Cascading style sheets, dà una marcia in più alle pagine web in quanto permette di definire l’aspetto di ogni elemento: colori, font, interlinea, ombre, bordi arrotondati, layout. Eppure, prima del 1995, non era possibile creare layout complessi… visto che il CSS non esisteva.

Niente design, pertanto. La versione 3.0 del linguaggio HTML ha introdotto le tables e questo ha permesso (anche se è uno sporco metodo) di creare layout più complessi. La versione 3.2 ha aggiunto la possibilità di specificare il colore nel body.

Essendo l’ipertesto un linguaggio statico, ogni pagina web è come un file di testo: per modificare il colore di sfondo del body di un sito, vanno modificate una ad una tutte le pagine… Per modificare il layout di un sito, vanno modificate una ad una tutte le pagine

HTML per la struttura, CSS per la presentazione

Per poter permettere agli sviluppatori di controllare l’aspetto delle pagine web, nel 1995 furono presentati i CSS (fogli stile a cascata). Questo linguaggio permette di definire l’aspetto e la posizione di ogni elemento HTML e persino di creare gradienti, ombreggiature e animazioni. Se impiegato come si deve, il CSS permette di risparmiare tempo!

I fogli stile si trovano dentro una cartella css. Lo stile principale viene nominato style.css.

I fogli stile funzionano a cascata, cioè si definisce uno stile generico e poi degli stili più specifici. Questi ereditano le regole dello stile generico, pur avendo le loro caratteristiche aggiuntive. Ad esempio, uno stile per la sidebar e stili per i link e le immagini in essa contenuti.

css_cascadingPer essere interpretati dal browser, le regole CSS vanno dichiarate da qualche parte, nello specifico esistono tre modi:

  1. CSS interni – presenti nel codice HTML e applicati soltanto a quella pagina web.
  2. CSS inline – semplici regole applicate a un singolo elemento della pagina HTML (ad esempio un paragrafo).
  3. CSS esterni – presenti in un file .css a parte e vengono applicati in ogni documento .html che li importa.

CSS interni

I CSS interni sono degli stili applicati ad un’intera pagina HTML – ma soltanto a quella – e vanno inseriti nella <head> del codice HTML e poi richiamando gli stili nelle tag. Tutti i paragrafi, ad esempio, avranno lo stesso stile. Generalmente, questo sistema è sconsigliato, tranne per le newsletter, in quanto complica a dismisura la gestione del sito. La sintassi è la seguente:

<head>
<style type="text/css>
 p {font-size: 12px; color: #000000;}
</style>
</head>

CSS inline

I CSS innline sono anch’essi interni alla pagina web, ma applicati dentro una singola tag HTML. A esempio, solo il paragrafo dove viene inserito lo stile sarà nero e a 12px, mentre altri paragrafi no. La sintassi è la seguente:

<p style="font-size: 12px; color: #000000;">Il mio testo</p>

Questo metodo è fortemente sconsigliato, in quanto rende la gestione del sito veramente impossibile.

CSS esterni

I CSS esterni sono quelli più utilizzati, poiché centralizzano tutti gli stili in un solo file. Modificando il CSS, tutte le pagine web collegate a quel foglio stile vengono immediatamente aggiornate. Non da ultimo, separando HTML e CSS i file risultano più leggeri.

css_esternoPer comunicare al browser di leggere il CSS e applicarne gli stili nella pagina HTML, style.css va importato nella <head> di una pagina HTML, attraverso la la sintassi seguente:

<head><link rel=”stylesheet” type=”text/css” href=”style.css”></head>

All’interno del file style.css, ogni stile viene definito con la sintassi nomestile {proprietà;}. Ad esempio:

h1 {font-size: 12px; color: #000; font-weight: 400; font-family; Arial, Helvetica, sans-serif;}

Quello che viene prima della parentesi graffa è detto “selector”. All’interno delle parentesi, vengono elencate le “properties” e i relativi “values” che assegniamo ad ognuna. Le properties da usare e i possibili values sono definiti da un consorzio. Un selector può contenere più properties, anche se conviene non esagerare. Subito dopo un value, va sempre inserito il punto e virgola.

Scrivere correttamente il CSS

Un Moravia che scrive un racconto romano in un ottimo italiano non è paragonabile ad un imitatore che scrive lo stesso romanzo commettendo errori di grammatica a iosa. Gli stili CSS sono uno standard che seguono lo stesso principio: un professionista scrive un CSS valido che funziona su tutti i browser.

Gli stili non hanno né accenti, né spazi. È buona abitudine scrivere i selector in inglese (“sidebar” invece di “barralaterale”) e soprattutto tener presente che siamo nell’era del web semantico. Non a caso, in HTML5 sono presenti le tag <header>, <footer>, <section> e <article>. Ragion per cui, è cosa buona e giusta servirsi delle tag HTML di base per gli stili: body, p, img, ul, ol, li, hr, a, a:hover, h1, blockquote, strong sono selector perfettamente legittimi e funzionano senza toccare il codice HTML. Non serve creare stili stupidi come textparagraph o texttitle!

Allorquando i selector primari non bastano più, è possibile spingersi oltre e creare i propri stili per definire l’aspetto di elementi contenitori, i <div> all’interno della pagina. Colonne, righe, box, ecc. Gli stili unici nella pagina (che non si ripetono) sono detti ID e si scrivono così:

#header {background-color: #666;}

e vengono applicati al codice HTML in questo modo:

<div id="header"></div>

Gli stili che si ripetono nella pagina (righe, colonne) sono dette class e si scrivono così:

.box {background-color: #666;}

e vengono applicati al codice HTML in questo modo:

<div class="box"></div>

Scrivendo un CSS, oppure modificandone uno scritto da terzi, è buona abitudine commentare il codice e scrivere cosa fa o perché è stato modificato. Il CSS non è complicato e non è programmazione. Ciononostante, per lavorare con WordPress è obbligatorio conoscerlo bene per essere in grado di personalizzare un sito web e… per non combinare disastri.

Link interessanti

The history of HTML
CSS Syntax and Selectors

Post suggeriti

Leave a Comment

Inizia a digitare e premi Enter per effettuare una ricerca