Da oggi comincia il mio corso di base per i CSS (Cascading Style Sheet).
Proverò a realizzare un percorso guidato per comprendere in modo semplice i CSS.
Al giorno d’oggi scrivere correttamente un foglio di stile significa poter manipolare come vuoi il tuo codice HTML, creare degli effetti avanzati e impostare layout di pagina che si adattano perfettamente ad ogni dispositivo e quindi “responsive ”.
Partirò dalle basi:
in questo articolo vi spiegherò quali sono le differenze tra CSS inline e CSS interno.
Se siete pronti, cominciamo dagli strumenti che ci servono:
- un editor HTML/CSS (io userò Sublime Text, se vuoi scaricarlo gratuitamente questo è il link)
- un po’ di pazienza 🙂
Cominceremo con un file HTML molto semplice, che arricchiremo con un po’ di regole CSS.
Questo è il file iniziale:
<!DOCTYPE html>
<html>
<head>
<title>Monte Pellegrino</title>
</head>
<body>
<header>
<span>Escursione nei dintorni di Palermo</span>
<h1>Monte Pellegrino</h1>
</header>
<p>
Il “caro” Monte Pellegrino è la montagna cui tutti i palermitani rivolgono lo sguardo affettuosamente ogni giorno, sospirato riferimento per i naviganti e gli emigranti che se ne allontanavano o tornavano da lontano, custode di segreti secolari, quasi nume tutelare che veglia dall’alto del suo massiccio sulla città; celebrato da Goethe e da tutti i viaggiatori che nel corso dei secoli sono passati per Palermo.
</p>
<a href="#">Scopri di più sul Monte Pellegrino</a>
</body>
</html>
Come vedete, è una pagina senza stile, anche se, per completezza, è giusto aggiungere che una pagina HTML ha sempre delle regole CSS iniziali che sono dovute allo “User Agent Style Sheet ” , ovvero lo stile applicato di default dai diversi browser.
Si tratta di regole che ci permettono una corretta separazione tra i diversi elementi della pagina (padding, margini e font per lo più).
Detto questo, cominciamo a comprendere le differenze tra i diversi metodi di scrittura dei CSS.
Inline Style
Questo metodo ci permette di applicare il CSS direttamente all’interno dei tag degli elementi presenti nella pagina, in questo modo:
Inserite nel tag <body>:
style="background-color: green;"
Inserite nel tag <h1>:
style="color: white;"
in questo modo:
<body style="background-color: green;">
<header>
<span>Escursione nei dintorni di Palermo</span>
<h1 style="color: white;">Monte Pellegrino</h1>
questo sarà il risultato:
Adesso lo sfondo è di colore verde e il titolo h1 è di colore bianco.
In questo modo, teoricamente, potremmo creare lo stile per tutta la pagina.
Non ve lo consiglio affatto, infatti lo stile inline è consigliato per piccole modifiche o per testare il vostro CSS, qualsiasi altra regola scritta con i CSS interni od esterni non potrà mai modificare quello inline, si tratta del principio della “cascata dei fogli di stile ” (in inglese Cascading Style sheets).
Stile Interno (Internal Style)
Lo stile interno è inserito tra l’apertura e la chiusura del tag <head> e viene definito utilizzando il tag <style>.
Create il tag <style> all’interno della sezione <head> del file HTML, in questo modo:
<head>
<title>Monte Pellegrino</title>
<style>
</style>
</head>
Diamo al paragrafo uno stile, cambiamo la dimensione e lo visualizziamo in grassetto:
<head>
<title>Monte Pellegrino</title>
<style>
p {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
Se visualizzate nuovamente il file nel browser, noterete che il paragrafo ha una dimensione maggiore e il testo è, adesso, in grassetto.
Lo so che si tratta di modifiche banali ma è importante, in questo frangente, capire la differenza tra i diversi modi di applicare uno stile, più avanti realizzeremo modifiche ben più complesse.
Per coerenza, diamo al titolo <h1> una dimensione di 90px:
<head>
<title>Monte Pellegrino</title>
<style>
p {
font-size: 20px;
font-weight: bold;
}
h1 {
font-size: 90px;
}
</style>
</head>
A questo punto, il risultato sarà il seguente:
Cambiamo il colore del titolo, in questo modo:
<head>
<title>Monte Pellegrino</title>
<style>
p {
font-size: 20px;
font-weight: bold;
}
h1 {
font-size: 90px;
color: bisque;
}
</style>
</head>
Se provate a ricaricare la pagina, noterete che il colore “bisque” non viene applicato, come mai?
Ho accennato, prima, che le regole CSS e, specificamente, il meccanismo della “cascata” dei CSS hanno delle regole ben precise e che lo stile inline, quello che abbiamo applicato inizialmente, sovrascrive tutte le regole create con lo stile interno ed esterno.
Ne consegue che qualsiasi regola applichiamo tramite stile interno non verrà considerata dal browser se ne esiste una uguale scritta inline.
La soluzione per applicare il nuovo colore di <h1> è semplice, rimuoviamo lo stile inline da <h1> in modo tale che l’unica regola color sia applicata tramite stile interno:
<head>
<title>Monte Pellegrino</title>
<style>
p {
font-size: 20px;
font-weight: bold;
}
h1 {
font-size: 90px;
color: bisque;
}
</style>
</head>
<body style="background-color: green;">
<header>
<span>Escursione nei dintorni di Palermo</span>
<h1>Monte Pellegrino</h1>
</header>
Adesso voglio eliminare il colore di background della pagina e applicarlo soltanto al <header>, come fare?
Anche in questo caso eliminiamo lo stile inline applicato al <body> e creiamo una nuova regola per <header>, in questo modo:
<head>
<title>Monte Pellegrino</title>
<style>
p {
font-size: 20px;
font-weight: bold;
}
h1 {
font-size: 90px;
color: bisque;
}
header {
background-color: green;
}
</style>
</head>
Adesso il colore verde che faceva da sfondo a tutta la pagina è diventato lo sfondo del <header>.
Anche questo modo di scrivere i CSS non è quello migliore, per diversi motivi:
- in un vero sito web ci sono diverse pagine HTML, a volte decine o centinaia.
Con lo stile CSS inserito all’interno del file HTML, ci toccherebbe modificare ogni regola per ogni pagina che necessita la modifica. - Secondo motivo: il browser dovrebbe scaricare le stesse regole tante volte quante sono le pagine e ciò causerebbe un rallentamento nella visualizzazione del sito.
Nella prossima parte introdurrò la scrittura dei CSS tramite file esterno, la giusta pratica per separare la presentazione di un sito web dalla sua struttura.
Alla prossima.
Scarica i files
1 commento