STUDIO VIASETTI - Home Page -> Articoli utili -> Creare fogli stile CSS

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 o fare 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 fare un copia/incolla del contenuto. Tenete presente che potete utilizzare il contenuto del file SOLO per imparare a creare i fogli stile.

<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>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>

Vedi dettagli sui corsi di Expression Web, grafica web.

Contattaci oggi stesso per saperne di più

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

Chiama per ulteriori informazioni

zona operativa: milano - brescia - bergamo - verona - vicenza - padova - treviso - venezia - varese - torino - modena - bologna - parma - firenze - torino - livorno - pisa - napoli - roma - catania - lugano

realizzazione siti web studio viasetti: brescia - milano | contatti

Argomenti correlati