Lez.5 - Corso Base Css

Assegnare uno Stile Esterno in un foglio di stile Css

Stile Esterno

Nel momento in cui le regole css che applichiamo ad una pagina diventano diverse centinaia di righe è naturale pensare che non possiamo più metterle insieme al codice html perché si farebbe molta confusione e quindi è necessario appoggiarsi ad un Foglio di Stile Esterno.

Creare un foglio di stile esterno e richiamarlo all'interno delle pagine HTML e' semplice.

Per prima cosa dobbiamo definire un nuovo file e salvarlo con estensione .css Questo file dovrà contenere tutte le regole Css che andranno a definire la formattazione della pagina web a cui sarà collegato. Il file con estensione .css andrà collocato, e quindi salvato (è consigliabile), nella cartella pricipale del sito web, dove ci sarà anche la Home page la pagina principale del sito che sarà necessariamente denominata index.html.

Ora colleghiamo il nome_file.css (nome_file è puremente arbitrario, potete chiamarlo come volete l'importante è che abbia l'estensione .css) alla pagina che vogliamo fruisca dello stile che abbiamo nel nome_file.css questo viene fatto aggiungendo nel tag <head></head> il seguente codice:

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

Spieghiamone il significato:
link è il tag che consente di attaccare lo stile di un file esterno al documento html.

rel è un'attributo per indicare la relazione tra il file collegato ed il documento html, e indico che il file collegato e' un stylesheet (foglio di stile).

href richiama il percorso per raggiungere il file che dobbiamo collegare, nel nostro caso nome_file.css

type è un'attributo usato per specificare il media-type "text/css" per il Cascading Style Sheet. Permette ai browser di ignorare i tipi di style sheet da loro non supportati. In poche parole specifica il tipo di dati che stiamo fornendo.

Ricordiamo che un foglio di stile non deve usare tag HTML o comunque comandi racchiusi tra i segni < >

Il file deve essere costituito solo da regole, le quali si racchiudono tra parentesi graffe, e l'assegnazione del valore alla proprietà deve essere fatta con i due punti : come ad esempio:
p { margin: 2px; }

Vediamone un frammento:
		header {
			background-color: #CCCCFF;
			padding: 20px;
			color: red;		
		}
		header h1 {
			font-size: 3em;
			font-style: italic;
			font-family: georgia;
		}
		header h2 {
			background-color: #D0F0C0;
			margin-left: 0px;
			margin-top: 0px;				
		}
		article header {
			background-color: #D0F0C0;
			margin-left: -20px;
			height: 20px;
			border-bottom: 3px solid black;
		}
		nav {
			background-color: #FFC0CB;
			padding: 8px;
		}
		main {
			font-size: 110%;
			font-style: italic;
			font-family: georgia;
		}
		article {
			background-color: #D0F0C0;
			height: 380px;
			width: 70%;
			float: left;
			margin-top: 0px;
			padding-left: 20px;
			padding-top: 10px;
			text-decoration: justify;
		}
		a {
			margin-right:20px;
			margin-left: 12px;
		}
		article	footer  {
			height: 30px;
			padding: 10px;
			background-color: #D0F0C0;
			margin-left: -20px;
			margin-top: 30px;
			text-align: left;
			font-style: italic;
			border-top: 3px solid black;
		}
		aside {
			background-color: orange;
			padding: 6px;
			margin-left: 1px;
			width: 25%;
			float: right;
		}
		footer {
			background-color: #CCCCFF;
			padding: 8px;
			margin-top: 417px;
			text-align: right;
			font-style: italic;
		}