Home>CSS

Cosa sono i CSS?

css

I CSS (fogli di stile a cascata) sono un linguaggio usato per formattare le pagine web, i vari documenti HTML, personalizzando la pagina a seconda del proprio gusto.
 Le regole che compongono il CSS sono state emanate dal W3c nel 1996.
Questo linguaggio permette di gestire graficamente il proprio layout e tutte le pagine del sito, così che risulti gradevole sia a noi che principalmente all’utente.

Ma dove vanno inseriti i CSS?

Il CSS può essere di tre tipi:
Esterno: va nell’head, formatta tutte le pagine che lo richiamano, evita di riscrivere più volte le stesse regole, permette di variare i valori per la responsività.
Potentissimo, ma è una richiesta al server.
<link rel="stylesheet" type="text/css" href="nomefile.css">
Il codice va scritto in un file apposito, nomefile.css
Interno: che è il migliore per il SEO perché non c’è richiesta al server, ma va scritto su ogni pagina, quindi ci sarà più lavoro da fare, va nell’head, formatta la pagina in cui si trova.
Va normalmente messo 1 sola volta.
<style type=”text/css”>Regole CSS</style>
In linea: va nel body, formatta il testo di uno o più tag della pagina che lo richiama.
<span style=”Regole CSS”>testo</span> (in caso manchi un tag d’appoggio) o <nometag style=”Regole CSS”>testo</nometag>.
La dichiarazione di una regola CSS è formata da un selettore (detto di tipo per differenziarli da quelli di classe che vedremo dopo) e dalle proprietà con il relativo valore:
selettore{proprietà:valore;proprietà:valore}
selettore: elemento html da formattare
proprietà: tipo di formattazione da applicare con un certo valore.
p{color:pink;font-family:Arial}
All’interno delle graffe sono inutili spazi e punto e virgola finale (ogni spazio e ; occupa 1 byte in memoria).

Come affiancare due div con i CSS

Per affiancare due div con i CSS è necessario prima costruire una struttura HTML.
Vediamo un esempio...
<div id="contenitore">
<div class="box1">
<h1>Titolo della colonna 1</h1>
      <p>Il contenuto della prima colonna.</p>
   </div>
   <div class=”box2”>
      <h1>Titolo della colonna 2</h1>
      <p>Il contenuto della seconda colonna.</p>
   </div>
</div>
Ora non ci resta che formattare la struttura creata in precedenza con delle regole CSS. Vediamo come…
<style type="text/css">
#contenitore{width:90%;border:1px solid red;margin: auto}
.box1{width:45%;box-sizing: border-box; border:1px solid pink;float: left;margin-right: 5%}
.box2{width:45%;box-sizing: border-box; border:1px solid pink;float: left;margin-left: 5%}
</style>
Formattare il testo con i CSS.
Per formattare il testo con i CSS, scegliere un font da dare al body è una delle prime cose da fare.
Vediamo come…
body{ font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";font-size:12px}
Bisogna sapere che esiste una differenza tra i font-family sans-serif (senza grazie) e serif (con le grazie).
Il font senza grazie è più leggibile da parte dell’utente, aspetto da non sottovalutare per quanto riguarda l’usabilità e l’accessibilità del sito.