Implementazione CSS

CSS in linea

Per iniziare, vediamo come definire uno stile in linea con l'elemento.

<p style="color: aquamarine;">Questo è un paragrafo colorato.</p>

Questo è un paragrafo colorato.

Come si capisce dall'esempio, basta aggiungere nel tag di apertura l'attributo "style" per poi inserire tra le virgolette tutte le proprietà del caso.

CSS interno

Il secondo metodo di implementazione degli stili, più comodo e "pulito" di quello in linea è l'implementazione interna. All'interno del tag <head>, inseriamo il tag <style> all'interno del quale definiremo gli stili degli elementi. Anche in questo caso, (qui torna la parte "cascading" del CSS), nel momento in cui definisco lo stile del tag <p>, tutti i paragrafi prenderanno quella formattazione, tranne quelli in cui lo stile è specificato in linea. Ecco un esempio di un'implementazione interna di un foglio di stili

<head>
<style>
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
</style>
</head>

CSS esterno

Il metodo più professionale, pulito e soprattutto comodo dei tre è l'implementazione di un CSS esterno.

Cosa significa creare un CSS esterno?

Per creare un foglio css, nella propria directory (cioè nella cartella del computer in cui abbiamo creato anche i file html), creiamo anche un file che chiameremo "styles.css". Dopo aver creato il file, lo linkeremo nell'head in questo modo:

<head>
<link rel="stylesheet" href="styles.css">
</head>

A questo punto, nel file CSS dedicato agli stili possiamo iniziare a scrivere tutte le modifiche del caso, con la stessa formattazione del tag <style> che abbiamo visto poco fa.
Esempio di file CSS:

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

Definizione di elementi specifici

Magari non tutti i paragrafi devono avere la stessa formattazione, o magari ho bisogno di affiancare un testo e un'immagine. In questo caso, entrano in gioco le classi o gli id.

Le classi in HTML

L'attributo "class" viene utilizzato per specificare una classe per un elemento HTML. Più elementi HTML possono condividere la stessa classe.
Per convenzione, spesso le classi vengono applicate ai <div> o gli <span> ma in realtà una classe può valere per ogni tag, dai <p> agli <audio>, dipende dal suo utilizzo.
Esempio di definizione di una classe:

<div class="note">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>

Una volta che abbiamo definito una classe in HTML, possiamo passare alla sua personalizzazione nel foglio CSS. Ad esempio, voglio che tutti gli elementi nella classe "note" abbiano lo sfondo giallo e il testo nero. Per fare ciò, nel foglio CSS inseriamo il nome della classe preceduto da un punto:

.note {
background-color: #ffee00 (I colori in CSS sono definiti in esadecimali)
color: black; (Quando si trova solo "color", vuol dire che si riferisce al colore del testo)
}

Quindi, una volta definito, tutto ciò che fa parte della classe "note" risulterà così:

London is the capital of England.

Differenze tra classi e id

Per eseguire la stessa operazione che abbiamo appena imparato, possiamo non utilizzare per forza la classe ma ci vengono in aiuto anche gli id. I due attributi però hanno un paio di differenze: