Come creare fogli stile CSS e perché crearli

Istruzioni per creare un foglio stile CSS e relativo file HTML

Nell'articolo precedente abbiamo visto cosa è un foglio stile CSS e quali benefici può portare ad un sito web. Ora vediamo come creare un CSS, come creare un file HTML privo di tabelle da abbinare al CSS e come associarli tra loro.

INIZIAMO ORA A CREARE UN FOGLIO CSS CON UN QUALSIASI EDITOR

Per creare un foglio CSS va bene qualsiasi editor (Frontpage, Dreamweaver, o anche il blocco note di Windows); l'importante è salvare il file nella stessa cartella in cui collocheremo i file HTML e assegnargli come estensione .CSS.

Digitiamo nel foglio CSS vuoto le seguenti informazioni (se non volete digitare potete aprire il file prova.css e fare un copia/incolla del contenuto):

body {
font: 10px/12px verdana;
color: white;
background: url(sfondoprincipale.jpg);
margin: 0 auto;
}
#contenitore {
width: 630px;
background: url(sfondo-centrale.jpg) repeat-y;
margin: 0 auto;
padding: 20;
text-align: justify;
}
#intestazione {
width: 630px;
height: 278px;
background: url(intestazione.jpg) repeat-x;
}
#intestazione h3 {
margin: 0px 0px 0px 10px;
font: 18px/24px arial,sans-serif;
color: yellow;
}
h3 {
font: 16px/24px arial,helvetica,sans-serif;
color: white;
margin-left: 0px;
}
#slogan {
position: absolute;
top: 0px;
margin-left: 635px;
padding: 8;
width: 170px;
height: 65px;
background: #3513E1;
}
#menu {
position: absolute;
top: 100px;
margin-left: 635px;
padding: 8;
width: 170px;
height: 350px;
background: #C30A0A;
}
a:hover,a:active {
background: #E1C290;
}

COME CREARE UN FILE HTML DA ABBINARE AL CSS

Ora che abbiamo creato il foglio stile CSS dobbiamo creare il relativo file HTM. Se non volete digitare il testo seguente potete aprire il file PROVA.HTM e fare un copia/incolla del contenuto. Tenete presente che potete utilizzare il contenuto del file SOLO per imparare a creare i fogli stile. E' vietato pubblicarlo. Potete linkare questa pagina o la pagina prova.htm ma non pubblicarle.

<html>
<head>
<title>come creare un foglio stile CSS</title>
<style type="text/css" media="screen">@import "prova.css";
</style>
</head>
<body>
<div id="intestazione">
<h3>REALIZZAZIONE SITI WEB</h3>
</div>
<div id="contenitore">
<h4>ESEMPIO DI CIO' CHE OTTENIAMO CON UN FOGLIO CSS</h4>
<p>Ecco un esempio di cosa possiamo ottenere con un semplice foglio stile CSS abbinato a questo file HTM. Il foglio stile associato si chiama prova.css.
Potete aprirlo e verificare le istruzioni di formattazione contenute nello stesso.</p>
<p>Il foglio stile dell'esempio prevede 4 DIV (equivalenti a 4 celle di una
tabella tradizionale): il DIV contenitore, il DIV intestazione, il DIV menu e il
DIV slogan.</p>
<p>All'interno del DIV contenitore ho scritto il testo principale (quello che state leggendo). all'interno del DIV
intestazione ho inserito come sfondo una fotografia del mio studio (intestazione.jpg),
all'interno del DIV slogan ho inserito i miei numeri telefonici e l'invito a
contattarmi, all'interno del DIV menu ho inserito i link a tre pagine del sito.
Tutte le istruzioni contenute nel foglio stile sono commentate. I commenti li
trovate tra i simboli  /* e */</p>
<p>Analizzando il foglio stile PROVA.CSS potrete vedere le caratteristiche di
ognuno di questi DIV (colore o immagine di sfondo, posizionamento nella pagina,
tipo di font e dimensioni.</p>
<p>Analizzando il codice di questa pagina (PROVA.HTM) potrete vedere come vanno richiamati i DIV presenti nel foglio stile (esempio: <DIV ID="menu">).</p>
<p>Grazie all'utilizzo del foglio stile CSS sterno contenente tutte le
informazioni relative alla formattazione della pagina HTML questa pagina risulta molto leggera (è di soli 2 KB).</p>
</div>
<div id="menu">
<a href="realizzazione-siti-web.htm">realizzazione siti web</a><p>
<a href="posizionamento.htm">posizionamento siti web</a></p>
<p><a href="indicizzazione.htm">indicizzazione siti web</a></p>
</div>
<div id="slogan">
<h3>VUOI FARE DI PIU?</h3>
<p>CONTATTAMI ALLO 0302584515 OPPURE INVIA UN SMS AL 3356456855
</div>
</body>
</html>

COME VEDERE IL RISULTATO OTTENUTO GRAZIE AL CSS

Per vedere il risultato ottenuto grazie all'abbinamento del file prova.htm con il foglio stile prova.css potete cliccare qui per aprire il file di esempio.

Vedi dettagli sui corsi di FrontPage, Expression Web, grafica web.

Contattaci oggi stesso per saperne di più

Cell. 335 64 56 855 - Tel. 030 258 43 15

Se non hai trovato in questa pagina ciò che cercavi segnalaci il problema cliccando qui. I tuoi commenti e suggerimenti sono sempre benvenuti.

Studio Viasetti, indicizzazione e posizionamento siti web in internet