Guida CSS

• 1 Introduzione ai fogli di stile CSS

  CSS è l'acronimo di Cascading Style Sheets, ovvero "fogli di stile a cascata" o, più brevemente, fogli di stile. Cos'è CSS e a cosa serve Si tratta del linguaggio standard per la stilizzazione di documenti HTML (ma...

  6.991 lettori
• 2 Fogli di stile interni, esterni e stili inline

  Nella precedente lezione abbiamo visto che lo scopo dei CSS è quello di separare la formattazione dalla struttura del documento: se la seconda è demandata ai tag HTML, la prima è di esclusiva competenza dei fogli di stile. Ab...

  31.222 lettori
• 3 L'attributo media

  Nella precedente lezione abbiamo visto come integrare delle istruzioni CSS all'interno di un documento HTML. In questa lezione presenteremo un importante attributo che è possibile aggiungere tanto al tag <style> che al tag...

  2.989 lettori
• 4 Aggiungere commenti ai fogli di stile

  Una buona prassi di programmazione prevede che il bravo sviluppatore non ometta mai di commentare il codice. I commenti sono delle porzioni di testo, presenti tra le varie istruzioni CSS, che non vengono interpretate dal browser, il quale le ignor...

  5.385 lettori
• 5 Regole, proprietà e direttive

  Nella seconda lezione della nostra guida abbiamo visto come utilizzare i CSS all'interno di un documento HTML. Abbiamo visto, infatti, che è possibile applicare regole all'interno dei singoli tag HTML (stile inline), definire fogli di stili...

  7.695 lettori
• 6 Selettori: universale, per tipo, classe e ID

  Nella precedente lezione abbiamo visto come costruire una regola CSS ed abbiamo visto che il primo elemento (partendo da sinistra) prende il nome di selettore. Il selettore, come il nome lascia intuire, serve "per selezionare" il o gli e...

  10.356 lettori
• 7 Quando usare una classe? E quando usare un ID?

  La differenza tra classi ed ID è di fondamentale importanza: mentre con una classe definiamo la stilizzazione di una serie di elementi con caratteristiche comuni, con l'ID si definisce un elemento unico all'interno della pagina. Se ad esemp...

  10.889 lettori
• 8 Selettori di relazione e per attributo

  Nella passata lezione abbiamo visto i selettori di base, ovvero i selettori utilizzati più di frequente attraverso i quali è possibile far fronte alle più comuni esigenze di sviluppo. Le possibilità offerte da CSS 2.1,...

  5.496 lettori
• 9 Pseudo classi e pseudo elementi

  Le pseudo-classi sono un concetto fondamentale per chi lavora coi CSS. Attraverso le pseudo-classi non si definisce l'aspetto di un elemnto ma di un particolare stato. Una pseudo classe differisce da una classe in quanto la prima (a differenza del...

  7.776 lettori
• 10 Ereditarietà

  Uno dei concetti fondamentali dei CSS è quello di ereditarietà, in questa lezione cercheremo di spiegare, in modo semplice, cos'è e come sfruttarla all'interno dei nostri fogli di stile. Il DOM (cenni) Il concetto di ereditari...

  2.544 lettori
• 11 Risoluzione dei conflitti tra stili

  Abbiamo appena visto, al termine della lezione precedente, come si risolve un primo "conflitto" tra regole discordanti: abbiamo visto, infatti, che le proprietà assegnate specificamente prevalgono su quelle ereditate. In un certo...

  3.163 lettori
• 12 Il Box Model

  A partire da questa lezione iniziamo a parlare delle proprietà CSS per l'attribuzione degli stili agli elementi, a comprenderne il significato e ad esaminarne le casistiche di utilizzo. Il primo passo in tal senso lo faremo parlando di box...

  3.936 lettori
• 13 Box Model: le proprietà width, height e overflow

  Nella lezione precedente abbiamo introdotto il box-model di CSS, mentre a partire da questa lezione vedremo di illustrarne le principali proprietà, ovvero width, height, padding, border e margin. La proprietà width La propriet...

  7.235 lettori
• 14 Box Model: le proprietà padding e margin

  In questa lezione vedremo le proprietà padding e margin ovvero, rispettivamente, la spaziatura interna ed esterna al box. La proprietà padding Tramite il padding viene definito uno spazio tra l'area dei contenuti ed il confine inte...

  24.495 lettori
• 15 Box Model: la proprietà border

  Ultima famiglia di proprietà attinenti al concetto di Box-model è quella relativa alla gestione dei bordi. Attraverso queste proprietà CSS consente agli sviluppatori una massima libertà creativa essendo possibile, per c...

  11.079 lettori
• 16 Background: gestione dello sfondo coi CSS

  Con la scorsa lezione abbiamo esaurito la rassegna delle proprietà CSS tipiche del box-model. A partire da questa lezione passeremo in rassegna le altre proprietà dei fogli di stile partendo da quelle relative allo sfondo (o backgrou...

  24.762 lettori
• 17 Definire un colore per il testo: la proprietà color

  Abbiamo già affrontato le tematiche relative al colore nei CSS in due precedenti lezioni, più precisamente nella lezione dedicata alla stilizzazione dei bordi (proprietà border-color) e nella lezione dedicata al background (pr...

  1.766 lettori
• 18 Stilizzare e formattare il testo

  Nella precedente lezione abbiamo già visto un'importante proprietà del testo, cioè la proprietà color attraverso la quale è possibile definire il colore degli elementi testuali. Vediamo adesso quali sono le princ...

  36.433 lettori
• 19 Gestire la disposizione del testo nello spazio

  Oltre a quelle citate nella lezione precedente della nostra Guida CSS esistono diverse altre proprietà per la stilizzazione del testo attraverso le quali è possibile definirne, in modo estremamente preciso, la disposizione di lettere...

  45.941 lettori
• 20 Stilizzare i link

  La stilizzazione dei link attraverso i codici CSS non prevede comandi specifici se non quelli che già abbiamo visto per il testo, una sua trattazione specifica, tuttavia, si rende opportuna in quanto si tratta di un elemento particolarmente...

  3.763 lettori
• 21 Stilizzare liste e tabelle

  Stilizzare le liste Attraverso i CSS è possibile agire sulla presentazione delle liste, cioè sull'aspetto di liste ordinate (<ol>) e non ordinate (<ul>). A tal fine i fogli di stile ci consentono di fare r...

  3.556 lettori
• 22 Stilizzare il cursore del mouse

  Cambiare l'aspetto del cursore del mouse con i CSS può essere un'ottima opzione per personalizzare l'esperienza utente su un sito web. Grazie alla proprietà cursor di CSS, è possibile scegliere tra una vasta gamma di cursori p...

  7.644 lettori
• 23 Le proprietà display e visibility

  La proprietà display Una proprietà fondamentale di CSS è sicuramente display. Attraverso questa proprietà, infatti, è possibile definire il modo in cui un dato elemento viene mostrato (o meno) all'interno della...

  7.029 lettori
• 24 Che differenza c'è tra display:none e visibility:hidden?

  Nella lezione precedente abbiamo visto cosa sono e come funzionano le proprietà del CSS visibility e display ed abbiamo avuto modo di capire che entrambe agiscono sulla visualizzazione (o meno) di un dato elemento della pagina. Diveramente...

  2.613 lettori
• 25 Posizionare gli elementi

  I CSS permettono di "giocare" con gli elementi di una pagina in modo da posizionarli dove si preferisce, a prescindere cioè dalla naturale posizione sequenziale che un elemento avrebbe se si seguisse il normale flusso del codice H...

  7.714 lettori
• 26 Gestire la sovrapposizione di elementi

  Abbiamo visto come, attraverso i CSS, possiamo gestire ogni aspetto della presentazione degli elementi della pagina; nella precedenti lezioni abbiamo imparato manipolare la proprietà display e come posizionare gli elementi nella pagina. In...

  9.338 lettori
• 27 Creazione di un layout table-less

  Concludiamo la nostra guida di base all'utilizzo dei CSS analizzando due proprietà fondamentali, ovvero float e clear. Queste due proprietà (che non vengono ereditate dagli elementi discendenti) assumono un ruolo assolutamente centra...

  10.313 lettori