Sei in » Home » Guide

Creare siti con i fogli di stile (CSS)

Scritto da G. Meneghelli - Letto 5352 volte - Ultimo aggiornamento 16/12/2023

Una guida alle risorse in rete sui fogli di stile.

Indice pagina

» Introduzione
» Cosa sono i fogli di stile
» Sintassi essenziale
» Dove provare in real time e online il codice
» Framework e script utili
» Web links sull'argomento
» Conclusione
» Risorse selezionate dal web

Introduzione

Una breve guida alle istruzioni CSS che integrano ed estendono il codice HTML nella creazione del layout di una pagina web.

Troverai anche risorse in rete sui fogli di stile e stumenti per la personalizzazione del layout dei siti web.

Cosa sono i fogli di stile

Il foglio di stile o CSS (acronimo di Cascading Style Sheets) è uno strumento che permette di estendere le funzionalità del semplice HTML nella formattazione delle pagine web.

Il CSS è un file testuale dove vengono inseriti tag con una determinata sintassi che consentono di personalizzare l'aspetto della pagina senza agire direttamente sul codice HTML.

Grazie ai CSS puoi, per esepmio, definire i font e la grandezza dei caratteri, dare formattazioni particolari ai tag HTML, definire formattazioni di interi paragrafi, definire i margini del documento, dare allineamenti al testo, creare effetti di transizione, gestire lo sfondo della pagina o di singoli elementi, gestire elementi testuali e immagine, creare effetti di transizione, etc.

Il contenuto è separato dalla sua rappresentazione con i CSS ed è possibile creare più layout per vari dispositivo (pc desktop, smarthphone, etc.).

I CSS danno maggiore flessibilità al codice HTML nella visualizzazione delle informazione ed offrono maggiori possibilità per creare pagine accessibili per far superare le barriere alle persone diversamente abili.

» Inizio pagina

Sintassi essenziale CSS

Una breve guida alla sintassi CSS.

p {color: blue;} dove p sta per dichiarazione, color per proprietà e blue per valore.

Il tag da usare nel codice HTML nel caso della classe, è il seguente

<DIV class="prova">
...</DIV>

mentre per l'identificativo dobbiamo usre l'istruzioneAbbiamo la classe

<DIV ID=nome_id>
...</DIV>

Esempio di sintassi:
.prova
{
color: black;
margin: 0;
}

oppure

nome_id {
color: black;
}

La differenza tra i due elementi è che l'ID deve essere usato una sola volta in una pagina, mentre CLASS può essere riutilizzato più volte.

Le parentesi graffe, indispensabili per racchiudere i tag di CSS, si fanno premendo il tasto [alt] + il numero 123 sul tastierino numero oppure [alt] + 125 e avrai le parentesi { }.

È possibile crare un file CSS esterno da includere con le seguenti istruzioni:

<html>
<head>
<link href="stile.css" rel="stylesheet" type="text/css">
...
</head>
<body>

oppure

<html>
<head>
<style>
@import url(stile.css);
</style>
</head>
<body>
...
</html>

Questo è il metodo consigliato.

Possiamo includere le istruzioni all'intergo dei tag HEAD del nostro file HTML:

<html>
<head>
<style type="text/css">
body {background: grey;}
p {color: black;}
[...]
</style>
</head>
<body>
[...]
</html>

oppure semplicemente inserendo il tag CSS all'interno del nostro HTML:

<A HREF="link.html" STYLE="color:red">Link rosso</A>

Questo è solo un esempio dei tanti selettori che è possibile utilizzare.

Viewport ti permette di crare un layout per il mobile.

Puoi inserire i stessi selettori utilizzati nel file CSS ma con valori diversi. Questi valori saranno validi solo per risoluzioni che arrivano al valore definito, in questo caso 800 pixel.

/* *** mobile *** */
@media only screen and (max-width:800px)
{
.class { }
/* seletteri che saranno utilizzati fino alla risoluzione indicata */
}

Tutto ciò racchiuso trai i caratteri /* e */ sono commenti.

Maggiori info nell'articolo di Wikipedia .

Per scoprire tutti i selettori ti consiglio la pagina W3School CSS.
Qui troverai tutte le istruzioni selettori CSS con esempi pratici.

Con l'avvento di nuovi standard HTML e CSS, è importante sapere se un determinato tag CSS/selettore è compatibile con tutti i browser.

Il sito CanIuse ti aiuta a capire se un selettore CSS è compatibile con una dterminata versione di browser

Dove provare in real time e online il codice

Per provare in real time la sintassi di un CSS, Javascript, HTML ti consiglio alcuni siti:

• Codepen.io
• Jsfiddle.net
• Jslint
• Dabblet.com
• Jsbin
• Hshint

Con questi siti operi in una sorta di Sandbox (ambiente isolato) per sperimentare e vedere i risultati a video di una serie di istruzioni CSS.

» Inizio pagina

Framework e script utili

Meyerweb reset tool
Un toll di pubblico dominio che ha l'obiettivo di reimpostare è ridurre le incoerenze del browser in elementi come altezze delle linee predefinite, margini e dimensioni del carattere delle intestazioni e così via nella visualizzazione dei stili CSS. Infatti, non tutti i browser, mostrano alcuni in maniera aderente alle specifiche stabilite dal consorzio W3C.

» Inizio pagina

Web links sull'argomento

Guida ai CSS di Mrw.it
Da MrWebmaster.it

W3C - CSS
Il sito di riferimento, da dove nascono le raccomandazioni ufficiali del Web Consortium. All'interno anche links a siti, programmi e risorse utili.

W3Schools - CSS (in inglese)
Sito interessante in cui potrai trovare numerosi documenti introduttivi ed avanzati sull'argomento.

Guida ai fogli di Stile
Da Html.it guide, tutorial molto completi.

Introduzione ai CSS
(Constile.org)

Cascading Style Sheets home page
(W3.org)

Template by Constile
Elenco di template pubblicati da Constile.org: pagine zoomabili, menu verticali con css, layout a tre colonne, ecc. Uno di questi template mi è servito per uno dei primi layout CSS di Lidweb.it

Ten CSS tricks you may not know
Questo articolo in inglese dove propone 10 interessanti trucchi per l'utilizzo dei CSS fogli di stile.

Tabelle, stili e modalità d’uso
(Webaccessibile.org)

Porteapertesulweb
Comunità di pratica per l’accessibilità dei siti scolastici – USR Lombardia

» Inizio pagina

Conclusione

I file CSS sono indispensabili per creare un layout piacevo e usabile ad un sito web. Arrichiscono il codice HTML di funzioni visive molto importanti. Inoltre permettono di creare opzioni dinamiche e interattive ai menu, ai pulsanti ed a molte altre istruzioni HTML.