Sintassi di base CSS

3.1 Regole (Rules)

Gli elementi base di CSS includono regole (rules), proprietà (properties) e valori (values). Capire la sintassi di base di CSS è la chiave per creare pagine web attraenti e funzionali.

Elementi base di CSS:

• Regole (Rules)
• Selettori (Selectors)
• Proprietà (Properties)
• Valori (Values)

Regole (Rules)

Le regole CSS sono composte da un selettore e un blocco di dichiarazioni. Il selettore indica a quali elementi HTML saranno applicati gli stili, mentre il blocco di dichiarazioni contiene una o più proprietà e i loro valori. Di solito è costituito da una o più proprietà e valori, racchiusi tra parentesi graffe {}.

Esempio:

    
      selettore {
        proprietà: valore;
        proprietà: valore;
      }
    
  

Esempio per un titolo:

    
      h1 {
        color: blue;
        font-size: 24px;
      }
    
  

In questo esempio h1 è il selettore, color e font-size sono le proprietà, e blue e 24px sono i valori di queste proprietà.

3.2 Proprietà e valori

CSS offre un ampio set di proprietà che possono essere utilizzate per gestire l'aspetto degli elementi. Ogni proprietà ha uno o più valori che determinano come tale proprietà verrà applicata.

Principali proprietà e loro valori:

Colore e sfondo:

• color: imposta il colore del testo
• background-color: imposta il colore di sfondo dell'elemento

Esempio:

    
      div {
        color: red;
        background-color: yellow;
      }
    
  

Font:

• font-family: definisce la famiglia di font
• font-size: imposta la dimensione del font
• font-weight: definisce lo spessore del font

Esempio:

    
      h1 {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
      }
    
  

Testo:

• text-align: allinea il testo all'interno dell'elemento
• text-decoration: aggiunge effetti al testo, come la sottolineatura

Esempio:

    
      a {
        text-align: left;
        text-decoration: none;
      }
    
  

Margini e bordi:

• margin: imposta i margini esterni intorno all'elemento
• padding: imposta i margini interni all'interno dell'elemento
• border: definisce il bordo dell'elemento

Esempio:

    
      .container {
        margin: 0 auto;
        padding: 20px;
        border: 2px solid #000000;
      }
    
  

Dimensioni e posizionamento:

• width e height: impostano la larghezza e l'altezza dell'elemento
• position: definisce il modo in cui l'elemento viene posizionato

Esempio:

    
      .box {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 100px;
      }
    
  

Devi:

• ricordare le proprietà standard degli elementi
• ricordare i valori standard di queste proprietà
• ricordare le proprietà uniche di diversi elementi
• ricordare come queste proprietà funzionano nella pratica
• ricordare come queste proprietà influenzano l'una l'altra.

Il modo migliore per farlo è attraverso la pratica - scrivere tanto CSS e vedere come funziona.