10 semplici suggerimenti per l'apprendimento dei CSS per WordPress

Imparare i CSS può essere travolgente, soprattutto quando non sai da dove cominciare e quali termini cercare quando rimani bloccato.

Poiché CSS è un linguaggio di stile e non un linguaggio di programmazione completo come Javascript o PHP, in realtà è abbastanza semplice da imparare, soprattutto se hai una certa conoscenza dell'HTML alle spalle (che presumo tu abbia ai fini di questo post).

Nel nostro sondaggio sul blog, un numero schiacciante di voi ha affermato di voler migliorare il vostro gioco e acquisire maggiore familiarità con i CSS ed è per questo che abbiamo recentemente pubblicato un elenco di oltre 150 risorse per l'apprendimento dei CSS, che dovrebbero aiutarvi a iniziare, soprattutto in tandem con questo post.

Oggi ti mostrerò il flusso di lavoro e i suggerimenti che mi hanno aiutato a imparare i CSS quando ho iniziato molti anni fa. Inizia con il primo suggerimento e prosegui lungo l'elenco fino alla padronanza dei CSS.

Continua a leggere o vai avanti usando questi link:

• Costruzione di base
• Esercitati con selettori e proprietà semplici
• Memorizza il modello della scatola
• Impara facendo
• Disporre il contenuto per larghezza e altezza
• Galleggianti e posizionamento
• CSS avanzato
• Replica un sito con CSS
• Preprocessori
• Quadri

1. Costruzione di base

La prima cosa è prima: per imparare a scrivere il tuo CSS, devi sapere come formattarlo correttamente. In realtà ci sono due modi corretti per farlo, ma uno di questi aiuta a mantenerti più organizzato.

Poiché è comune che l'HTML sia la prima lingua che le persone imparano quando vogliono lavorare con i siti WordPress, è utile imparare la sintassi CSS scrivendola prima in modo simile all'HTML.

Ecco la struttura di base adottata dai CSS:

È abbastanza semplice quando non ci sono molti stili che vuoi implementare per un elemento sul tuo sito, ma quando inizi a familiarizzare con i CSS, avrai bisogno di molto più di uno stile per un elemento ed è qui che un una struttura come questa può diventare disordinata, veloce.

Ecco perché esiste un modo più efficiente e organizzato per scrivere il tuo CSS:

Ora puoi iniziare a scavare nei termini utilizzati in questo esempio. Ognuno di questi termini sono gli elementi costitutivi di base dei CSS: classe, ID, selettore, proprietà e valore. Le proprietà e i valori costituiscono anche quella che viene chiamata dichiarazione.

Questo è un ottimo punto di partenza per imparare a scrivere il tuo CSS e una volta iniziato, potresti chiederti dove dovresti scrivere tutto questo nei tuoi file WordPress.

Nella tua installazione di WordPress, qualsiasi file che vedi che finisce in .css è un file CSS, come probabilmente hai già intuito. Il file principale che devi cercare è il tuo foglio di stile ed è etichettato come style.css . Qui è dove la maggior parte o tutto il design del tuo tema è contenuto in termini di colori, caratteri, immagini di base e forse parte del layout del tuo tema.

Potresti anche notare un file in un tema predefinito chiamato custom.css e questo è solitamente il punto in cui vorrebbero che tu apporti modifiche al tema. Quando apporti modifiche a questo file, dovrebbe sovrascrivere gli stili esistenti nel foglio di stile del tema.

Se aggiungi plug-in al tuo tema, potrebbero anche essere presenti file CSS nella loro cartella e vengono utilizzati per modellare l'aspetto del plug-in.

2. Esercitati con selettori e proprietà semplici

Il prossimo passo è conoscere i selettori e le proprietà di base e come funzionano in un tema. Selettori come h1 , h2 e h3 per le intestazioni e p per il testo del paragrafo, ad esempio, nonché proprietà come font-family e background-color .

C'è un modo semplice per esercitare queste nuove abilità e vedere effettivamente i cambiamenti che stai facendo, senza dover avviare il tuo blog WordPress. W3Schools ha un sacco di informazioni sui CSS, nonché esempi dal vivo in cui puoi modificare il loro codice e con la semplice pressione di un pulsante, puoi vedere immediatamente le modifiche apportate.

Quando vedi un esempio, fai semplicemente clic sul pulsante Prova tu stesso e si apre una finestra in cui puoi testare alcuni CSS di base.

3. Memorizza il modello della scatola

Sono un sostenitore del fare riferimento alle informazioni più comuni piuttosto che impegnarle tutte nella memoria. Forse è perché trovo che la mia memoria manchi la maggior parte del tempo, ma preferirei dire che è perché ci sono così tanti meravigliosi riferimenti online.

Puoi facilmente cercare selettori e proprietà che non conosci in un batter d'occhio. Tutto ciò che serve è una semplice richiesta al tuo motore di ricerca preferito come Google o Bing e tutte le informazioni di cui hai bisogno sono a portata di clic da lì.

Per fortuna, non è difficile da imparare e in tutta onestà, se riesco a memorizzarlo, non dovresti avere problemi nemmeno con esso. In sostanza, include un'area del contenuto, un riempimento, un bordo e un margine.

4. Impara facendo

Una volta che inizi a familiarizzare con i CSS, è un'ottima idea metterlo in pratica scegliendo un tema che abbia un design completamente semplice e modificandone lo stile modificando il foglio di stile.

È importante capire in che modo semplici modifiche possono influenzare un tema in modo drastico a volte e altre volte meno. In definitiva, esercitarti il ​​più possibile per aiutarti a vedere visivamente le modifiche apportate e collegare le tue azioni di scrittura del codice al risultato finale.

Nello schema più ampio delle cose, una volta che sei in grado di collegare i punti, non solo puoi scrivere CSS rapidamente, ma dovresti anche essere in grado di risolvere i problemi in futuro, il che diventa un compito critico per la progettazione e lo sviluppo web.

Ecco alcuni ottimi temi su cui esercitarti che puoi installare gratuitamente sul tuo sito WordPress. Non tutti sono rappresentazioni perfette di come un tema dovrebbe necessariamente apparire e funzionare, ma sono tutti ottimi punti di partenza per imparare come modificare un tema con un semplice CSS.

Spettro bianco

Il tema White Spektrum è un tema semplice con un layout comune che include l'area del contenuto principale, la barra laterale, l'intestazione e il piè di pagina.

Oltre a un tocco di colore quando si tratta di caratteri e collegamenti, è un tema semplice e semplice con cui lavorare.

Fondatore

Una volta che inizi a capire davvero i CSS, il tema Fondatore è fantastico per sbirciare sotto il cofano e dare un'occhiata al suo foglio di stile poiché è un po' più complesso degli altri temi elencati finora. È reattivo, accessibile e pronto per la traduzione, include un icona hamburger per schermi mobili e molti altri dettagli di design CSS che sono fantastici da studiare.

Anche con questi temi minimalisti sopra, potresti comunque sentirti un po' sopraffatto da quante cose non riconosci ancora e va bene. Man mano che controlli ogni sezione di questo post, tutto dovrebbe iniziare a riunirsi un po' di più.

5. Disporre il contenuto per larghezza e altezza

Dopo aver installato uno di questi temi, puoi anche iniziare a modificare il layout inserendo diverse lunghezze e larghezze di aree di contenuto e selettori.

È un precursore del passaggio successivo e ti fa familiarizzare con le diverse aree di layout in un tema WordPress.

6. Galleggianti e posizionamento

È qui che i CSS tendono a diventare un po' complicati poiché puoi creare un layout esclusivamente con CSS e, in particolare, float e posizionamento. Il problema è che queste proprietà non sono progettate per creare interi layout e c'è una bozza là fuori per aggiornare i layout CSS.

Per ora, questo è un modo comune in cui molte persone ottengono il layout giusto . È un'ottima idea osservare i temi che sono già disponibili, incluso l'elenco sopra, e vedere come differiscono nell'uso di float e posizioni.

7. CSS avanzato

A questo punto, stai davvero iniziando a prendere dimestichezza con i CSS, ma c'è molto altro da scoprire:

• Pseudo classi : utilizzate per definire uno stato specifico di un elemento, ad esempio al passaggio del mouse e posizionare le immagini in un luogo specifico rilevante per altri elementi.
• Selettori complessi : puoi ottenere uno stile ancora più specifico utilizzando selettori più avanzati.
• Animazioni CSS3 : crea una dissolvenza, un pop o altre transizioni quando passi il mouse su immagini e pulsanti.
• Reattività con le query multimediali CSS3 : uno dei modi più semplici per creare un tema reattivo è utilizzare le query multimediali.
• Trasformazioni : controlla le dimensioni e la forma delle aree di contenuto selezionate.
• At-rules – Usato per importare cose come font e fogli di stile nel tuo tema.
• Sfumature – Aggiunta di una sfumatura al tema senza la necessità di utilizzare un'immagine.

Questi sono molti degli elementi da cui puoi davvero iniziare a vedere il design del tuo tema prendere davvero forma. È il momento perfetto per iniziare a mettere alla prova le tue abilità.

8. Replica un sito con CSS

Con tutta questa conoscenza alla cintura, potresti aver bisogno di una cintura più robusta, ma soprattutto, puoi davvero mettere in pratica le tue abilità usando una shell di base di un tema e aggiungendo i tuoi stili CSS da zero.

Una delle cose più utili che puoi fare per far progredire il tuo apprendimento è mettere in pratica le tue conoscenze in applicazioni del mondo reale. Consiglio di provare a trovare un sito che ti piace, quindi replicarlo nel miglior modo possibile esclusivamente con CSS su un tema WordPress vuoto.

Certo, probabilmente non sarai in grado di ottenere tutto perfetto e probabilmente ci sono molti elementi che non sarai in grado di replicare solo con i CSS, ma è un ottimo modo per farti sentire a tuo agio con i CSS.

Ecco alcuni fantastici temi per principianti gratuiti che puoi utilizzare:

• BlankSlate

  

  Questo è come ossa nude come si arriva. C'è solo HTML5 in questo tema, quindi sei libero di aggiungere il tuo CSS senza preoccuparti di conflitti di stili. Tuttavia, viene fornito con tutto il necessario per iniziare a modellare il tuo tema.

• HTML5 vuoto

  

  HTML5 Blank è un tema WordPress standard che include alcuni stili, anche se non molto. È un ottimo inizio se non sei troppo entusiasta di iniziare il tuo CSS da zero.

• Sottolineature

  

  Se sei un po' avventuroso e vuoi provare un tema iniziale più avanzato, Underscores è un'opzione eccellente, tuttavia, non per i deboli di cuore poiché viene fornito con due stili di esempio di tema precaricati. Include anche alcune tecniche avanzate e codifica che lo rendono un ottimo strumento di apprendimento.

C'è anche il tema WordPress Reset HTML5 su GitHub. Include funzionalità un po' più avanzate, ma questo è in definitiva ciò che lo rende un prezioso tema di partenza.

9. Preprocessori

Una volta che conosci i dettagli dei CSS, è un'ottima idea conoscere i preprocessori e, in particolare, SASS e LESS. Entrambi aiutano a organizzare il tuo CSS in modo che sia molto più facile da scrivere e più accessibile per modifiche future.

I preprocessori rendono il tuo CSS pulito e facile da seguire ed è diventato rapidamente un'abilità essenziale tra gli sviluppatori web. Sebbene sia in corso un dibattito su quale sia il migliore, SASS tende ad essere il preprocessore più utilizzato fino ad oggi.

Se vuoi cimentarti con SASS nel contesto di WordPress, dai un'occhiata al tema Bones. È composto principalmente da HTML5, quindi puoi provare lo stile con il bit integrato di SASS che è già incluso.

10. Quadri

Nello sviluppo web, i framework sono una struttura per la creazione di siti web dinamici. In definitiva, l'obiettivo di un framework è rendere i siti più veloci senza perdere funzionalità.

Una volta che hai eseguito i CSS, puoi accelerare lo sviluppo del tuo tema utilizzando un framework.

Uno dei framework più popolari è Twitter Bootstrap. È stato creato per essere reattivo immediatamente e utilizza sia SASS che LESS, nonché molti componenti CSS personalizzati.

Avvolgendo

Armati di un programma per l'apprendimento e con i suggerimenti per aiutarti lungo la strada, CSS non dovrebbe essere troppo opprimente per te da gestire. Inoltre, dovresti essere pronto ora per cimentarti nello stile del tuo tema WordPress.

Per ulteriori risorse sull'apprendimento di CSS e WordPress, dai un'occhiata ad alcuni dei nostri altri post: Una mega guida all'apprendimento e ai riferimenti ai CSS per WordPress: oltre 150 risorse e da WordPress principiante a professionista: oltre 200 risorse per aumentare la carriera.

• CSS