HTML - Stili

I fogli di stile indicano come mostrare i documenti negli schermi, stampanti, o a volte quanto devono essere accurati. Il Consorzio W3C ha promosso fortemente l' uso dei fogli di stile fin dalla sua fondazione nel 1994.

Il Cascading Style Sheets (CSS) è un meccanismo per stilizzare i documenti creato con lo scopo di far fronte alle esigenze di utenti e Web Designers.

Grazie al CSS, si possono definire una serie di proprietà per ogni elemento HTML. Ogni proprietà ha un nome ed un valore, separati da due punti (:). Mentre le proprietà vengono separate da un punto e virgola (;).

<p style="color:red;font-size:24px;">Using Style Sheet Rules</p>

Produrrà il seguente risultato:

Using Style Sheet Rules

Ci sono 3 modi per utilizzare i fogli di stile in un documento:

Fogli di Stile Esterni:

Se si vogliono applicare gli stessi stili in più pagine, è buona norma inserire tutte le proprietà dei vari elementi in un singolo file e includerlo nelle diverse pagine HTML. Si può includere un foglio di stile all' interno di un documento HTML tramite l' elemento <link>. A seguire vi è un esempio:

<head>
<link rel="stylesheet" type="text/css"
href="yourstyle.css">
</head>

Fogli di Stile Interni:

Se vuoi applicare determinate regole di stile ad un singolo documento, queste possono essere incluse direttamente nel documento, come mostrato nell' esempio:

<head>
<style type="text/css">
body{background-color: pink;}
p{color:blue; 20px;font-size:24px;}
</style>
</head>

Per fare un pò di pratica puoi - Fare Pratica Online

Fogli di Stile Inline:

Si possono applicare degli stili direttamente all' interno dell' elemento. Questo tipo dovrebbe essere utilizzato quando si ha la necessità di cambiare lo stile di un singolo elemento HTML. Per utilizza un Inline Style, bisogna utilizzare l' attributo style nel tag di interesse. A seguire un esempio:

<p style="color:red;font-size:24px;">Using Style Sheet Rules</p>

Produrrà il seguente risultato:

Using Style Sheet Rules