Tech Thursday: Lär dig grunderna i CSS

I denna veckas Tech Thursday tänkte jag förklara grunderna i hur CSS funkar. Våra nya kunskaper kommer vi sedan använda framöver för att börja göra små fix och trix som kommer göra våra bloggar finare och smartare.

Din blogg är uppbyggd av en massa kod som du generellt inte behöver kunna eller bry dig om för att fylla din blogg med innehåll. Men när du vill börja ta kontrollen över hur din blogg ser ut och funkar för att ge dina användare en bättre upplevelse är det bra att lära sig lite basics.

css-intro

 

CSS bestämmer hur koden ska presenteras

Jag har i tidigare inlägg berättat hur WordPress är uppbyggt. PHP-filer genererar dynamisk HTML-kod som sedan fylls med innehåll från en databas. PHP och HTML bestämmer vad som ska visas. Det CSS-koden gör är att säga hur innehållet ska visas på själva webben. Det här gäller förstås för ALLT innehåll på webben – inte bara WordPress eller bloggar. Allt innehåll på webben får sitt utseende från CSS-kod.

CSS – Cascading Style Sheets

På svenska kan man kalla det för en ”stilmall”. Namnet syftar till att man kan använda en enda mall för att bestämma utseendet på ett obegränsat antal sidor. Det sparar massor av tid och skapar snygga, enhetliga webbdesigner.

HTML-kod ska i sig egentligen aldrig innehålla kod för hur ett element ska se ut (storlek, färg, typsnitt). HTML ska bara ge strukturen och visa vilka element som finns. All stil ska sedan definieras så snyggt och logiskt som möjligt i stilmallen med CSS-kod.

Ett exempel

Om vi gör ett exempel på en väldigt enkel HTML-kod som kan vara grunden för en statisk webbsida så kan det se ut ungefär så här.


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Min sida</title>
</head>

<body>
 <header class="header">
 <h1>Hello World</h1>
 </header>
<main>
 <article class="content">
 <p>Hej hej här är min text!</p>
</article>
 </main>

</body>
</html>


Nu har vi allt på plats som vi behöver för vår sida. Vi har ett sidhuvud, header, med en rubrik i, H står för heading. Så H1 är vår största rubrikstil som vi använder för sidans titel.

Sedan har vi definierat vårt huvudsakliga innehåll med en main-tag och i den har vi vårt innehåll i en article-tag. Där har vi en paragraftext inom en p-tagg.

Helt utan någon CSS-kod så ser vår sida i en webbläsare ut så här:

enkel-html

Vi lägger på lite CSS


.header {
 background: #8EB5BB;
 padding: 2em;
 text-align: center; 
 }
 
 h1 {
 font-family: "Gill Sans", sans-serif ;
 }
 
 main {
 background: #E7E7E7;
 padding: 2em;
 min-height: 500px;
 }
 
 .content {
 background: #ffffff;
 padding: 2em;
 float: left;
 width: 80%;
 }
 

 

Så kommer vår sida istället se ut något i den här stilen:

enkel-css

Selectors – vad ska stylas?

Okej, sorry för lite svengelska här men lev med det. Det finns tre olika typer av selectors i CSS-syntax (alltså hur själva kodspråket skrivs). Dessa är:

  • Element
  • ID
  • Class

Element

Ett element är i mitt exempel ovan <main>. En stil som sätts på det elementet kommer påverka alla main-element i hela koden.

I CSS-syntax ropar man på ett element genom att skriva ut det utan något före.


main {
background: #f2f2f2;
padding: 2em;
}

ID

Ett ID sätter man i elementet för att visa att det här är ett unikt element som ska ha en egen stil. Det viktiga när det gäller ID:n är att de bara ska användas en gång, på ett element.

I HTML ger man ett element ett ID genom att skriva:

<main id="front-page"> </main>

Och i CSS-syntax anropar man sedan detta ID genom att skriva en fyrkant/hash framför:

#front-page {
background: #000000;
}

Class

Det här är den selector man kanske använder allra mest. Ett element kan ha flera klasser och en klass kan användas flera gånger på flera olika element.

I HTML ger man ett element en class genom att skriva:

<p class="date">2016-08-11</p>

Och i CSS-syntax anropar man en class genom att sätta en punkt framför:

.date {
color: red;
text-decoration: underline;
}

 

Så vilket element jag än skulle sätta klassen ”date” på så skulle texten i det elementet bli röd och understruken.

Properties – hur ska elementet stylas?

När du har valt en selector så kan du lägga till olika properties, alltså egenskaper/stilar, på ett visst element.

Det finns väldigt många properties där ute och de är ganska logiska. I CSS-syntax skriver du först en property, t.ex. color, följt av kolon. Sedan ger du den propertyn ett värde. Som jag har gjort i exemplet ovan.

Vilka olika properties och värden som finns att använda finns t.ex. listat på W3 Schoools här.

Var är min CSS-kod?

Stilmallen till ens hemsida eller blogg ligger i en egen fil som oftast heter style.css. Denna stilmall anropas sedan i head-elementet på alla sidor på din hemsida eller blogg. Det betyder att en ändring i stilmallen kommer ändra utseendet på samtliga sidor på blogg.

I WordPress så är det ditt tema som tillhandahåller en stilmall för din blogg. Den behöver du inte ändra utan du kan skapa ett child theme och i style.css-filen för ditt child theme kan du sedan skriva över enbart de stilar du vill ändra och lämna resten.

Det funkar nämligen så att webbläsaren läser av den senaste koden av hur något ska se ut. Stilmallar läses nämligen av som en hierarki. Där koden längst ned i ett dokument eller det dokumentet som ligger längst ned i en ”hög” av stilmallar är det som gäller.

Experimentera med CSS i Chromes inspekterare

När du använder webbläsaren Chrome (eller Firefox) så kan du visa och experimentera med CSS-kod direkt i webbläsaren och få se resultaten live. Det här är ett SÅ användbart verktyg när man håller på med bloggdesign där man vill ändra redan existerande CSS-stilar.

Gör såhär:

Högerklicka på den del av din blogg som du vill undersöka och välj ”Inspektera”.

inspektera

I HTML-koden som dyker upp i inspekteraren kommer just det här elementet att markeras.

inspektera2

I den andra delen av inspekteraren under fliken ”Style” kommer du nu kunna se vilka olika ID:n och klasser som påverkar just det här elementet. Som du ser så är min rubrik ett ”span”-element inuti ett H-element (inuti en div osv osv).

Nu kan du testa att ändra CSS-värden för just det här elementet och se resultatet direkt i webbläsaren. Du kan även skriva in nya properties och ge dem värden direkt i inspekteraren.

inspektera3

Jag testar att ändra storleken till 333% och typsnittet till Lucinda Grande. Så här skulle det se ut på min blogg:

inspektera4

Lär dig mer om CSS

Det finns massor med bra tutorials, onlinekurser och guider där ute om CSS. Ett bra ställe att börja på är, som jag nämnde tidigare, W3 Schools. Jag använder W3 hela tiden för att komma ihåg vilka olika properties och värden som finns, vad de heter och hur de skrivs. En hel del lär man sig utantill när man håller på men en hel del glömmer man bort också.

Code Academy har bra och grundläggande kurser i HTML och CSS.

Glöm inte att Google alltid är din vän! Det finns spaltmeter efter spaltmeter med forum-trådar och blogginlägg där ute som berättar hur du kan göra massa coola grejor i CSS.

Så, plugga på lite om det här så hörs vi i nästa Tech Thursday där vi ska designa ett sponsormeddelande till bloggen med hjälp av CSS.

Elin Häggberg

Digital designer, teknikbloggare och journalist. Bloggar om teknik och internet på egna bloggen Teknifik. Brinner för jämställdhet inom tech och älskar att koda!

2 Comments

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>