Ripasso elementi di HTML e stili CSS fondamentali

Spiegazione del Codice HTML e CSS

Questo esempio mostra una pagina web completa con elementi HTML e stili CSS. Analizziamo insieme ogni parte.

Struttura HTML

Intestazione della pagina

<html>
    <head>
        <title> La nostra pagina in HTML </title>
        <link rel="stylesheet" href="./css/style.css">
    </head>

• Il tag <html> racchiude tutto il contenuto della pagina
• Nella sezione <head> troviamo:
  • Il titolo che appare nella scheda del browser
  • Il collegamento al file CSS esterno che contiene gli stili

Liste ordinate e non ordinate

Lista ordinata con numerazione romana:

<ol start="5" type="I">
    <li>Latte</li>
    <li>Pane</li>
    <li>Pasta</li>
</ol>

• <ol> crea una lista numerata
• start="5" fa iniziare la numerazione dal numero 5
• type="I" usa numeri romani maiuscoli (V, VI, VII)

Lista non ordinata:

<ul>
    <li>Fagioli</li>
    <li>Spinaci</li>
    <li>Fish & Crock</li>
</ul>

• <ul> crea una lista con punti elenco
• Ogni elemento <li> rappresenta una voce della lista

Tabella

<table>
    <tr>
        <td colspan="2">Latte</td>
    </tr>
    <tr>
        <td>Pane</td>
        <td>Pasta</td>
    </tr>
</table>

• <table> crea una tabella
• <tr> definisce le righe
• <td> definisce le celle
• colspan="2" fa sì che la cella "Latte" occupi due colonne

Elementi di input

<input type="date">
<textarea rows="50" cols="200"></textarea>
<button>Cliccami</button>

• Campo per inserire una data
• Area di testo grande (50 righe, 200 colonne)
• Pulsante cliccabile

Paragrafo con classi CSS

<p class="coloraRosso coloraBlue">
    Lorem ipsum dolor sit amet...
</p>

Questo paragrafo ha due classi CSS applicate contemporaneamente. Se le due classi definiscono la stessa proprietà, vince quella che nel foglio di stile è dichiarata per ultima (a parità di specificità), indipendentemente dall'ordine in cui le classi sono scritte nell'attributo class dell'HTML.

ESEMPIO:

.coloraRosso {
    color: red;
}

.coloraBlue {
    color: blue;
}

In questo caso il testo risulterà blu, perché .coloraBlue è definita dopo .coloraRosso nel CSS, anche se nell'HTML coloraRosso è scritta per prima nell'attributo class.

Se invece le proprietà sono diverse (es. color in una classe e background-color nell'altra), non c'è conflitto: vengono applicate entrambe.

Stili CSS

Stile per tutti i paragrafi

p {
    background-color: green;
    color: white;
}

Tutti i tag <p> avranno sfondo verde e testo bianco.

Classi CSS

Classe "coloraRosso":

.coloraRosso {
    color: red;
    border: 2px dashed yellow;
}

• Testo rosso
• Bordo tratteggiato giallo di 2 pixel

Classe "coloraBlue":

.coloraBlue {
    color: black;
    border: 2px dashed lightblue;
    background-color: whitesmoke;
    padding: 5px 50px;
    margin: 20px;
}

• Testo nero
• Bordo tratteggiato azzurro
• Sfondo grigio chiaro
• Spaziatura interna: 5px sopra/sotto, 50px destra/sinistra
• Margine esterno di 20px

Risultato finale del paragrafo

Il paragrafo con entrambe le classi avrà:

• Testo nero (dalla classe coloraBlue che sovrascrive il rosso)
• Sfondo grigio chiaro (da coloraBlue, che sovrascrive il verde del tag p)
• Bordo azzurro tratteggiato (da coloraBlue, che sovrascrive quello giallo)
• Spaziatura e margini (da coloraBlue)

Questo esempio dimostra come le regole CSS si combinano e come alcune proprietà possano sovrascriverne altre in base alla specificità e all'ordine di applicazione.

<html>
    <head>
        <title> La nostra pagina in HTML </title>
        <link rel="stylesheet" href="./css/style.css">
    </head>
    <body>

        <ol start="5" type="I"> <!-- attributi sono sempre chiave=valore -->
            <li>Latte</li>
            <li>Pane</li>
            <li>Pasta</li>
        </ol>

        <ul>
            <li>Fagioli</li>
            <li>Spinaci</li>
            <li>Fish & Crock</li>
        </ul>

        <table>
            <tr>
                <td colspan="2">Latte</td>
            </tr>
            <tr>
                <td>Pane</td>
                <td>Pasta</td>
            </tr>
        </table>

        <input type="date">
        <textarea rows="50" cols="200"></textarea>
        <button>Cliccami</button>

        <p class="coloraRosso coloraBlue">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ea eaque ex exercitationem eligendi sed! Enim eligendi hic quaerat sint! Error sequi deserunt a iste dignissimos excepturi. Odio id deserunt et?
        </p>

    </body>
</html>

File CSS

p {
    background-color: green;
    color: white;
}

.coloraRosso {
    color: red;
    border: 2px dashed yellow;
}

.coloraBlue {
    color: black;
    border: 2px dashed lightblue;
    background-color: whitesmoke;
    padding: 5px 50px;
    margin: 20px;
}