Guida base al CSS

Abbiamo impostato le dichiarazioni principali della pagina, adesso andiamo ad impostare il CSS.
Ricordati di seguire e di copiare tutti i codici in ordine, se sei arrivato qui in un altro modo, ti consiglio di ritornare alla pagina iniziale della spiegazione di questo template in HTML e CSS per scoprire come si fa un layout responsive a tre colonne con header e footer per il tuo sito. Vai qui

Iniziamo ad impostare lo stile e ad impostare delle proprietà:

<style>

* {box-sizing: border-box;}
body {margin: 0;}

L'asterisco garantisce che tutti gli elementi siano sempre dimensionati nel modo specificato.
Quando imposti box-sizing su border-box; il padding e i bordi di quell'elemento non aumenteranno più la sua larghezza.

Impostiamo lo stile dell'header

.header {
    background-color: #f1f1f1;
    padding: 50px;
    text-align: center;
}

All' header assegnamo uno sfondo che puoi cambiare a tua scelta, un padding e impostiamo che il testo in esso contenuto abbia un allineamento centrale.
Ora impostiamo le colonne lo stile delle colonne

.column {
    float: left;
    width: 33.33%;
    padding: 10px;
   
}

La proprietà float serve per traslare dal flusso normale della pagina un elemento che verrà disposto, in questo caso, a sinistra, lasciando che gli elementi adiacenti vengano a fluttuare attorno al suo lato libero, per seguire e disporsi sotto. Width indica la grandezza in percentuale della colonna. Siccome sono tre, considerando 100% tutto lo spazio disponibile, diviso per tre otteniamo 33,3 % : tutte le colonne avranno la stessa dimensione. Infine impostiamo il padding a 10px, puoi cambiarlo a tuo piacere.