10 grundläggande lektioner i CSS

Du har säkert hört talas om css. Du kanske till viss del redan använder css? När man bygger en hemsida använder de allra flesta programspråket HTMLHyperTextMarkupLanguage, men HTML är endast stommen i ditt bygge. Hur denna stomme sedan ska se ut och placeras är det din CSS som sköter om. Därför är det viktigt att veta att HTML är strukturen på en hemsida medan CSS är presentationen. Det är inte bra att blanda dessa två programspråk. Behöver du ändock göra det så lägger du in dina CSS-koder i speciella kodavsnitt. Välkommen till första lektionen!

En introduktion till CSS. Vad är CSS?

CSS är en förkortning av Cascading Style Sheets – också kallad stilmallar. Det är ett dokument man använder som hjälp till att styra utseendet på sina sidor med, det vill säga CSS definerar hur vår HTML är tänkt att visas. Det finns 3 nivåer – CSS 1, CSS 2 respektive CSS 3. Flertalet brukar använda CSS 1 och 2 som bland annat formaterar text, bakgrunder, länkar, fonter och så vidare. CSS 2 används till placeringar av objekt på sidan, om man vill ha bestämda positioner i sitt innehåll. Dessa placeras ut med hjälp av X och Y – koordinater. Beträffande CSS 3 så är det relativt nytt. Än så länge stöder inte alla webbläsare CSS 3.

När du använder dig av stylesheets är det några viktiga punkter du bör veta, dels i vilken ordning som webbläsaren läser in din css och dels hur webbläsaren därefter prioriterar dina csskoder. Det första som händer när du får en besökare till din hemsida är att besökarens webbläsare gör en snabb avsökning om hur du har byggt upp hemsidan. Ditt doctype refererar då till de olika regler som rör programspråket (X)HTML med sina specifika cssvärden. Är fel doctype angivet eller om det helt enkelt saknas ett doctype så går webbläsaren in i något som kallas för quirks mode. Det betyder att varje webbläsare renderar HTML koderna utifrån deras grundinställningar – likaså att bakåtkompatibiliteten varierar. Med andra ord så får webbläsaren “gissa” sig till hur sidan är tänkt att presenteras vilket innebär att utseendet på din hemsida kan särskilja sig ganska rejält mellan de olika webbläsarna. HTML-koder som inte definierats med CSS får därför automatiskt varje webbläsarens defaultläge.

Inläsning av ett webbdokument

Först kontrollerar webbläsaren om det förekommer någon CSS, och den gör det enligt punkterna i följande schema:

  1. Har du ingen stilmall används webbläsarens grundläge
  2. Har du däremot en extern, länkad, stilmall prioriteras denna
  3. Har du dessutom csskoder inskrivna i sidans <head> på varje dokument prioriteras dessa
  4. Förekommer det därutöver csskoder i HTML-koderna, dvs inline style, prioriteras dessa

Du bör således vara aktsam på att ordningen för din css prioriteras baklänges. De csskoder som skrivs direkt in i html-koden har en högre priorietet trots att du kanske använder css kodavsnitt i <head> eller en extern stilmall. Det finns dock ett undantag från denna regel och det är att om du lägger in koden/länken till din externa stilmall absolut sist i din <head> så prioriteras denna före eventuella css kodavsnitt i <head>sektorn.

Sedan – hur en webbläsare avsöker koderna är därför inte riktigt samma sak som hur den prioriterar koderna. Enkelt förklarat kan man säga att webbläsaren läser först in koderna uppifrån och ned för att få en uppfattning om strukturen, därefter värderas koderna utifrån de regler som styrs av ditt doctype om hur sidan är tänkt att presenteras.

Att börja med CSS

Vi ska nu titta lite närmare på CSS. Här har vi tre olika sätt att använda oss av:

  1. Vi gör en extern stilmall som styr all formatering av hemsidans alla sidor
  2. Vi placerar en inbäddad css-kod i HTML-dokumentets metatagg <head> för att enbart formatera den specifika sidan</head>
  3. Vi skriver in en css-kod direkt i HTML-koden för att formatera en begränsad del av dokumentet

Vad man väljer är helt efter tycke och smak. Har man en stor hemsida med mycket text, eller där man tycker att man vill ha lite speciella “effekter” är en css-mall mycket behändig att ha. Fördelen är att man bara har ett dokument att ändra i, sedan kan man också skapa sig sina egna “effekter” allt eftersom man känner sig mer “hemma” inom css.

Inline, embedded och external css – tre sätt att använda css

Flertalet har med all säkerhet stött på dessa tre uttryck – inline, embedded och external. Dock är osäkerheten hög för vad detta egentligen innebär. På vilket vis dessa kan ta sitt uttryck ska vi nu gå igenom.

Inline css handlar egentligen om att skriva in sina cssvärden direkt i htmlkoden i ett webbdokument. Kika på följande kodning:

  1. <p style="margin: 20px;font-size:1em; font-color:#666;font-family:arial, verdana;">här kommer texten</p>

Som Du ser så går det utmärkt att göra detta förutsatt att du använder attributet style och inom detta anger din css utan klamrar.

Embedded css betyder att din css ska vara inbäddad i dokumentet och det gör du genom att infoga din css i dokumentets head. Ge akt på att du även här definierar din css med style-attributet men att du därefter skriver din css-syntax med klamrar.

  1. <style type="text/css">
  2. <!--
  3. p {
  4. margin: 20px;
  5. font-size:1em;
  6. font-color:#666;
  7. font-family:arial, verdana;}
  8. -->
  9. </style>

External css är all css som ligger utanför själva layouten men som kopplas till webb-dokumentet via en länk i head. Den ser ut så här i doctype för XHTML:

  1. <link href="stylel.css" rel="stylesheet" type="text/css" media="screen" />

Och i doctype för HTML så här:

  1. <link href="stylel.css" rel="stylesheet" type="text/css" media="screen">

Vilket alternativ är att föredra?

Inline css styr i detta fall endast det specifika stycket vilket innebär att du för varje stycke måste infoga ditt inlineelement om du vill att texten på alla dina stycken ska se likadan ut. Det innebär också om du gör om din sida och vill ändra på texten så måste du göra det precis överallt. Det tar mycket tid och arbete i anspråk. Därför är detta alternativ endast att föredra om det är något enskilt stycke du vill lyfta fram.

Embedded css styr hela den specifika sidan – men inte mer. Det innebär att du måste infoga koden i varje sidhuvud på varenda sida. Å andra sidan kan du med detta alternativ förändra en av sidorna men inte de andra – om du vill det.

External css är i mitt tycke det bästa alternativet av dem alla eftersom denna finns belägen utanför själva dokumentet. Du skapar en extern stilmall med all css du kommer att behöva för din hemsida, du slipper dessutom ha en massa css i varje dokument och har således delat på presentation och struktur redan här. Sen slipper du ju en massa merarbete eftersom det enbart är i din stilmall du gör dina ändringar som styr hela siten.

Vi gör en stilmall steg för steg

När du skapar en extern css-mall börjar du med att öppna upp dina anteckningar eller det du nu använder. Skapa ett nytt dokument som du t ex döper till style.css. OBS! Det är viktigt att du har rätt filändelse i dokumentet. Alla css-dokument ska ha filändelsen .css. Det första du skriver in är detta:

  1. html {font: 11px/150% arial,tahoma,Verdana, Helvetica, sans-serif;color:#000;}

Denna första kod berättar vilket typsnitt du vill använda på texten samt hur stor denna skall vara. Den säger också att du ska ha 150% mellan raderna vilket motsvara ett och ett halvt radavstånd. Här kan du också ange om du inte vill att sidan automatiskt ska formatera padding eller marginaler margin:0; padding:0; eftersom du kanske själv vill lägga till detta längre ned i stilmallen.

Det andra du fyller på med är detta:

  1. body { background:#DDC8A6 url('') repeat left top fixed;}

Dessa koder formaterar i tur och ordning, din bakgrundsfärg – #DDC8A6, din bakgrundsbild – url(’bgimage.gif’). Att den ska upprepas med början från vänstra översta hörnet- repeat left top – fixed – talar om att den ska vara fixerad.

Sist har vi formateringen av din rull-list. Där byter du till de färger du vill ha. OBS! Formateringen av scrollbaren är IE-specifik och fungerar inte i Firefox, mozilla och nyare webläsare.

  1. scrollbar-arrow-color: #000000;
  2. scrollbar-track-color: #DDC8A6;
  3. scrollbar-face-color: #DDC8A6;
  4. scrollbar-highlight-color: #DDC8A6;
  5. scrollbar-3dlight-color: #DDC8A6;
  6. scrollbar-darkshadow-color: #DDC8A6;
  7. scrollbar-shadow-color: #DDC8A6;

Det tredje du bygger på med är följande:

  1. p { font-family: arial,Verdana, Helvetica, sans-serif; font-size: 11px; letter-spacing: 1px; color: #000000}
  2. h1 { font: 12pt tahoma,verdana, arial, helvetica; color: #3A4A61; font weight: bold}
  3. h2 { font: 11pt tahoma,verdana, arial, helvetica; color: #3A4A61; font weight: bold}
  4. a:link { text-decoration: none; font: 11px tahoma,verdana,helvetica,sans-serif; font-style: normal; font-weight: normal; color:#3A4A61; letter-spacing:1px; cursor:default}
  5. a:visited { text-decoration:none; font: 11px tahoma,verdana,helvetica,arial; font-style: normal; font-weight: normal; color:#3A4A61; letter-spacing:1px; cursor:default}
  6. a:hover { font weight: normal; text-decoration: none; background:#B9B0AD; font-style: normal; color:#000000; letter-spacing:1px; font: 11px tahoma,verdana,helvetica,arial; cursor:default}
  7. a:active { text-decoration:none; font-weight: normal; color:#3A4A61; font-style: normal; letter-spacing:1px; font: 11px tahoma,verdana,helvetica,arial; cursor:default}

Jag utgår nu från att Du har läst lite om HTML-språkets vanliga attribut så du vet vad P respektive h1/h2 är. Det är i alla fall i dessa koder du ändrar teckensnitt, storlek, länkfärg, om du inte vill ha understrukna länkar, och så vidare. Letter-spacing betyder avstånd mellan varje bokstav. I detta fall är de satta till 1 pixel. Här kan du också ange points (pt) om du vill. Vill du dessutom ändra på höjden mellan bokstäverna använder du attributet line-height och anger dess värde i pixlar eller points (pt). Cursorn, dvs markören, ändrar en del utseende på. Det finns olika stilar, några exempel är:

  1. e-resize, w-resize, ne-resize, crosshair, hand, default, auto, n-resize, text, wait

Det är “klamrarna” som “håller ihop” hela dokumentet med sina koder. Skulle du själv vilja lägga till något ska alla formateringar ske mellan dessa klamrar { respektive } – det vill säga selektorerna. Objektet du ska formatera ställer du framför. Som i exemplet här där html är objektet:

  1. html {font: 11px/150% arial,tahoma,Verdana, Helvetica, sans-serif;color:#000;}

Detta var en kort enkel grund för hur man gör en extern stilmall. Men hur kopplar man den till alla sidor?

Jo, nu kommer det som är viktigt. På varje sida som du vill att css-mallen ska formatera måste du i head lägga till en länk som kallar på din css-mall. Vi säger att vi valde att döpa den till style.css. Då blir länken som anropar mallen denna, beroende på om du använder HTML eller XHTML som jag tidigare beskrev:

  1. <link rel="stylesheet" href="style.css" media="screen">
  2. <link rel="stylesheet" href="style.css" media="screen" />

Jag vill än en gång poängtera, denna länk läggs in i den vanliga html-koden på de sidor som ska formateras. Inte i css-dokumentet! Det ser då ut som följande enligt doctype HTML 4.01:

  1. <head>
  2. <title>UNTITLED</title>
  3. <link rel=stylesheet href=style.css type="text/css" media="screen">
  4. </head>

Att lägga in css-koden på varje webbsida

Skillnaden mellan att lägga css direkt i html-koden och att anropa den från en extern mall är som tidigare beskrivet hur du skriver “start”-koden. I detta fall så ska den läggas in på varje sida som ska formateras, men inte alla, och de som ska formateras kanske inte ska se likadana ut. Det du då behöver börja med är att skriva in detta i head:

  1. <style type="text/css">
  2. <!--

Vilket ger denna kod:

  1. <html>
  2. <head>
  3. <title>UNTITLED</title>
  4. <style type="text/css">
  5. <!--

Därefter bygger du på med samma attribut som i den andra css-mallen och avslutar med detta:

  1. -->
  2. </style>
  3. </head>

Koden i sin helhet ser då ut så här:

  1. <html>
  2. <head>
  3. <title>UNTITLED</title>
  4. <style type="text/css">
  5. <!--
  6. html {font: 11px/150% arial,tahoma,Verdana, Helvetica, sans-serif;color:#000;}
  7. body { background:#DDC8A6 url('') repeat left top fixed;}
  8. SCROLLBAR ÄR IE SPECIFIKT
  9. scrollbar-arrow-color: #000000;
  10. scrollbar-track-color: #DDC8A6;
  11. scrollbar-face-color: #DDC8A6;
  12. scrollbar-highlight-color: #DDC8A6;
  13. scrollbar-3dlight-color: #DDC8A6;
  14. scrollbar-darkshadow-color: #DDC8A6;
  15. scrollbar-shadow-color: #DDC8A6;
  16. p { font-family: arial,Verdana, Helvetica, sans-serif; font-size: 11px; letter-spacing: 1px; color: #000000}
  17. h1 { font: 12pt tahoma,verdana, arial, helvetica; color: #3A4A61; font weight: bold}
  18. h2 { font: 11pt tahoma,verdana, arial, helvetica; color: #3A4A61; font weight: bold}
  19. a:link { text-decoration: none; font: 11px tahoma,verdana,helvetica,sans-serif; font-style: normal; font-weight: normal; color:#3A4A61; letter-spacing:1px; cursor:default}
  20. a:visited { text-decoration:none; font: 11px tahoma,verdana,helvetica,arial; font-style: normal; font-weight: normal; color:#3A4A61; letter-spacing:1px; cursor:default}
  21. a:hover { font weight: normal; text-decoration: none; background:#B9B0AD; font-style: normal; color:#000000; letter-spacing:1px; font: 11px tahoma,verdana,helvetica,arial; cursor:default}
  22. a:active { text-decoration:none; font-weight: normal; color:#3A4A61; font-style: normal; letter-spacing:1px; font: 11px tahoma,verdana,helvetica,arial; cursor:default}
  23. -->
  24. </style>
  25. <head>

En del väljer att ha flera css-mallar kopplade till sina sidor . Det går alldeles utmärkt. Glöm då bara inte att döpa dessa mallar olika, ex style1.css – style2.css osv. Du kan även dela stilmallen som många av proffsen gör. Css är en kraftfull hjälp som kan göra hemsidorna mycket attraktiva och originella när man väl lärt sig att hantera och förstå grunderna.

Css-koden direkt i html-koden

Här behöver du inte lägga in css-koden i head utan du lägger in den i html-koden som berör det specifika området. Låt oss anta att du i ett enskilt stycke vill förändra både fonten och färgen. De attribut du då skriver in är:

  1. <p style="font-family:arial,tahoma; font-size:10 px; color:#000000; letter-spacing: 2px; line-height:15 px;"></p>

Vi ser här att vi börjar med vanliga metataggar i html-kod:

  1. <p style="

När vi sedan specificerar innehållet blir det annorlunda. I css skriver man inte ihop orden utan man delar dem, ex font-family. Specificeringen av objekten, eller grupperna som en del väljer att kalla dem, sker med ett semikolon ; I varje grupp angivs innehållet efter semikolon. Eftersom vi lägger in hela koden med dess attribut i själva html-koden avslutas den därför också med html-kodens slutattribut.

  1. ">

Självfallet kan du lägga in ett helt nytt divblock i formateringen. Då ändrar du bara till detta:

  1. <div style="float:left; width:100px; height:100px; padding:10px 10px; font-family:arial,tahoma; font-size:10 px; color:#000; letter-spacing: 2px; line-height:15 px;"></div>

Nu har du ett begränsat område på din sida med din nya font!

Välkommen till lektion 2 om funktion och syntax.

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 *