CSS

Da Vikidia, l'enciclopedia libera dagli 8 ai 13 anni

Il CSS è un linguaggio di programmazione utilizzato per definire lo stile delle pagine web scritte in HTML e linguaggi simili. Serve principalmente a renderle più appetibili graficamente. Un foglio CSS può essere creato separatamente dalla pagina web HTML oppure del CSS può essere inserito, in due modi differenti, nella pagina stessa.

Metodologie di utilizzo[modifica | modifica wikitesto]

All'interno della pagina web[modifica | modifica wikitesto]

Il CSS può essere inserito nella sezione "<head>" tra i tag "<style>". Il CSS qui sotto inserito rende il testo inserito nel tag "<h1>" di colore rosso, con un font sans-serif e grande 20 pixel.
<!DOCTYPE html>
<html>
<head>
<title> Il mio sito web </title>
<meta charset="UTF-8">
<style>
    h1 {
        color: red;
        font-family: Sans-Serif;
        font-size: 20px;
    }
</style>
</head>
<body>
<h1> Benvenuto nel mio sito web </h1>
</body>
</html>

All'interno di un tag (CSS inline)[modifica | modifica wikitesto]

Il CSS può essere inserito anche direttamente all'interno di un tag nel corpo della pagina, cioè nel "<body>" per stilizzare velocemente qualcosa.
<!DOCTYPE html>
<html>
<head>
<title> Il mio sito web </title>
<meta charset="UTF-8">
</head>
<body>
<h1 style="color:red;font-family:sans-serif;font-size:20px;"> Benvenuto nel mio sito web </h1>
</body>
</html>
Il CSS inserito nell'attributo "style" direttamente nel tag "<h1>" ha lo stesso identico effetto del CSS inserito separatamente prima.

In un foglio di stile separato[modifica | modifica wikitesto]

Infine, possiamo utilizzare il CSS anche in un foglio di stile separato. Prima andiamo a linkare questo foglio di stile nell'HTML della nostra pagina.
<!DOCTYPE html>
<html>
<head>
<title> Il mio sito web </title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="stile.css"/>
</head>
<body>
<h1> Benvenuto nel mio sito web </h1>
</body>
</html>
Poi creiamo il nostro foglio con estensione .css
h1 {
        color: red;
        font-family: Sans-Serif;
        font-size: 20px;
    }
Tutti e tre i metodi qui elencati hanno lo stesso identico effetto, quello di rendere rosso, con font sans-serif e grande 20px il testo contenuto in "<h1>".

Collegamenti esterni[modifica | modifica wikitesto]