Vad är: CSS

CSS (Cascading Style Sheets) är ett språk med en uppsättning regler som definierar hur elementen på din webbplats ser ut.

Dessa regler styr din webbplats designelement, såsom teckenstorlek och färg, din webbplats bakgrundsfärg och hur mycket utrymme det finns mellan olika sektioner.

Tänk på CSS som stilinstruktionerna för din webbplats. Medan ditt WordPress-tema använder HTML-element för att strukturera innehållet på din webbplats (som rubriker, stycken, bilder och knappar), talar CSS om för webbläsaren hur dessa element ska presenteras visuellt.

Varför skulle du behöva redigera CSS i WordPress?

Medan WordPress-teman erbjuder en mängd olika designalternativ, kanske du ibland vill göra specifika ändringar i din webbplats utseende utöver tematets inbyggda inställningar. Det är här redigering av CSS kommer till nytta för WordPress-användare.

Till exempel kanske du vill ändra bakgrundsfärgen på en specifik sektion på din webbplats eller lite justera teckenstorleken för bättre läsbarhet.

Du kan också anpassa din webbplats utseende och skilja den från andra webbplatser som använder samma tema. Detta kan innebära att ändra textmarkeringsfärgen, lägga till en parallaxeffekt, eller styla WordPress-kommentarformuläret.

Ibland kanske ett tema inte visar element exakt som du vill i din webbdesign. Med några rader CSS kan du åtgärda mindre problem som att centrera text som verkar vara ur centrering eller justera marginaler eller utfyllnad runt en bild.

Behöver jag kunna CSS för att använda WordPress?

Nej, du behöver inte nödvändigtvis kunna CSS för att bygga en WordPress-webbplats. De flesta WordPress-teman kommer med en mängd inbyggda designalternativ som låter dig anpassa utseendet och känslan på din webbplats utan att röra någon kod.

CSS-redigering anses vanligtvis vara en avancerad funktion. Medan nybörjare absolut kan använda WordPress utan det, öppnar kunskap om CSS upp fler möjligheter för att finjustera din webbplats design.

För att göra CSS-redigering enklare kan du använda ett WordPress-plugin som CSS Hero. Ett CSS-plugin ger dig ett visuellt tillvägagångssätt för att göra CSS-ändringar och är kompatibelt med många populära WordPress-teman.

Med det sagt, att förstå hur CSS fungerar ger dig mer kontroll och flexibilitet när du anpassar din WordPress-webbplats.

Grunderna i CSS i WordPress (med exempel)

CSS använder en specifik syntax för att definiera hur element på din webbplats ska se ut. Även om det kan verka komplicerat till en början, är den grundläggande strukturen ganska enkel.

Det första du bör känna till är CSS-väljare. Dessa talar om för CSS vilka element på din webbplats som ska stylas. De är som etiketter som pekar på specifika delar av din webbplats.

Till exempel refererar taggen body till hela innehållsområdet på din webbplats. Så, selektorn body skulle rikta in sig på hela sidan.

Den andra är egenskaper. Dessa definierar de specifika visuella aspekter du vill ändra. Egenskaper är som instruktioner för hur du vill att det valda elementet ska se ut. Vanliga exempel inkluderar color, font-size, background-color och margin.

Nästa är värden. Dessa anger vad egenskapen ska ställas in på. Till exempel kan värdet för color vara red, blue eller en specifik färgkod.

Sedan finns det CSS-klassen, som är en typ av attribut som kan tilldelas HTML-element. Du kan tilldela en klass till ett element i HTML-koden och sedan använda den i din CSS för att applicera samma stilar på alla element med den klassen.

Låt oss säga att du vill ändra bakgrundsfärgen på hela din webbplats till svart. Här är CSS-koden för det:

body {
  background-color: black;
}

I det här exemplet:

• body är selektorn, som riktar sig mot hela webbplatsens innehållsområde.
• background-color är egenskapen, som definierar vilken aspekt vi vill ändra.
• black är värdet som anger den nya bakgrundsfärgen.

Anta nu att du vill markera viss text på din webbplats. Du kan skapa en CSS-klass som heter .highlight som gör texten fetstil och ändrar dess färg till gul. Så här skulle du definiera den klassen i din CSS:

.highlight {
 font-weight: bold;
 color: yellow;
}

Och här är hur du skulle tillämpa det på element i din HTML:

<p class="highlight">This text will be highlighted.</p>
<div class="highlight">This div will also be highlighted.</div>

I det här exemplet:

• .highlight är klassväljaren. Den väljer alla element med klassen "highlight".
• font-weight: bold; och color: yellow; är egenskaper. De definierar vilka aspekter av de valda elementen vi vill ändra.
• bold och yellow är värden. De anger de nya värdena för egenskaperna.

Hur lägger jag till anpassad CSS-kod i WordPress?

Hur du kan lägga till anpassad CSS beror på vilken typ av WordPress-tema du använder.

Om du använder ett klassiskt tema kan du gå till WordPress anpassningsverktyg och välja 'Ytterligare CSS' för att lägga till din kod där.

Om du använder ett blockbaserat WordPress-tema, kommer anpassningsverktyget för temat att saknas från din WordPress-instrumentpanel. Detta beror på att din standardredigerare nu är fullständiga webbplatsredigeraren.

Med det sagt kan du fortfarande komma åt WordPress anpassningsverktyg genom att lägga till /wp-admin/customize.php i slutet av ditt domännamn, så här:

https://example.com/wp-admin/customize.php

När du lägger till anpassad CSS via WordPress anpassningsverktyg, lagras ändringarna i WordPress-databasen, inte i den fysiska filen style.css (ditt temas stilmall).

Detta tillvägagångssätt gör att du kan göra ändringar utan att direkt redigera temafiler, vilket är en mycket säkrare metod.

Med det sagt kan du inte göra komplexa CSS-ändringar på det här sättet. Så alternativet är att använda ett kodavsnittsplugin som WPCode, eftersom det säkert kan infoga anpassad CSS i ditt WordPress-tema.

Du kan också skapa ett barntema och lägga till din anpassade CSS-kod där. På så sätt kommer dina CSS-justeringar fortfarande att finnas kvar även när föräldratemat uppdateras.

För mer information kan du läsa vår steg-för-steg-guide om hur du lägger till anpassad CSS på din WordPress-webbplats.

Slutligen kan du också använda ett CSS-redigeringsplugin som CSS Hero. Detta plugin låter dig redigera CSS utan att kunna koda. Läs vår CSS Hero-recension för mer information.

Varför visas inte min CSS på min WordPress-webbplats?

Din CSS kanske inte visas på din WordPress-webbplats på grund av syntaxfel. Ett litet misstag i din CSS-kod kan hindra den från att tillämpas. Detta kan vara en saknad klammerparentes, ett stavfel i ett egenskapsnamn eller ett felaktigt värde.

Dessutom, om du nyligen har lagt till eller ändrat din CSS, kan du behöva rensa din cache för att se ändringarna. Rensa din webbläsares cache och, om du använder ett cache-plugin på din WordPress-webbplats, bör du rensa det också.

Ibland kan andra teman eller plugins störa din CSS. Försök att inaktivera andra plugins en efter en för att se om problemet löses. Om det gör det, är det troligt att det sista pluginet du inaktiverade orsakar konflikten.

Om du använder ett barn-tema och din CSS inte visas, se till att barn-temat är korrekt inställt och att CSS-filen är korrekt inlagd i filen functions.php i barn-temat.

Om du behöver hjälp kan du kolla in vår nybörjarguide för felsökning av WordPress-fel.

Vi hoppas att den här artikeln hjälpte dig att lära dig mer om CSS i WordPress. Du kanske också vill se vår lista med ytterligare läsning nedan för relaterade artiklar om användbara WordPress-tips, tricks och idéer.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.

Ytterligare läsning

• Hur man stylar WordPress-kommentarsformuläret (ultimat guide)
• Tema
• Hur man ändrar bakgrundsfärg i WordPress (nybörjarguide)