Come utilizzare i CSS



Ma cosa si intende per stile? Uno stile è un gruppo di attributi di formattazione che definiscono l'aspetto di una parte di testo all'interno di un singolo documento.

Puoi utilizzare un foglio di stile CSS per controllare molti documenti contemporaneamente e comprendere in un unico foglio tutti gli stili di un documento. Attraverso l'uso combinato di un foglio di stile CSS e uno stile HTML hai il vantaggio di collegare più documenti. Di conseguenza quando vuoi aggiornare delle caratteristiche di formattazione delle pagine web devi solo modificare il foglio di stile e automaticamente modificherai la formattazione di tutti documenti che utilizzano quello stile CSS.

La formattazione HTML manuale ha la precedenza rispetto alla formattazione applicata da uno stile CSS. Per fare in modo che gli stili CSS controllino la formattazione di un paragrafo, è necessario eliminare tutta la formattazione HTML manuale o gli stili HTML.

I documenti HTML possono contenere regole di stile direttamente al loro interno o possono importare i fogli di stile. Separare i fogli di stile dai documenti HTML offre svariati benefici:

  • puoi condividere i fogli di stile per un gran numero di documenti (e siti).
  • puoi cambiare il foglio di stile senza che ciò richieda modifiche al documento.

Possiamo dividere i fogli di stile in 3 categorie:

  • fogli di stile in linea: con questo metodo puoi utilizzare uno stile da applicare ad un singolo tag HTML.
  • fogli di stile interni: con questo metodo definisci lo stile non per il singolo TAG, ma per tutta la pagina.
  • fogli di stile esterni: con questo metodo lo stile che vai a definire può essere utilizzato da più pagine web, infatti la definizione viene data all'interno di un file esterno (con estensione .css ) che viene linkato alla pagina con un apposito costrutto.

La sintassi che devi usare nei fogli di stile è la seguente :

  • inserisci gli attributi dentro le parentesi graffe { }
  • separa gli argomenti consecutivi dal segno punto e virgola (;) invece che dalla virgola
  • usa i due punti (:) al posto del segno uguale (=)
  • separa con un trattino (-) gli attributi composti da piu' termini
  • Quando un attributo è considerato proprieta' di un oggetto eliminalo e trasforma da minuscole in maiuscole le iniziali dei termini (per esempio: font-style diventa fontStyle)

Per inserire i fogli di stile su una pagina html bisogna inserire tra i TAG <head> il TAG <style> in questo modo :

<head> <style type="text/css">
...
</stile> </head>

Per qualsiasi dubbio rimandiamo alla guida ai CSS di HTML.it e alla sezione CSS di PRO.HTML.it

Ultimi articoli Web design

Metro, il "linguaggio di design" di Windows 8

I principi ispiratori del "linguaggio di design" utilizzato da...

Bootstrap: il framework di Twitter

Sviluppare applicazioni web sfruttando il framework con cui è stato...

Sfondi a tutta pagina con jQuery

Come avere degli sfondi a tutta pagina sui vostri siti web, per...

Grid design, dalla tipografia al web

Design coerenti e layout consistenti, usando principi di...

Art Direction e Design

Capire la differenza tra la direzione artistica di un progetto e il...

Altri articoli

Guide Web design

Guida Pubblicare un sito web

Le verifiche fondamentali da effettuare prima del lancio di un nuovo...

Guida Web Writing

Saper scrivere per il Web è una delle armi per attirare utenti e per...

Guida Accessibilità dei siti Web teorica

Questa guida è finalizzata sostanzialmente a una conoscenza e a una...

Altre guide

Newsletter @Grafica e Web Design

Ogni settimana, direttamente nella tua e-mail: guide, articoli, tutorial e FAQ su Web Design e grafica per il Web.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Google AdWords Base

25 Giugno 2012 a Milano
Disponibilità: 7 Posti

Corso Google AdWords Base

05 Giugno 2012 a Roma
Disponibilità: 7 Posti