I FOGLI DI STILE CSS
di Lino Bertuzzi

Cosa sono i fogli di stile CSS.
Il CSS (Cascading Style Sheets, in italiano fogli di stile), in informatica, è un linguaggio usato per definire la formattazione o impaginazione di documenti HTML, XHTML e XML ad esempio in siti web e relative pagine web. Le regole per comporre il CSS sono contenute in un insieme di direttive (Recommendations) emanate a partire dal 1996 dal "World Wide Web Consortium" (W3C).
L'introduzione del CSS si è resa necessaria per separare i contenuti dalla formattazione e permettere una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti, garantendo contemporaneamente anche il riuso di codice ed una sua più facile manutenibilità. http://www.metatags.it/cosasono.php

Nell'editor DREAMWEAVER, se uno conosce la lingua inglese, il foglio di stile risulta abbastanza facile. Scriviamone uno

 

@charset "utf-8";
/* CSS Document */
<style type="text/css">
body {
background-image: url(images/roma-di-notte.jpg";
background-repeat: no repeat;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}

</style>

Questo file contiene una serie di istruzioni per il browser:

  1. <style type="text/css"> e le istruzioni precedenti ci dicono di che file si tratta.
  2. body { indica che la formattazione riguarda il 'corpo' (body) della pagina. La parentesi graffa indica l'inizio delle istruzioni relative alla pagina. Alla fine, per indicare che la serie di istruzioni è terminata, si chiude la parentesi graffa. Per indicare che è finito il foglio di stile si mette la chiusura : </style>
  3. background-image: url(images/roma-di-notte.jpg"; indica che viene usata una immagine (image) di sfondo - quella che uso per lo sfondo (background) di questo sito. l'immagine di sfondo sta nella cartella delle immagini (images). Il segno ; indica che l'istruzione è chiusa e ne può seguire un'altra.
  4. background-repeat: no repeat; l'immagine ha risoluzione 1920 x 780 pur con un peso ridotto [50 KB] e quindi non c'è bisogno che venga ripetuta (no repeat). Poi vengono le istruzioni per il margine (margin) che si vuole lasciare alla pagina, misurato in pixels [px] o %. In ordine troviamo
    • margin-left: 0px; il margine sinistro (left)
    • margin-top: 0px ;il superiore (top)
    • margin-right: 0px;il destro (right)
    • margin-bottom: 0px;il margine inferiore

in realta visto che i margini sono tutti uguali, per il margine si può scrivere una sola istruzione, e il file sopra diventa.

@charset "utf-8";
/* CSS Document */
<style type="text/css">
body {
background-image: url(images/roma-di-notte.jpg);
background-repeat: no repeat;
margin: 0px;
}

</style>

Ora, prima di dire cosa facciamo per l'immagine, prima cambiamo solo il colore della pagina, e copiamolo tra i tag <head> e </head>. aggiungiamo anche il colore del carattere:

@charset "utf-8";
/* CSS Document */
<style type="text/css">
body {
background-color: #CC0000;
background-repeat: no repeat;
margin: 0px;
color:#FFFFFF
}
</style>

Una delle utilità di DREAMWEAVER è che ti permette anche di scegliere il colore degli elementi. Apriamo la pagina precedente con l'editor di testo e aggiungiamo i tag, oppure copiamo e incolliamo tutto. Salviamo con altro nome e stessa estensione .htm, salviamo ad esempio come pagina_2.htm che poi apriremo con il browser:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!--- questi sopra sono elementi comuni a tutte le pagine con i quali si danno gli standard ne aggiungeremo altri --->

<head>

<!--- head = intestazione. Qui - tra i tag <head> e </head> scriviamo diversi elementi. che poi vedremo per ora il meta tag per determinare il set di caratteri -->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
body {
background-color: #CC0000;
background-repeat: no repeat;
margin: 0px;

color:#FFFFFF
}
</style>


<title>Questo è il titolo che appare sul browser quando apriamo la pagina</title>

<meta name="description" content="Diamo un esempio di strutturazione di una pagina web passo per passo- inserimento dei principali metatag nella pagina base">

<meta name="keywords" content="pagina web, pagina, base, meta, tag">

</head>

<!--- qui sotto, tra i tag <body> e </body> sciveremo i contenuti del corpo pagina --->

<body> questa è la riga di testo di esempio che appare se la scriviamo nel corpo pagina

</body>
</html>


NOTA: è preferibile salvare il foglio di stile - con un nome (includendo anche l'intestazione seguente:

@charset "utf-8";
/* CSS Document */

in tal caso, invece di tutte le istruzioni precedenti tra <head> e </head> basterà inserire l'istruzione:

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

con la quale ci si riferisce al file contenente il foglio di stile che abbiamo salvato nella cartella css/ con il nome pagprinc.css: Il colore del carattere è bianco, il fondo pagina è rosso.