LaDispensa » Impostare una pagina web con il CSS » HTML - Guide - Fare Web Gratis - CSS - Invio cartoline - Midi - Glitter - Script - CMS
Benvenuto

Sono le ore

Il tuo IP è: 38.107.191.88
L'ultimo aggiornamento del sito risale a : ciao ciao ciaociao ciao ciaociao ciao ciaociao ciao ciao
ti trovi qui: Home » Css » Impostare-una-pagina-web-con-il-css

Impostare una pagina web con il CSS

Wednesday - 10 September 2008 | By Erfo | Categoria: CSS

Innanzitutto vediamo come deve essere impostata una pagina:

<html>
<head></head>
<body>
</body>
</html>

Adesso dobbiamo inserire all’interno della pagina il codice CSS tra i tag <head> </head> e il contenuto nel <body> :

<html>
<head>
<title>Titolo della pagina web</title>
<style type="text/css">
body {
      background-color:red;
}
 
h1 {
      color: #880000;
      font-family: Comic Sans MS;
      font-size:18px;
}
 
h2 {
      color: fuchsia;
      background-color:green;
      font-size:15px;
}
 
.ciao {
      background-color: green;
      width:450px;
      height:200px;
      margin:200px 0 0 200px;
}
</style>
 
</head>
<body>
<h1>Questo è il titolo h1</h1>
<div class="ciao">
<h2>Questo è il titolo h2</h2>
Questo è il div ciao, all'interno mettiamo tutto il contenuto</div>
</body>
</html>

Puoi vedere il risultato di questo esempio cliccando qui.

Oppure possiamo inserire il css in una pagina esterna, per poi collegarlo attraverso il seguente codice che dovrà essere inserito all’interno dei tag <head> </head> :

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

In questo caso dovremo creare due cose: la pagina e il foglio di stile.
Nella sorgente della pagina mettiamo il seguente codice:

<html>
<head>
<title>Titolo della pagina web</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Questo è il titolo h1</h1>
<div class="ciao">
<h2>Questo è il titolo h2</h2>
Questo è il div ciao, all'interno mettiamo tutto il contenuto</div>
</body>
</html>

E nel file style.css :

body {
      background-color:red;
}
 
h1 {
      color: #880000;
      font-family: Comic Sans MS;
      font-size:18px;
}
 
h2 {
      color: fuchsia;
      background-color:green;
      font-size:15px;
}
 
.ciao {
      background-color: green;
      width:450px;
      height:200px;
      margin:200px 0 0 200px;
}