- Sim Card che tutelino i minori
- Carte di Credito e asterischi
- Acquista un Dominio
- Corso di Posizionamento nei Motori di Ricerca
Il tuo primo foglio di stile
I primi passi nel mondo dei fogli di stile.
Collega il foglio di stile alle pagine web
<title>Titolo Pagina</title>
<link rel="stylesheet" type="text/css" media="all" href="/fogliodistile.css" />
</head>
Basta questa riga di codice per specificare che tutte le informazioni sullo stile sono contenute nel file css collegato o in alternativa
<title>Titolo Pagina</title>
<style type="text/css" media="screen">
@import "/fogliodistile.css";
</style>
</head>
Puoi collegare più di un CSS alle tue pagine e in alternativa puoi impostare informazioni sullo stile all'interno di una singola pagina, stile che sarà valido solo per quella specifica pagina:
<title>Titolo Pagina</title>
<style type="text/css" media="all" >
body {background: #000; color: #fff;}
.nomestile {color: #000000;}
</style>
</head>
Usare gli stili
Ridefinire i Tag HTML
Se hai ridefinito un tag html all'interno del tuo foglio di stile (cambiando informazioni sulla visualizzazione di body, table, p etc. etc.) lo stile sarà applicato automaticamente ogni volta che quel tag apparirà all'interno delle pagine collegate al foglio di stile
Nel nostro foglio di stile...
table {width: 95%;}
p {color: #fff;
Ridefinendo il tag table tutte le tabelle nelle pagine collegate al css avranno larghezza 95% e ridefinendo p, tutti i paragrafi avranno il testo di colore bianco.
Creazione nuovi Stili
Se non sto modificando un tag html ma sto creando un nuovo stile, dopo averlo definito all'interno del css devo richiamarlo all'interno delle pagine web:
Nel nostro foglio di stile...
.tabverde {width: 70%; border: #00CC33; border-style: dotted; }
| la definizione di .tabverde va nel file css mentre nel documento html basta scrivere: <table class="tabverde"> <tr> <td>..... e come per magia lo stile viene applicato solo a questa tabella. |
Una volta definito lo stile nel css [i nomi degli stili vanno preceduti dal punto (.verde .tabellarossa .evidenziato) per applicarlo a qualunque elemento del sito puoi utilizzare:
CLASS:
<p class="evidenziato"> testo da evidenziare</p>
<table class="rossa">....</table>
SPAN:
<span class="evidenziato">testo a cui applicare lo stile</span>
DIV:
<div class="titolo">testo</div>