Cosa sono i Fogli di stile CSS? In questo breve articolo descriveremo le funzionaità più semplici dei fogli di stile, con breve esercitazione finale.
I fogli di stile o CSS (acronimo di Cascading Style Sheets)…
sono uno strumento di formattazione delle pagine web che consente di personalizzare l’aspetto della pagina senza agire direttamente sul codice HTML della stessa.
Grazie ai CSS è possibile:
• definire i margini del documento;
• definire lo stile dell testo;
• dare l’allineamento al testo;
• gestire lo sfondo della pagina o di singoli elementi;
• gestire elementi testuali e d’immagine;
• creare effetti di transizione;
• rendere dinamici i link testuali;
• ecc.
I CSS possono essere inseriti all’interno o all’esterno delle pagine web.
Grazie all’uso di CSS esterni, inoltre, possiamo modificare l‘aspetto di tutte le pagine web del nostro sito modificato il solo file di stile (soprattutto quando il sito web è costituito da un gran numero di pagine html). I CSS inoltre sono alla base del codice dei CMS (JOOMLA, WORDPRESS, etc).
Un esempio pratico è la modifica del colore di sfondo delle nostre pagine web utilizzando il seguente codice:
body {background: #000000;}
Il nostro scopo è creare un CSS esterno richiamato da un comodo link inserito all’interno dell’Head delle pagine web. In questo modo rendiamo indipendente la formattazione delle pagine, come esposto nei punti elenco precedente, con il contenuto del codice html. In particolare l’istruzione (scritta con il nostro editor testi come ad esempio blocco note e salvata con il formato nome.css) modifica il colore di sfondo delle pagine utilizzando il codice esadecimale “#000000” che rappresenta il colore nero (come già esposto nel capitolo precedente).
Dunque clicchiamo su File, Salva con nome dal nostro Blocco Note, salviamo con il nome style.css sempre all’interno della stessa cartella dove sono contenuti i nostri file precedenti.
Apriamo nuovamente con blocco note le nostre pagine html (tasto destro sui file, apri con, blocco note), noi eseguiamo la modifica solo per index.html ma la stessa cosa va fatta anche per la seconda_pagina.html, e modifichiamo come riportato nel codice sottostante:
<html> <head> <link rel=”stylesheet” type=”text/css” href=”style.css”> <title>Titolo pagina web</title> </head> <body> <center><b><h1>Il mio primo sito web </h1></b></center> <center><p>Questo è il mio primo paragrafo della mia prima pagina web</p></center> <center><img src=”gatto.jpg” alt=”Testo” /></center> <center><b>pagina iniziale</b></center> <center><a href=”seconda_pagina.html><b>seconda pagina</b></a></center> </body> </html>
La sintassi del codice che ci consente di richiamare il file esterno style.css è:
<link rel=”stylesheet” type=”text/css” href=”style.css”>
Eseguite la modifica anche per seconda_pagina.html (da notare che abbiamo modificato anche il body delle pagine eliminando il colore di sfondo iniziale e permetterne la gestione al file css esterno.
Apriamo nuovamente le nostre pagine web e noterete il colore di sfondo nero.
Proviamo a modificare il codice esadecimale del file style.css in bianco per notare la differenza:
body {background: #FFFFFF;}
Proviamo ulteriormente a modificare il file style.css per formattare il colore dei titoli delle pagine html (in rosso) che come abbiamo visto precedentemente è gestito dal Tag H1:
body {background: #ffffff;}
h1 {color: red;}
p {font-family: Verdana, Arial, sans-serif;
text-align: center;
font-size: 12;}
Possiamo anche eliminare il tag del paragrafo all’interno delle pagine poiché tutta la formattazione, compreso il center è ge-stito dal file CSS esterno. Ancora il codice css per modificare il bordo delle immagini delle pa-gine html:
Body {background: #FFFFFF;}
H1 {color: red;}
p {font-family: Verdana, Arial, sans-serif;
text-align: center;
font-size: 12;}
img {border: 4px solid #000000;}
Provate ad esercitarvi modificando le caratteristiche del file style.css esterno.
Vuoi Approfondire?
