1. Tag <style>
Se un elemento HTML ha troppi stili, puoi spostarli in un elemento speciale — tag style. Generalmente viene posizionato nel tag <head> ed è fatto così:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Esempio CSS</title>
<style>
body {
background-color: lightgray;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>Questo è un esempio di utilizzo degli stili nel tag <style>.</p>
</body>
</html>
Ora non è necessario scrivere una lunga stringa di stili per il tag <body> all'interno del suo attributo style, ma puoi spostarli nel tag style. È molto comodo.
Lo stesso vale per il tag <p> (paragrafo). Inoltre, lo stile descritto nel tag <style> dentro il <head> sarà applicato a tutti i paragrafi del documento, anche se ce ne sono migliaia. Tutto ciò accade perché nel tag <style> gli stili sono descritti all'interno dei selettori.
5.2 Selettori
I selettori sono un modo per selezionare elementi HTML a cui saranno applicate le proprietà CSS. Esistono diversi tipi di selettori:
Selettore di tag
Applica uno stile a tutti gli elementi di un tipo specifico. Devi solo indicare il nome del tag e le parentesi graffe dopo di esso.
tagname {
// stili
}
tagname può essere qualsiasi: body, image, a, p, … qualsiasi
Selettore di classe
Puoi anche associare le proprietà CSS non a un tag specifico, ma semplicemente dare un nome a un gruppo di proprietà CSS. Tale gruppo in CSS è chiamato classe. Questo stile è applicato a tutti gli elementi con una determinata classe. Le classi sono definite con l'attributo class in HTML.
</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<style>
p.important {
font-weight: bold;
}
</style>
</head>
<body>
<p class="important">Questo è un testo importante.</p>
<p>Questo è un testo normale.</p>
</body>
</html>
Nell'esempio sopra, solo il testo del primo paragrafo a cui è stato applicato lo stile/classe «important» sarà in grassetto. Il secondo paragrafo non avrà tale stile.
Quando descrivi gli stili nel tag <style>, puoi definirli in 3 modi:
- tagname { …}
- tagname.classname { …}
- .classname { …}
Esploreremo il tema dei selettori più approfonditamente quando studieremo CSS. Al momento, ve ne sto parlando perché negli esempi HTML incontreremo CSS e io spesso sposterò il CSS nel tag style e utilizzerò i selettori per assegnare uno stile a un determinato elemento HTML.
GO TO FULL VERSION