Bentornati!
Spero che vi siate fatti una scorpacciata del meglio del meglio, mare, montagna o casa in città senza il caos della vita quotidiana, non vi nascondo che a me la città svuotata non dispiace affatto *), ma bando alle ciance e tuffiamoci nella nostra nuova lezione.
Oggi parliamo esclusivamente di CSS, ovvero i “fogli di stile”: si tratta di pagine in cui sono contenute tutte le “regole” che stabiliscono la presentazione del HTML, a seconda delle regole che indichiamo nei fogli di stile un elemento sarà visualizzato in un certo modo.
Andiamo subito a degli esempi concreti:
1) Aprite il vostro editor (Notepad+ o il vostro preferito)
2) Create un nuovo documento andando su File->Nuovo
3) Date un nome al foglio di stile (il primo CSS viene chiamato di solito style.css) e salvatelo sul Desktop
4) Create un nuovo documento andando su File->Nuovo
5) Dategli un nome chiamandolo index.html e salvate sul Desktop
6) Create una cartella sul Desktop (tasto destro->Nuovo->Cartella) e chiamatela test
7) Tagliate e incollate i due documenti precedentemente salvati (style.css e index.html) all’interno della cartella test
A questo punto abbiamo l’occorrente per scrivere una pagina HTML che avrà al suo fianco un foglio di stile che “le dirà” come comportarsi quando viene visualizzata sul monitor.
Per prima cosa scriviamo all’interno di index.html il seguente codice:
Questo è l’esempio di un paragrafo HTML con un CSS o foglio di stile.
Avrete notato che all’interno del tag <head> abbiamo inserito una riga, questa non fa altro che collegare con un link il foglio di stile (stylesheet) al nostro documento HTML. Ci sono altri metodi per inserire le regole CSS, ma questo è sicuramente il più indicato per avere più ordine e collegare decine, centinaia o migliaia di istruzioni che, se fossero contenute nella pagina HTML potrebbero penalizzarci invece di alleggerire il nostro lavoro.
Adesso salvate index.html e aprite style.css, scriveremo alcune regole in modo da istruire il tag <p> e visualizzare il testo al suo interno come noi vogliamo, scrivete così:
body {
background-color: #FF5500;
}
p {
font-family: “Times New Roman”;
font-size: 20px;
}
Bene, salvate style.css.
Aprite index.html con il vostro browser preferito (tasto destro->Apri con) e questo dovrebbe essere il risultato:
Il risultato del codice HTML unito alle istruzioni del CSS.
Sì, lo so, ho messo uno sfondo raccapricciante, ma qui viene il bello, se non vi piace provate a cambiarlo voi!
Nessun problema, è semplice, basterà cambiare il codice (esadecimale) della regola background-color nel CSS:
a questo proposito vi do il link di una risorsa utilissima, w3schools, dalla quale potrete apprendere la composizione dei colori per il web, in cui troverete tutti i codici esadecimali per i colori da attribuire agli elementi. (Personalmente l’ho cambiato in grigio-#D8D8D8)
Adesso modifichiamo anche gli attributi dell’elemento <p> a cui avevamo dato una grandezza di 20 pixel e il font (carattere) Times New Roman.
Scrivete Verdana al posto di Times New Roman e 30px al posto di 20px, salvate e aprite index.html sul vostro browser, premete F5 sulla tastiera per aggiornare la pagina ed ecco i cambiamenti che voi avete apportato!
La nostra pagina HTML dopo le modifiche apportate.
In pochissime mosse e senza toccare l’HTML avete modificato l’aspetto del documento, si tratta di un esempio molto banale, che fa capire, però, l’importanza dei CSS e quali potenzialità abbia questo strumento una volta compreso il funzionamento.
Se doveste trovare difficoltà oppure aveste qualche domanda da pormi, sono avostra completa disposizione e…voi che colore avete scelto per lo sfondo?
Scarica i files
