Coco Chanel una volta disse: "La moda cambia, ma lo stile resta".
Mentre Coco parlava principalmente dei vestiti che appendiamo nei nostri armadi, direi anche che lo stile è più di una semplice moda.
Ad esempio, hai mai visitato un sito web e pensato: "accidenti, questo è un bel sito web"? È probabile che quel sito web elegante sia stato creato grazie al CSS.
Cos'è il CSS?
CSS sta per Cascading Style Sheets e descrive come gli elementi HTML devono essere visualizzati sullo schermo poiché controlla il layout di varie pagine web contemporaneamente.
Potresti sentire che CSS e la programmazione possono essere scoraggianti, specialmente mentre affronti la costruzione di siti web in generale. Credimi, lo pensavo anch'io a un certo punto. Continua a leggere e scommetto che sarai pronto ad aggiungere un serio stile al tuo sito web prima di quanto pensi.
Interessato a imparare qualcosa di specifico sul CSS? Salta avanti a:
Cos'è il CSS?
Per capire cos'è il CSS, è meglio spiegare come CSS e HTML vengono usati insieme. HTML è stato creato per descrivere il contenuto delle pagine web, come i titoli e i paragrafi, e permettere l'incorporamento di immagini e video. D'altra parte, il CSS specifica lo stile del documento, che include layout delle pagine, colori e font.
Se pensi al tuo sito web come a una casa che stai costruendo, l'HTML è il cartongesso e il CSS è la vernice brillante e vivida che usi sulle pareti per aggiungere un po' di flair.
Come funziona il CSS?
Il CSS interagisce con gli elementi HTML sulle pagine web per farli apparire in un certo modo. Ad esempio, se vuoi rendere un paragrafo in grassetto e di colore viola, lo scriveresti così:
p {color:purple; font-weight:bold;}
La p in questo caso si allineerà con il codice HTML <p> e lo cambierà in modo che appaia in grassetto e viola.
Come l'HTML, il CSS è scritto in testo semplice, in un editor di testo o in un documento di testo su un computer. Puoi aggiungere questo codice alle tue pagine HTML usando CSS esterno, interno o inline.
Esterno
Il CSS esterno è salvato come file .css e può essere usato per determinare l'aspetto dell'intero sito web con un solo file. Per usarlo, i tuoi file .html devono includere una sezione di intestazione che si collega al foglio esterno. Sembrerebbe così:
<head>
<link rel=”stylesheet” type=”text/css” href=thestyleofmysite.css”>
</head>
In questo caso, thestyleofmysite.css è il foglio di stile esterno. Esterno è il metodo efficiente per implementare il CSS su un sito web, inoltre è facile da tenere traccia e implementare lo stile.
Interno
Interno sono istruzioni CSS scritte direttamente nell'intestazione della pagina .html. Vuoi seguire questa strada se una pagina del tuo sito web avrà un aspetto unico separato dal resto del tuo sito.
<head>
<style>
body {background-color:orange;}
p {font-size:24px; color:white;}
</style>
</head>
Questa pagina avrà uno sfondo arancione con paragrafi di dimensioni 24 punti e font bianco.
Inline
Quando usi inline, frammenti di CSS sono scritti direttamente nel codice HTML e applicati solo a una singola riga di codice.
<h2 style=”font-size:22px;color:green;”>Questo è un titolo.</h2>
Questa riga di codice rende un titolo specifico su una pagina .html verde e in font di 22 punti.
| Correlato: Dai un'occhiata a questi consigli di programmazione per principianti! |
Vuoi saperne di più su Software per la creazione di siti web? Esplora i prodotti Costruttore di siti web.
Sintassi CSS
Il codice effettivo del CSS è chiamato Sintassi CSS, e consiste in un insieme di regole composto da un selettore e un blocco di dichiarazione.
Un selettore punta all'elemento HTML che vuoi stilizzare. Nell'esempio sopra è l'h1.
Il blocco di dichiarazione contiene una o più dichiarazioni che sono separate da punti e virgola. All'interno del blocco ci sono una proprietà e un valore separati da due punti. Questi blocchi sono circondati da parentesi graffe.
Una proprietà è ciò che dettaglia i cambiamenti come la dimensione del font o il colore. Il valore è l'impostazione per la proprietà, quindi la dimensione e il colore specifici del font.
La sintassi CSS sopra imposterà il tuo titolo H1 per essere di colore rosso e di dimensione 14 font.
Ci sono anche sintassi chiamate selettori di gruppo. Useresti un selettore di gruppo quando hai più elementi che vuoi abbiano lo stesso stile. Quindi, se vuoi che tutti i tuoi titoli dopo il tuo H1 siano centrati, blu e di dimensione font 12 punti, useresti un selettore di gruppo che sembra così:
h2, h3, h4 {text-align:center; color:blue; font-size:12px;}
Proprietà CSS comuni
C'è una lunga lista di proprietà CSS che puoi usare per aggiungere un po' di flair alle pagine web. Di seguito sono riportate le proprietà CSS comuni che ti troverai a usare ripetutamente.
Aggiungi un po' di stile con il CSS
Assicurati che il tuo sito web non sia per niente basilare quando aggiungi il CSS alla sua formattazione. Dal cambiare il colore del font all'aggiungere un bordo, puoi far risaltare la tua pagina web dalla massa quando utilizzi il CSS. Non aver paura di rimboccarti le maniche e tuffarti per vedere di cosa parlava Coco Chanel.
Ora che hai risposto a qualche domanda sul CSS, rispondi ad altre domande che hai in mente sulla costruzione di siti web, come cos'è JavaScript e perché dovresti imparare a programmare.
Mara Calvello
Mara Calvello is a Content and Communications Manager at G2. She received her Bachelor of Arts degree from Elmhurst College (now Elmhurst University). Mara writes content highlighting G2 newsroom events and customer marketing case studies, while also focusing on social media and communications for G2. She previously wrote content to support our G2 Tea newsletter, as well as categories on artificial intelligence, natural language understanding (NLU), AI code generation, synthetic data, and more. In her spare time, she's out exploring with her rescue dog Zeke or enjoying a good book.
