CSS (Cascading Style Sheets) är ett språk med en uppsättning regler som definierar hur elementen på din website ser ut.
These rules control your website’s design elements, such as the font size and color, the background color of your site, and how much space there is between different sections.
Tänk på CSS som instruktioner för styling av din website. Medan ditt WordPress-tema använder HTML-element för att strukturera innehållet på din site (gillar headings, stycken, images och knappar), talar CSS om för webbläsaren hur dessa element ska presenteras visuellt.
Varför skulle du behöva edit CSS i WordPress?
Medan WordPress-teman erbjuder en mängd olika designalternativ, kanske du ibland vill göra specifika ändringar i din websites appearance utöver temats built-in settings. Det är här edit av CSS kommer väl till pass för användare av WordPress.
You kanske till exempel vill ändra bakgrundsfärgen för en viss section på din website eller tweaka storleken på fonten för bättre läsbarhet.
You can also personalize your website’s appearance and differentiate it from other sites using the same theme. Det kan handla om att ändra färg på textmarkeringen, lägga till en parallaxeffekt eller Styling av formuläret för WordPress comments.
Ibland kanske ett theme inte displayed element exakt som you vill ha det i din webbdesign. Med några rader CSS kan du fixa mindre issues som att centrera text som inte ser centrerad ut eller justera padding eller marginal runt en image.
Måste 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 website. De flesta WordPress teman kommer med en mängd olika built-in design alternativ som allow you att customize utseendet och känslan av din site utan att röra någon kod.
CSS edit anses vanligtvis vara en avancerad funktion. Beginnare kan visserligen använda WordPress utan CSS, men att kunna CSS öppnar upp för fler möjligheter att finjustera designen på din website.
För att göra edit av CSS enklare kan du använda ett WordPress plugin som gillar 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 detta sagt kommer förståelse för hur CSS fungerar att ge dig mer control och flexibilitet när du customizear din WordPress website.
Grunderna i CSS i WordPress (med exempel)
CSS använder en specifik syntax för att definiera hur element på din website ska se ut. Även om det kan verka komplext kl. först är den grundläggande strukturen ganska enkel.
Det första du bör känna till är CSS-selektorer. Dessa talar om för CSS vilka element på din website som ska stylas. De gillar etiketter som pekar på specifika delar av din website.
Till exempel hänvisar body tagged till hela content area på din website. Väljaren body skulle alltså rikta in sig på hela page.
Den andra är egenskaper. Dessa definierar de specifika visuella aspekter som du vill ändra. Egenskaperna gillar instruktioner för hur du vill att det valda elementet ska se ut. Vanliga exempel är färg, font-storlek, bakgrundsfärg och marginal.
Nästa är värden. Dessa anger vad egenskapen ska vara inställd på. Värdet för color kan t.ex. vara röd, blå 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 tillämpa samma stilar på alla element med den klassen.
Låt oss säga att du vill ändra bakgrundsfärgen på hela din website till svart. Här är CSS-koden för det:
body {
background-color: black;
}
I detta exempel:
bodyär väljaren som riktar in sig på hela webbplatsens innehållsområde.background-colorär egenskapen som definierar vilken aspekt vi vill ändra.blackär det värde som anger den nya bakgrundsfärgen.
Anta nu att du vill markera viss text på din website. Du kan skapa en CSS-klass med anropet .highlight som gör texten fet 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 detta exempel:
.highlightär en klassväljare. Den väljer alla element med klassen ”highlight”.font-weight: bold; ochcolor: yellow;är egenskaper. De definierar vilka aspekter av de valda elementen som vi vill ändra.fetochgulär värden. De anger de nya värdena för egenskaperna.
Hur kan jag add to Custom CSS-kod till WordPress?
Hur du kan add to custom CSS beror på vilken typ av WordPress theme du använder.
Om du använder ett klassiskt theme kan du gå till WordPress customize och välja ”Additional CSS” för att add to din kod där.
Om du använder ett block WordPress-tema kommer tem ats customizer att saknas i din WordPress dashboard. Detta beror på att din standard editor nu är full-site editor.
Med detta sagt kan du fortfarande komma åt WordPress customizer genom att lägga till /wp-admin/customize.php i slutet av ditt domain name så här:
https://example.com/wp-admin/customize.php
När du addar till CSS genom WordPress customize, lagras ändringarna i WordPress database, ej i den fysiska style.css-filen (temats stylesheet).
Detta tillvägagångssätt allow you to make changes without directly editing the theme files, vilket är en mycket säkrare metod.
Som sagt, du kan inte göra komplexa CSS-ändringar på det här sättet. Så alternativet är att använda ett code snippet plugin som WPCode, eftersom det säkert kan insert custom CSS i ditt WordPress-tema.
Du kan också skapa ett barntema och add to din customize CSS-kod där. På så sätt kommer dina CSS tweaks fortfarande att finnas kvar även när huvudtemat uppdateras.
För mer information kan du läsa vår Step-by-Step guide om hur du lägger till custom CSS på din WordPress site.
Slutligen kan du också använda ett CSS-redigeraren plugin gillar CSS Hero. Detta tillägg låter dig edit CSS utan att veta hur man kodar. Kolla in vår CSS Hero review för mer information.
Varför visas inte min CSS på min site i WordPress?
Din CSS kanske inte visas på din WordPress site på grund av syntax error. Ett litet misstag i din CSS-kod kan förhindra att den tillämpas. Det kan vara en parentes som saknas, ett skrivfel i ett egenskapsnamn eller ett felaktigt värde.
Added, om du senaste har lagt till eller ändrat din CSS, kan du behöva clear din cache för att se ändringarna. Rensa webbläsarens cache och om du använder ett plugin för caching på din site i WordPress bör du rensa det också.
Ibland kan andra themes eller tillägg störa din CSS. Försök att deactivate andra tillägg ett efter ett för att se om issue löser sig. Om det gör det är det sista tillägget du deactivate sannolikt orsaken till konflikten.
Om du använder ett barntema och din CSS inte visas ska du kontrollera att barntemat är korrekt konfigurerat och att CSS-filen är korrekt placerad i filen functions.php i barntemat.
Om du behöver hjälp kan du kontrollera vår guide för nybörjare om 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äsa under för relaterade artiklar om användbara WordPress-tips, tricks och idéer.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
