CSS, o Cascading Style Sheets, è un linguaggio di progettazione che viene utilizzato dagli sviluppatori web per creare un aspetto uniforme e visivamente piacevole su diverse pagine di un sito web. L'HTML determina in gran parte il contenuto testuale, ma CSS determina la struttura visiva, la layout e l'estetica del sito Web.

La personalizzazione CSS è consigliata solo se si dispone di conoscenze avanzate di CSS. L'assistenza clienti non sarà in grado di aiutarti quando implementi il tuo codice in Brandguide.

Il codice verrà disinfettato nel tentativo di prevenire attacchi XSS. Tieni presente che i nostri sviluppatori possono apportare modifiche al nostro codice Brandguide in qualsiasi momento che potrebbero avere un impatto su CSS e HTML.

Sintassi CSS

La sintassi CSS è costituita da un insieme di regole. Queste regole sono composte da 3 parti: un selettore, una proprietà e un valore.

Selector { property: value; }

Il selettore rappresenta l'elemento HTML a cui applicare uno stile. La proprietà fa riferimento a un aspetto specifico dell'elemento HTML, ad esempio il colore, la famiglia di caratteri o il margine. Ogni proprietà utilizzata in CSS ha un insieme di valori accettati, ad esempio un codice esadecimale o un valore pixel.

Il selettore può avere più proprietà e coppie di valori separate da punti e virgola. Ad esempio, i valori specificati delle proprietà verranno applicati di seguito a tutti i tag h1:

h1 { font-family: comic sans; font-size: 12px; colore: blu; }

Selettori CSS comuni

Selettore del tipo CSS

Il selettore del tipo CSS seleziona tutti gli elementi di un tipo specifico all'interno della pagina web.

Ecco alcuni esempi di selettori di tipo comuni:

• p: seleziona tutti i tag di paragrafo.
• a: Seleziona tutti i collegamenti ipertestuali.
• h1: Seleziona tutti i tag di intestazione h1.
• span: seleziona tutti i tag span.
• body: seleziona tutti gli elementi all'interno del corpo della pagina web.
• pulsante: seleziona tutti i pulsanti sulla pagina web.
• li: seleziona tutte le voci dell'elenco.

Selettore di classi CSS

Una classe CSS è un attributo utilizzato per definire un gruppo di elementi HTML. Ciò consente di personalizzare più elementi utilizzando un unico selettore. Possiamo farlo digitando un punto (.) davanti al nome della classe nel nostro CSS. Ad esempio, per modificare il tipo di carattere dell'intestazione e del paragrafo di esempio di seguito:

header 
paragrafo

Utilizzeremo il seguente CSS per indirizzare tutti gli elementi con una classe di i-am-a-class:

.i-am-a-class { font-family: helvetica; }

Selettore ID CSS

Un ID CSS è un attributo utilizzato per definire un singolo elemento univoco in una pagina web. Per selezionare un elemento con un ID specifico, digita un simbolo hash (#) davanti all'ID. Ad esempio, per modificare il carattere del paragrafo seguente:

paragrafo

Utilizzeremmo il seguente CSS per indirizzare solo l'elemento con un id di i-am-an-id:

#i-am-an-id { font-family: helvetica; }

Proprietà CSS

Proprietà del testo

• font-family: imposta il carattere di testo, ad esempio "Arial" o "Times"
• font-size: imposta la dimensione del carattere, ad esempio 5px o 1em
• font-weight: imposta lo spessore del carattere o "grassetto", ad esempio "grassetto" o 200
• colore: imposta il colore del testo, ad esempio blu, #add8e6 o rgb (135.206.250)
• altezza della linea: spazio verticale tra le righe, ad esempio 5px o 1em
• spaziatura tra le lettere: spazio tra i caratteri, ad esempio 5px o 1em
• spaziatura tra le parole: spazio tra le parole,ad esempio 5px o 1em

Proprietà dello sfondo

• background-color: imposta il colore di sfondo dell'elemento, ad esempio blu, #add8e6 o rgb (135.206.250)
• background-image: imposta un'immagine di sfondo basata sull'URL, ad esempio url('sample-image.jpg')
• background-position: imposta la posizione iniziale di un'immagine di sfondo,ad esempio al centro o al 50%

Proprietà di spaziatura

Le seguenti proprietà accettano auto, inherit, % o qualsiasi unità di lunghezza CSS

• height: imposta l'altezza dell'elemento
• width: imposta la larghezza dell'elemento
• padding: imposta lo spazio di riempimento dell'elemento
• margin: imposta lo spazio del margine dell'elemento

Lunghezze e unità

• px: pixel (1px = 1/96 di 1 pollice)
• em: relativo alla dimensione del carattere dell'elemento (3em = 3 volte la dimensione del carattere corrente)
• vw: relativo all'1% della larghezza del riquadro di visualizzazione
• vh: relativo all'1% dell'altezza del riquadro di visualizzazione
• %: Rispetto all'elemento padre

Ricerca di elementi utilizzando Chrome DevTools

Chrome DevTools è un insieme di strumenti per sviluppatori web integrati direttamente nel browser Google Chrome. Possiamo utilizzare questi strumenti per individuare rapidamente elementi HTML e stili CSS esistenti su qualsiasi sito web.

1. Per accedere a DevTools, puoi fare clic con il pulsante destro del mouse sulla pagina e selezionare Ispeziona o utilizzare comandi brevi come Comando + Opzione + C (Mac) o Control + Maiusc + C (Windows, Linux, Chrome OS).

2. Una volta aperto il pannello DevTools, seleziona lo strumento Ispeziona nella parte superiore della pagina.

3. È quindi possibile fare clic sull'elemento della pagina a cui si desidera applicare lo stile. I selettori che possono essere utilizzati per personalizzare questo elemento verranno evidenziati nella scheda Elementi. La scheda Stili sotto di esso rivelerà le regole di stile CSS attualmente applicate a quell'elemento.

4. In questo esempio, cambieremo il colore del collegamento di navigazione in #6b646b utilizzando la classe nav-link trovata utilizzando la finestra di ispezione DevTools. Aggiungeremo anche la proprietà "!important" alla fine della dichiarazione per sovrascrivere tutti gli stili precedenti per tale proprietà sull'elemento.

5. Una volta che il CSS è stato aggiornato e le modifiche sono state salvate, vedrai che il colore del testo di navigazione è cambiato in #6b646b:

Aggiunta di font di terze parti

@font-face è una regola CSS che ti consente di importare e utilizzare font di terze parti sulla tua Brandguide. Ti consigliamo di aggiungere il font tramite CSS a livello di impostazione globale (anziché a livello di blocco).

Puoi aggiungere un font di terze parti in due modi.

Copiare e incollare un URL

La prima opzione è navigare nella libreria di font scelta e selezionare il font che si desidera aggiungere alla Brandguide e copiare e incollare l'url. Questo processo è descritto di seguito.

Sintassi:

Puoi copiare la sintassi seguente e aggiungerla alla sezione CSS personalizzato della tua Brandguide. Questo è l'unico CSS necessario per importare il carattere. Per importare un font diverso, è sufficiente modificare la famiglia di font, l'URL di origine e il formato del font scelto.

@font-face { font-family: 'Satisfy'; src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2'); }

Trovare l'URL e il formato del carattere:

1. Vai alla libreria di font che preferisci e seleziona il font che desideri aggiungere alla tua Brandguide. Nel nostro caso, selezioneremo Soddisfa da Google Fonts.

2. Una volta selezionato, copia e incolla l'URL @import in una nuova scheda del browser.

3. Questo ti porterà a una pagina contenente l'URL e il formato necessari per importare il carattere nella tua Brandguide.

4. Copia l'URL src e incollalo nel codice @fontface e nella famiglia di caratteri. Quindi incolla il codice nella casella CSS. Le modifiche verranno aggiornate automaticamente.

5. Seleziona Aggiorna CSS per salvare le modifiche.

6. Il font appena importato viene compilato nel menu a discesa Carattere predefinito, nel riquadro a comparsa Impostazioni globali.

Conversione del carattere in formato WOFF o WOFF2

La seconda opzione di carattere tipografico personalizzato è quella di convertire il carattere in un formato woff o woff2. Questo formato di font web è più compatibile per i browser rispetto ai formati di file di testo ttf/otf. Questo processo è descritto di seguito.

Tipi di carattere proprietari

1. Convertire il carattere in un formato woff o woff2. Questo formato di font web è più compatibile per i browser rispetto ai formati di file di testo ttf/otf. 

2. Carica il font in una sezione di file all'interno di Brandfolder.

3. Apri il asset, vai alla scheda di incorporamento e seleziona Copia link.

4. Vai al riquadro a comparsa Impostazioni globali. Puoi copiare la sintassi riportata di seguito e aggiungerla alla sezione CSS del riquadro a comparsa Impostazioni globali. Questo è l'unico CSS necessario per importare il carattere. Per importare un font diverso, è sufficiente modificare la famiglia di font, l'URL di origine e il formato del font scelto. Una volta inserita la sintassi, le modifiche verranno salvate.

@font-face { font-family: 'boldweb'; src: url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff'); }

5. I font importati in questo modo non mostreranno il font nell'elenco a discesa Carattere predefinito. È invece necessario applicare manualmente il font all'interno della sezione CSS. Di seguito è riportato un esempio di applicazione del tipo di carattere Web Grassetto ai tag di paragrafo importati.

p { font-family: 'boldweb'; colore: #333; }

Aggiunta di video

Puoi aggiungere un video alla tua Brandguide seguendo questi passaggi:

1. Apri la modalità asset per il video.
2. Vai alla scheda Incorpora. 
3. Individua il codice di incorporamento del video e seleziona Copia link. 
4. Incolla il codice nel blocco HTML.