10 grundläggande lektioner i CSS

Som tidigare nämns använder vi CSS för att skapa en presentation om hur hemsidan ska se ut. Via CSS har vi därför en mångfald av alternativ till att specificera våra HTMLkoder med. Vi ska nu kika lite närmare på hur css fungerar och hur strukturen (syntaxen) för css ser ut.

Hur fungerar CSS? Vad är syntax?

selector
I CSS så finns det en “regelordning” om hur man ska skriva sina csskoder för att få dem att fungera. Det är just det som kallas för syntax. Syntaxen är uppdelad i tre delar. I guiden skrivs dessa med något som kallas för short hand declaration groups. Syntaxens tre delar ser ut så här:

  1. selector {property: value;}

Om vi börjar med att granska vad selector innebär så är det ett utvalt HTMLelement, bland annat body, font, p, eller ett divblock man vill lägga fokus på och definiera. Som ett första exempel ska vi använda HTMLelementet body.

  1. body {property: value;}

Nästa del är property som betyder egenskap, i vårt fall hur egenskaperna för body ska definieras. Vi ska välja bakgrundsfärgen.

  1. body {background-color: value;}

Så här långt har vi med css valt ut att formatera htmlelementet body. Vi har också valt egenskapen bakgrundsfärg, fast vi har inte valt värdet på egenskapen, det vill säga vilken bakgrundsfärg vi vill ha. Nu gör vi det genom att lägga in en definition i value.

  1. body {background-color: #333333;}

Ovanstående csskod läses in av webbläsaren så att hela bodysektionen får bakgrundsfärgen #333333 – mörkgrå. Nu vill vi även definiera styckeindelningen, vår textfärg, vilken font och storlek vi vill ha på denna samt att den skall placeras i vänsterställt läge. Återigen använder vi samma syntax, fast vi väljer en annan selector och flera egenskaper och värden.

  1. p {font-family:arial; font-size:12px; text-align:left; color:#fff;}

Som ren css-syntax ser ovanstående kod ut så här:

  1. selector {property:value; property:value; property:value; property:value;}

Vi upptäcker alltså att man inte behöver skapa en ny selector för htmlelements varje egenskap utan det går utmärkt att skriva in flera egenskaper för ett och samma HTMLelement så länge egenskaperna är skilda åt med ett semicolon samt att alla egenskaper och värden som definieras skall omslutas med klamrar.

Grupperingar och globala värden

Låt oss säga att du vill att alla rubriker på din hemsida ska ha samma färg – ett så kallat globalt värde, då kan man gruppera alla rubriker som en enda selector med gemensamma egenskaper och värden. Kika på följande exempel och alternativ. Här har rubrikerna h1 till h3 fått samma textfärg.

  1. h1, h2, h3 {color:#000;}

Dock har de varje webbläsares specifika grundvärde i övrigt eftersom vi ännu inte har angett vare sig storlek eller utseende på fonten. Nu ska vi ytterligare lägga till några egenskaper. Fast vi vill inte ha globala värden för alla selektorer utan på en del och sedan fokusera på var och en av rubrikerna. Det kan då se ut som följande:

  1. h1, h2, h3 {color:#000; line-height:150%; text-align:left;} Detta är ett globalt värde. Rubrikerna h1-h3 har samma egenskaper och värden.
  1. h1, h2 {font-family:Times;} Globalt värde för h1 och h2
  1. h1 {font-size:24px;}
  1. h2 {font-size:20px;}
  1. h3 {font-family:arial; font-size:16px;}

Egenskaperna för varje element, om man däremot skulle ha skrivit ut alla dessa per rubrik, hade sett ut så här:

  1. h1 {font-family:Times; line-height:150%; text-align:left;font-size:24px;}
  1. h2 {font-family:Times; line-height:150%; text-align:left;font-size:20px;}
  1. h3 {font-family:arial; line-height:150%; text-align:left;font-size:16px;}

När man ger ett HTMLelement ett globalt värde som egenskap behöver man alltså inte upprepa detta. Ett tips är därför att fundera på vilka egenskaper varje HTMLelement kan tänkas dela och ha som gemensamt globalt värde. Kika på följande exempel:

  1. h1, h2, h3, h4, h5, p, blockquote {text-align:left; line-height:150%;}

Här har vi angett att alla rubriker, alla paragrafer (stycken) samt blockcitat ska stå i vänsterställt läge och ha ett “avstånd”, line-height, mellan varje rad som är 1 1/2 gånger högre än vad texten är. Hur högt detta avstånd blir har sedan att göra med hur stor fontstorlek vi ger dessa element.

Class selector

Ibland så kanske man vill definiera och styla vissa utvalda delar av ett visst element, då används något som kallas för Class Selector. Med en class selector kan man få samma HTMLelement att se olika ut beroende på hur du vill presentera det. En vanlig egenskap (property) som man formaterar med css är just om text eller bilder ska vara högerställda, vänsterställda, eller placerade i mitten. Vi ska granska följande fyra exempel:

  1. p.right {text-align:right;}
  1. p.left {text-align:left;}
  1. img.alignright {float:right;}
  1. img.alignleft {float:left;}

I de två första exemplen handlar det specifikt om paragrafer, det vill säga stycken, och att texten i dessa ska vara vänster respektive högerställda. Vi ser det i selectorerna p.right och p.left. HTML-koden för dem:

  1. <p class="left">Vänsterställt stycke</p>
  1. <p class="right">Högerställt stycke</p>

Globalt eller avgränsat?
Även om nedanstående två koder ger samma resultat så finns det faktiskt en viss skillnad mellan dem. I den nedre koden har nämligen alla stycken som omsluts med p-taggen ett globalt värde medan den övre html-koden används om man med class-attributet endast vill förändra en avgränsad del av innehållet. Kika på skillnaden.

  1. p.left {text-align:left;}
  2. <p class="left">Vänsterställt stycke med class-attribut</p>
  1. p {text-align:left;}
  2. <p>Här kommer den globalt formaterade texten utan class-attributet</p>

Jag vill också här påpeka att den text som inte skrivs in som paragrafer kommer inte heller att formateras utan ställas i webbläsarens defaultläge, dvs i vänsterställd läge. HTML-koden för ett class-attribut ser ut så här:

  1. class=" "

Beträffande bilderna så handlar det om samma regler. Den utvalda selektorn är här en bild – img.

  1. img.alignright {float:right;}
  1. img.alignleft {float:left;}

HTMLkoden för dem är:

  1. <img class="alignleft" src="bilden.jpg" alt="" />
  1. <img class="alignright" src="bilden.jpg" alt="" />

Man kan också använda sig av olika class-attribut utan att för den skull behöva koppla dessa till specifika HTMLelement (selektorer). De blir då allmänna class-attribut och du kan använda dem på de HTMLelement som du vill ska definieras. Låt oss kika på några exempel:

  1. .center {text-align:center;}
  1. .left {text-align:left;}
  1. .right {text-align:right;}
  1. .alignleft {float:left;}
  1. .alignright {float:right;}

Väljer du att ange värdet right eller left måste du vara observant på om det inte redan finns en selector med samma namn och värde fast med olika egenskaper. Titta på följande koder. .left {float:left;} respektive .left {text-align:left;} är samma selector med samma värde (value) – left. Men egenskapen (property) skiljer sig eftersom den ena egenskapen är text-align medan den andra egenskapen är float. Det innebär att om du inte ändrar namn på den ena selektoren så kan det i förlängningen bli ett problem i presentationen av dina HTMLelement, framförallt om du vill att ett element ska vara vänsterställt och inte ha värdet float. En god idé är att namnge alla flytande element till exempelvis alignright respektive alignleft för att skilja dem åt från de element som har egenskapen text-align:left respektive text-align:right.

ID selector

Innan vi avslutar lektion 2 ska vi kika lite på vad som menas med en ID selector. Ett ID är ett unikt namn som bara får förekomma en gång per sida. Exempel på en ID selector är denna:

  1. h1#logo {text-align:center; font-family:Times; font-size:24px; font-weight:bold; color:#999;}

Vi har en rubrik h1, och just denna rubrik vill vi använda som logo. En ID selector börjar alltid med teckenenheten #. ID selectorn är således #logo – inte h1 – vi har bara kopplat denna till rubriken. Märk väl att de divblock som man ofta använder för att bygga en hemsidas struktur med är en ID selector så länge dessa börjar med teckenenheten #. Vi har bland annat #header, #container, #footer och så vidare. Varje block kan i sin tur kopplas till specifika HTMLelement likt exemplet h1#logo.

  1. #header p {text-align:left; font-family:verdana; font-size:11px; color:#666;}

Ovanstående egenskaper formaterar bara paragraferna i #header. Eftersom vi specifikt kopplar dessa egenskaper till ID selektorn #header så prioriteras dessa värden före de globala värden som anges i selektorn p {text-align:left; font-family:arial; font-size:12px; color:#333;}. Texten i styckena som finns i #header kan alltså att se annorlunda ut jämfört med de övriga styckena på hemsidan.

Tips!

Ha för vana att aldrig börja ett ID:s namn med en siffra eftersom det inte fungerar i Mozilla Firefox.

Visste du att du kan använda flera classer i samma HTML-kod? Låt oss säga att du vill ändra en av dina paragrafer till att ha en högerställd text som är kursiv, då är html-koden denna:

  1. <p class="right italic">Hej och hå</p>

Och css-syntaxen för dessa två classer:

  1. .right {text-align:right;}
  1. .italic {font-style:italic;}

Ovanstående två classer är alltså inte kopplade till några specifika HTMLelement utan man kan med fördel använda dem tillsammans eller en i taget på andra HTMLelement om man vill.

I lektion tre går vi igenom hur man kan formatera och lägga till olika stilar på en text. Välkommen dit!

Liknande poster:

5 Comments Add yours

  1. Erik says:

    Hej!
    Tack för en mycket bra guide! Jag har följt den till punkt och pricka och allt fungerar bra, förutom font-size. Jag använder style sheet och jag kan ändra textfärg, länkfärg, bakgrundsfärg osv, men när jag försöker skriva in font-size så fungerar det inte på den text som är skriven innom i mina html doc. Jag kan ju såklart skriva in font-size i varje html doc men jag vill ju använda mitt style sheet 🙂 Jag har skrivit in det på följande sätt (nu skriver jag bara i font-size) i body {font-size:10px} och p { font-size:10px;} men det blir ändå bara standard storlek. Har tittat i bådde chrome, IE och firefox. Vet du vad detta kan bero på? Tack på förhand! /Erik

    1. Erik says:

      det ska alltså stå “krokodilgap höger P krokodilgap” vänster i meningen: “…text som är skriven innom (krokogapPkrokogap) i mina html doc.

    2. Lena says:

      Hej Erik!
      All css som läggs in i dokumentet prioriteras före stilmallen. Har du möjligtvis angett font-size för speciella div-block i stilmallen? Kika här under:

      #main {background: [...]; padding:[...], font-size:[...];}

      Eller:

      #main p {font-size:[...];}

      Ovanstående css prioriteras för font-size i body, dock ärver de egenskaperna från parent (body).
      Du har angivit body {font-size:10px} och p { font-size:10px;} därför blir all text på sidan lika stor. Body innebär ALL text, inklusive stycken (p), men du har också angivit att dina stycken ska vara 10px. Testa och ta bort font-size i body. Därefter anger du istället fontstorleken för varje element i stilmallen.
      mvh/Lena

  2. Björn Andersson says:

    Ville bara tacka för en riktigt snygg och välskriven guide. Jag snubblade in på din sida mest bara på måfå och har varit fast sedan lunch, så det är ett gott betyg:) Bra jobbat!

    1. Lena says:

      Hej Björn!

      Vad trevligt att du “fastnade” på min sida. Jag hoppas att du fick med dig lite matnyttigt =)
      TACK för berömmet!
      mvh/Lena

Leave a Reply

Your email address will not be published. Required fields are marked *