Se un web designer e hai iniziato da poco ad utilizzare CSS come linguaggio di programmazione per la creazione dei tuoi siti web, potresti trovare difficile comprendere come utilizzare le classi correttamente. Con questa guida voglio aiutarti ad apprendere l’uso corretto del CSS, dandoti alcuni consigli pratici.
10 Classi di stile CSS#
1 Flex-Container#
La classe .flex-container viene usata per creare contenitori flessibili, permettendo al contenuto di essere disposto in righe o colonne.
Utilizzato principalmente per rendere le pagine dinamiche e responsive.
2 Border#
La classe border viene utilizzata per aggiungere un bordo a un elemento HTML, consentendo di definire lo stile, il colore e lo spessore del bordo. Questo è utile per evidenziare o delimitare visivamente determinati elementi all’interno di una pagina web.
3 Padding#
La classe padding è utilizzata per aggiungere spaziatura interna agli elementi HTML, consentendo di definire l’area di riempimento tra il contenuto dell’elemento e il suo bordo. Questo è utile per migliorare la leggibilità e l’aspetto visivo degli elementi.
4 Margin#
La classe margin viene utilizzata per aggiungere spaziatura esterna agli elementi HTML, consentendo di definire lo spazio tra l’elemento corrente e gli altri elementi circostanti.
5 Column#
Column viene utilizzata per definire colonne. Questo permette di distribuire il contenuto in modo uniforme o in base a proporzioni specifiche all’interno di una riga o di un contenitore.
6 Center-content#
Center-content è utilizzata per centrare verticalmente e orizzontalmente il contenuto all’interno di un elemento, garantendo che sia al centro dello spazio disponibile. Questa classe viene utilizzata per posizionare elementi come immagini, testo o pulsanti al centro di una pagina o di un contenitore.
7 Text-Center#
Text-center è utilizzata per centrare il testo. Migliora la leggibilità e l’estetica del testo all’interno di una pagina web.
8 Background-Color#
Background-color viene utilizzata per definire il colore di sfondo, consentendo di personalizzare l’aspetto visivo della pagina web o di specifici elementi all’interno di essa.
9 Width#
La proprietà width è utilizzata per definire la larghezza di un elemento HTML. Questa proprietà consente di controllare le dimensioni degli elementi della pagina web, garantendo che si adattino correttamente al layout e alla disposizione della pagina.
10 Height#
La proprietà height è utilizzata per definire l’altezza di un elemento HTML. Questa proprietà consente di controllare le dimensioni verticali degli elementi della pagina web.
Creiamo un Layout flessibile#
Per mettere in pratica tutto ciò che abbiamo visto, passeremo alla pratica creando un semplice layout flessibile con una colonna contenuto al centro della pagina.
Cosa utilizzeremo:
- Margin
- Padding
- Colori per lo sfondo
- Altezza e larghezza del contenuto
Struttura HTML#
Per prima cosa creiamo la nostra struttura HTML per implementare un container. Diamo prima un titolo al nostro documento:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FlexBox Container</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flex-container center-content">
<div class="column text-center">
<h1>My Awasome FlexBox</h1>
<p>Questo è un semplice progetto.</p>
</div>
</div>
</body>
</html>
Abbiamo creato un semplice HTML con un div principale che fungerà da contenitore flessibile.
<div class="flex-container center-content">
All’interno è presente un ulteriore div che servirà per creare una colonna di contenuti all’interno del contenitore pricipale.
<div class="column text-center">
Style con CSS#
Ora che abbiamo creato il nostro contenuto in HTML, non ci resta che personalizzare la parte grafica.
/* Impostazione della pagina */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* Utilizzo Classi CSS per altezza e per centrare il contenuto */
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
.column {
display: flex;
flex-direction: column;
}
.center-content {
justify-content: center;
align-items: center;
}
.text-center {
text-align: center;
}
/* Personalizzazione del contenuto */
h1 {
margin-bottom: 20px;
}
p {
margin-bottom: 40px;
}
Le classi center-content, hanno la funzione di centrare il contenuto sia verticalmente che orizzontalmente.
text-center occorre invece per centrare il testo.
Si è definito le larghezze e altezze dei contenitori per adattarsi alla finestra del browser utilizzando height: 100vh.
.flex-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
Per concludere, nell’ultima parte del codice, è stato aggiunto lo stile al testo ed aggiunta della spaziatura interna ai paragrafi.
Come memorizzare le proprietà CSS#
Memorizzare classi e prorietà CSS risulta macchinoso, come abbiamo già visto. La pratica è l’approccio giusto da utilizzare. Continua a fare pratica, a creare piccoli progetti e vedrai che iniziarai a prendere dimestichezza. Online esistono molti siti web dove potrai praticare le tue skills partecipando a challange mensili o settimanali.
Prendi appunti#
E’ importante prendere appunti mentre si sta studiando. Ti aiuta a memorizzare meglio le classi e proprietà che hai imparato ad utilizzare. E’ utile anche per capire in quale sezioni sei più carente.
Puoi utilizzare risorse online come aNotepad per avere i tuoi appunti sempre con te.
Utilizza risorse online#
Cercare informazioni su internet è un buon sistema e spesso lo dovrai utilizzare. Impara fin da subito a cercare le giuste informazioni per i problemi che stai riscontrando. StackOverflow è una ottima piattaforma.
Crea progetti personali#
Questo approccio ti consente di apllicare ciò che hai appreso in maniera progressiva. Ti aiuterà a fare sempre di più e sempre meglio. Ti permetterà inoltre di concentrarti su aree specifiche che vuoi migliorare.
Crea un Portfolio personale#
Creare il tuo primo portfolio personale può essere una piccola sfida per iniziare ad usare ed imparare sempre più proprietà CSS. Un portfolio online è utile per mostrare i tuoi progetti, le tue competenze, collegare i tuoi profili social e incontrare potenziali datori di lavoro.
Potrai collegare ai tuoi social quindi il tuo portfolio personale se vuoi intraprendere questa carriera.
Domande Frequenti#
Come posso iniziare ad imparare da zero?
Il modo migliore per imparare è utilizzando qualche corso online. Su youtube ne trovi molti davvero validi. Ti consiglio di utilizzare FreeCodeCamp Youtube Channel.
Come posso risolvere i problemi che potrei incontrare?
Quando hai qualche problema, utilizza sempre forum online come Stack Overflow, W3 School. Troverai molti utenti in cerca di aiuto per gli stessi tuoi quesiti.
Quali risorse utilizzare per approfondire la mia conoscenza in CSS?
Consulta siti web come MDN Web Docs per tutorial dedicati e notizie sullo sviluppo web. CSS-tricks ad esempio ti permette di creare oggetti unici utilizzando CSS.