CSS – Sintassi
CSS interno
Per CSS interno si intende un’insieme di regole scritte direttamente nella pagina HTML che le utilizzerà per scriverle dovranno essere racchiuse dai tag <style> e </style> e all’interno del tag <head>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Interno</title>
<style>
h1{
color:rebeccapurple;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
p{
font-family: 'Courier New', Courier, monospace;
}
</style>
</head>
<body>
<h1> CSS INTERNO </h1>
Stile interno alla pagina web
</body>
</html>
Se il nostro documento web ha solo una pagina con una formattazione semplice e con poche regole potrebbe valere la pena di utilizzare un CSS interno, sebbene le best practices per i fogli di stile consigliano di organizzare le regole in fogli esterni.
CSS inline
Per CSS inline si intende un’insieme di regole scritte direttamente nel tag che si vuole formattare grazie all’attributo style
<h1 style="color:brown;">CSS Inline</h1>
<p style="font-family:'Courier New', Courier, monospace;">
Le regole sono scritte direttamente nel tag
</p>
Questo tipo di CSS è da utilizzare raramente in siti composti da poche pagine e sconsigliato in generale perché difficile da manutenere e poco leggibile.
CSS esterno
Per CSS esterno si intende un’insieme di regole scritte in uno o più files esterni e richiamati nella pagina web che le vuole utilizzare grazie al tag <link> e inserendolo all’interno del tag <head>
file style.css
h1{
color:darkolivegreen;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
p{
color:gray;
font-family: 'Courier New', Courier, monospace;
}
file esterno.html che implementa il foglio di stile esterno
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Esterno</title>
<link href="css/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h1>CSS esterno</h1>
<p>
Le regole sono in files esterni
</p>
</body>
</html>
Questo tipo di implementazione dei fogli di stile è quella che raccomando, in quanto ci permette di mantenere il giusto ordine tra la dichiarazione degli elementi con l’HTML e la loro formattazione con il CSS.
I selettori
Il CSS presenta differenti tipi di selettori per creare regole specifiche di formattazione, di seguito la differenti sintassi
| universal selector | regole applicate a tutti gli elementi del documento | *{}tutti gli elementi della pagina |
| type selector | regole applicate agli elementi di quel tipo | p,h1 {}tag p e h1 |
| class selector | regole applicate agli elementi con quella specifica classe | .comments{}elemento con class=”comments” |
| id selector | regole applicate all’ elemento con quello specifico id | #email{}elemento con id=”email” |
| child selector | regole applicate a un elemento che è direttamente figlio di un altro | table>a{} |
Esempio selector.css
*{
font-family: Arial,sans-serif;
}
h1,h2{
color:brown;
font-family: 'Courier New', Courier, monospace;
}
#comment{
font-family: 'Times New Roman', Times, serif;
font-size: large;
}
.note{
color:gray;
}
td>a{
background-color:aqua;
}
file selector.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Selectors CSS</title>
<link href="css/selector.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<h1>I tipi di selettore</h1>
<p>Esistono diversi tipi di selettore</p>
<p id="comment">Quello con id si riferisce ad uno specifico elemento</p>
<div class="note">Quelli che utilizzano le classi possono essere usate su diversi elementi come un tag div</div>
<p class="note">o un tag p</p>
<table>
<tr>
<td><a href="https://www.spacecoding.it">Spacecoding.it</a></td>
</tr>
</table>
<a href="https://www.google.com">Cerca qualche regola CSS</a>
</body>
</html>
Frameworks
I frameworks sono librerie di codice che velocizzano lo sviluppo del software. I framework per la programmazione web mettono a disposizione classi CSS per la tipografia, per le varie componenti dell’interfaccia, come moduli, pulsanti, navigazione etc.
Una delle funzionalità che li accomuna è la capacità grazie al CSS di rendere responsive le nostre pagine. Di seguito una lista dei framework più utilizzati :
