fatti trovare dai tuoi clienti
Corso SEO & CSS: #23 Introduzione
Per essere in prima pagina su Google è importante avere una presenza web di impatto, perciò ti serve conoscere il linguaggio CSS per decorare le tue pagine HTML
- Hai già sentito parlare di CSS riferito a internet, ma non hai mai capito cosa fosse?
- Ti piacerebbe se qualcuno ti facesse un corso accelerato di CSS senza che tu debba necessariamente diventare un tecnico informatico? o un hacker?
- Ti piacerebbe capire cosa devi fare per essere in prima pagina su Google sfruttando il CSS?
Corso SEO & CSS
La rubrica che ti spiega solo quello che ti serve sul CSS, per essere in prima pagina su Google
Oggi incomincia l'appuntamento settimanale in cui ti spiegherò tutto quello che devi sapere sul CSS per capire cosa c'è dietro a un sito web, nell'ottica di creare un sito web di forte impatto, per piacere al tuo pubblico ed essere in prima pagina su Google!
Un tempo i file HTML contenevano al loro interno tutte le cose che servivano per far generare al browser le pagine web sulla base di ciò che il webmaster o il designer decideva di mostrare al pubblico.
Anche oggi per questioni di retrocompatibilità o "compatibilità all'indietro" — per fare in modo che anche i vecchi siti web possano essere mostrati correttamente — è possibile scrivere tutto nel solo file HTML, ma dal punto di vista della manutenzione del codice, della velocità di scaricamento e rendering delle pagine, oggi si preferisce separare i file che compongono le pagine web.
Ti ho già spiegato nella #01 Introduzione che le pagine web sono scritte in HTML ma possono essere costituite anche da altri file ausiliari come ad esempio i fogli di stile CSS.
Cosa è CSS
CSS (letterariamente Cascading Style Sheets) è un linguaggio di programmazione che accompagna l'HTML e serve a conferire agli elementi che la compongono un aspetto gradevole, di impatto, secondo le preferenze del grafico o del designer o del webmaster che lo realizza.
CSS è un acronimo che in italiano potremmo tradurre in "fogli di stile" e consiste in un file di testo che può essere incapsulato all'interno dello stesso file HTML mediante il tag HTML <style> oppure allegato come file separato mediante il tag HTML <link rel="stylesheet" href="css/style.css">.
Generalmente i file CSS hanno estenzione .css anche se possono avere un nome di file arbitrario.
Il CSS è un file che contiene una lista di definizioni che si riferiscono agli elementi che costituiscono le pagine web e ne definiscono le proprietà.
Elementi e selettori CSS
Un elemento CSS può essere un generico paragrafo, un generico blocco di testo in grassetto, un generico titoletto H2 o H3, ma può anche essere un blocco div o l'intero documento (body).
Tutti gli elementi dell'HTML hanno caratteristiche predefinite come ad esempio il tipo di carattere, il formato e la dimensione del testo, i margini, il colore di primo piano e il colore di sfondo.
Ogni elemento può assumere un diverso aspetto grazie al CSS: è possibile modificare il tipo di carattere (il font), la dimensione, l'allineamento, ma anche il colore dei caratteri, il colore di sfondo, i margini, la posizione all'interno della pagina, il colore e lo spessore del bordo e tantissime altre cose!
Per assegnare agli elementi della pagina web nuove proprietà il CSS definisce una sintassi particolare che permette al progettista di spiegare al browser a quali elementi desidera modificare le proprietà. Le porzioni di codice CSS che servono a specificare a quali elementi si devono applicare le modifiche, si chiamano selettori.
Grazie ai selettori CSS è possibile istruire il browser per modificare gli attributi di un generico tag HTML (per esempio tutti i paragrafi, tutte le tabelle, l'intero corpo del documento), oppure un tag HTML classificato in una certa "classe CSS" (per esempio tutti i paragrafi di tipo "allineati-a-destra" o blocchi div di tipo "articolo-di-blog"), oppure ci si può riferire ad un elemento specifico identificato da un codice ID univoco.
Il progettista della pagina web può inventarsi infinite classi o infiniti identificatori con i nomi più disparati, purchè rispettino la sintassi che vedremo.
Proprietà CSS
Le più comuni proprietà che vengono modificate mediante il codice CSS sono le seguenti:
- background: colore o immagine di sfondo
- color: colore del testo
- font-size: grandezza dei caratteri
- font-style: stile del carattere
- text-align: allineamento del paragrafo
- line-height: altezza della interlinea
- margin: spazio circostante all'elemento
- padding: margine interno a un elemento
- height: altezza di un elemento
- width: larghezza di un elemento
I valori assegnati a ciascuna proprietà possono essere letterali, numerici, percentuali, in pixel, url e altro.
Proprietà statiche e dinamiche
La maggior parte delle proprietà sono "statiche" e definiscono proprietà immutabili dall'inizio alla fine dell'esperienza utente, ma ci sono alcune proprietà "dinamiche" che conferiscono movimento agli elementi della pagina web, come ad esempio comparsa e scomparsa sulla base dell'interazione dell'utente.
Grazie al CSS è possibile definire animazioni e microinteractions, talvolta anche senza ricorrere a codice Javascript eseguibile aggiuntivo!
Mediante un unico foglio di stile CSS è possibile definire un aspetto di un certo tipo quando l'utente apre il sito web da PC con un grande monitor, un altro aspetto quando l'utente sta usando un tablet di medie dimensioni e un altro aspetto ancora quando l'utente sta navigando sul nostro sito web da smartphone!
Questo comportamento si chiama adattivo o responsive e per definire le caratteristiche di ogni diverso layout è sufficiente un semplice file CSS senza nient'altro!
Conclusioni
Hai capito che esiste un linguaggio di programmazione molto potente, specifico per le pagine web, rivolto alla descrizione estetica degli elementi del web!
Nel corso dei prossimi articoli di questo Blog sulla SEO approfondiremo tutti i principali aspetti sul CSS con particolare attenzione a quelli che potenziano la visibilità del tuo sito web e lo portano più facilmente in prima pagina sui motori di ricerca.
Ti do appuntamento alla prossima settimana, nel frattempo metti un like 👍🏻 se questo articolo ti è stato utile e condividilo con tutti i tuoi amici che — come te — vogliono essere in prima pagina su Google, te ne saranno immensamente grati!
Se qualcosa non ti è chiaro, fammi le tue domande nei commenti, risponderò a tutti, oppure scrivimi in privato.
Iscriviti al Corso SEO Operativo per poter entrare nel gruppo privato dove parliamo ogni giorno di SEO e di come fare per essere in prima pagina su Google, a presto.