Come puoi usare i CSS - Suggerimenti e trucchi per il web design per principianti

Anche tu puoi imparare come utilizzare i CSS per modellare le tue pagine web con questi suggerimenti CSS per principianti.

Non è necessario sapere nulla sul codice del computer. Tutto quello che devi sapere è come copiare e incollare.

Ma prima, cos'è il CSS?

Cascading Style Sheets (CSS) è un codice del linguaggio per fogli di stile che gli sviluppatori di temi utilizzano per descrivere e modificare la presentazione o l'aspetto di un documento HTML.

Cosa fa il CSS?

In termini semplici, il file CSS rende le pagine HTML piacevoli.

Indipendentemente dalla piattaforma di blogging che stai utilizzando, puoi modificare le proprietà CSS per migliorare ulteriormente l'aspetto del tuo blog.

Non importa quale piattaforma di blog utilizzi.

Avrai un'opzione nelle impostazioni del tema per Custom CSS o Additional CSS .

Potresti non aver mai considerato questa opzione.

Oppure, se lo hai fatto, potresti pensare che sia troppo difficile imparare a programmare.

Ma è semplicissimo.

Non so nulla di sviluppo web o sintassi CSS, ma posso modificare un attributo di stile in pochi secondi.

Tutto quello che devi fare è utilizzare il tuo browser web Chrome o Firefox Strumenti per sviluppatori e imparare alcuni semplici trucchi e suggerimenti CSS.

Diamo un'occhiata a quanto è facile.

Perché vorresti imparare a modificare il CSS del tuo blog?

Probabilmente hai molte impostazioni nel tema del tuo blog.

Ma ci sono molti elementi più piccoli che potrebbero mancare.

Anche nei temi premium per WordPress, alcune opzioni non sono disponibili nelle opzioni standard.

È per questo che puoi aiutare il tuo CSS a funzionare meglio apportando le tue modifiche e modifiche.

Modificando un foglio di stile esterno, può fare riferimento a tutte le tue pagine HTML.

Se apporti una modifica alle tue intestazioni HTML su una pagina, cambierà il tag HTML su tutte le tue pagine.

Il riferimento è chiamato pseudo-elemento.

Significa che se cambi l'aspetto della tua intestazione H2, cambieranno tutte le intestazioni H2 sul tuo sito.

Ma non hai bisogno di imparare tutto su queste complicazioni.

Tutto quello che devi sapere è che funziona e che puoi modellare il tuo blog esattamente come vuoi che appaia senza sapere nulla sulla codifica.

Cominciamo con alcuni semplici suggerimenti CSS per principianti.

Come modificare facilmente il tuo CSS in linea

Il primo passo è aprire il tuo blog in Firefox, Chrome o Microsoft Edge.

Negli esempi seguenti, ho utilizzato Firefox. Lo trovo un po 'più facile da usare rispetto a Chrome.

Ma entrambi funzionano in modo simile.

Apri il tuo blog in una nuova scheda o finestra. Puoi navigare fino alla pagina che desideri modificare.

Ora apri Strumenti per sviluppatori, Inspector, dal menu Strumenti in Firefox o dal menu Visualizza in Chrome.

Fare clic su Impostazioni per aprire il riquadro degli strumenti.

Puoi selezionare qualsiasi elemento di stile in linea sulla tua pagina utilizzando la freccia di selezione in alto a sinistra nel riquadro degli strumenti.

Sposta il cursore sulla pagina per selezionare un elemento. Oppure puoi fare clic su singoli elementi nell'elenco.

Vedrai ogni elemento selezionato evidenziato in blu nella visualizzazione del browser della tua pagina web.

Ora sei pronto per apportare modifiche all'aspetto della tua pagina.

Utilizzando il selettore CSS

Nel mio esempio, cambierò l'aspetto dell'elemento del titolo H2.

Puoi scegliere di modificare l'elemento H1, il corpo del testo o una didascalia dell'immagine.

Voglio iniziare cambiando la dimensione del carattere. Tutto quello che devi fare è fare clic sulla dimensione del carattere del tag di stile e modificare il numero.

Ho cambiato la dimensione da 33px fino a 56px. Puoi vedere che la dimensione dell'intestazione è ora più grande.

Non preoccuparti. Non hai cambiato la pagina del tuo blog live. Ciò che vedi nel riquadro del browser è solo un'anteprima delle tue modifiche.

Puoi giocare quanto vuoi con qualsiasi elemento HTML.

Tutto ciò che vedi nel riquadro del browser è solo un'anteprima di come appariranno le tue modifiche a una regola CSS.

Ora voglio cambiare il colore del testo.

Se fai clic sul punto colorato tra il tag del colore e il numero, apri il selettore del colore.

Ora scegli semplicemente il colore che desideri utilizzare.

È semplice cambiare il colore dell'attributo HTML. Qui sono passato dal nero al blu.

Sembra buono, ma l'altezza della linea potrebbe essere migliore. Lo cambierò.

L'impostazione corrente è 1.2, che è troppo spazio tra le righe. Voglio che le linee siano più vicine.

Quindi, lo cambierò in 1.0.

Sembra molto meglio.

Ho apportato tre modifiche all'aspetto della mia intestazione H2 in modalità anteprima. Ho cambiato la dimensione del carattere, il colore e l'interlinea.

Ora è il momento di aggiungere queste modifiche al mio sito live.

Come ottenere il codice per il tuo sito

Devi copiare le righe di codice che hai modificato.

Seleziona e copia tutto il codice. Assicurati di copiare tutte le righe, inclusa l'ultima parentesi.

Ora incollalo in un editor di testo. Puoi utilizzare Blocco note su PC o Editor di testo su Mac.

L'altro cambiamento che abbiamo apportato è stato il colore. Dobbiamo copiare anche questa riga.

Hai solo bisogno di copiare la linea per il colore.

Puoi vedere che l'elemento H2 è in grassetto nell'immagine sopra. Significa che è lo stesso pseudo-elemento del nostro primo codice. Quindi puoi usarli insieme.

Copia la riga.

Ora aggiungi la riga al tuo editor di testo.

Potrebbe essere necessario aggiungere o eliminare alcuni spazi in modo che la linea del colore sia rientrata allo stesso modo.

Ora sei pronto per aggiungere queste tre modifiche al tuo sito live.

Aggiungi il codice al tuo sito

Vai alle opzioni del tuo tema e seleziona le opzioni CSS.

Nei temi WordPress, si trova nel Theme Customizer e si chiama CSS aggiuntivo o CSS personalizzato.

Si chiamerà qualcosa di simile su altre piattaforme di blog.

Ora copia tutto il codice dal tuo editor di testo e incollalo nella scheda Customizer.

Non appena incolli il codice, il visualizzatore di anteprima ti mostrerà le modifiche apportate.

Fai clic su pubblica e l'hai fatto.

Ecco un confronto tra prima e dopo le mie modifiche.

Puoi fare molto di più

I miei suggerimenti CSS per principianti L'introduzione passo dopo passo alla modifica dello stile CSS HTML è solo l'inizio.

Puoi fare molto di più se vuoi sperimentare e provare a cambiare altri elementi.

È facile aggiungere bordi o ombre alle immagini, spostare il testo a sinistra oa destra o ridimensionare la larghezza del testo del corpo.

Puoi spostare i margini o ridurre o aumentare il riempimento e modificare l'allineamento.

Ci sono centinaia di opzioni che puoi scegliere di modificare.

Ricorda che quando lavori negli Strumenti per sviluppatori, non influirai sul tuo sito.

Tutte le modifiche apportate sono un'anteprima e solo visive all'interno di quella finestra del browser.

Non importa cosa provi o se funziona o no.

Pensalo come un parco giochi per imparare quanto altro puoi fare per modellare il tuo sito web o blog.

Sii curioso e ti divertirai ad apprendere questa nuova abilità con questi suggerimenti sui CSS per principianti.

Un grande suggerimento bonus con Strumenti per sviluppatori

Ora che hai aperto il frame degli Strumenti per sviluppatori, c'è una cosa molto carina che puoi fare.

Puoi testare la velocità del tuo sito.

Tutto quello che devi fare è fare clic sulla scheda Rete.

Quindi fare clic su CTRL + R.

Vedrai il tempo di velocità della tua pagina completamente caricata in rosso sulla linea in basso contrassegnata dalla freccia.