10 grundläggande lektioner i CSS

Hur fungerar egentligen CSS? Hur ser syntaxen ut? Hur länkar vi in en stilmall till hemsidan? Vad menas med allmänna cssmärkningar? Vad är fulhtml? Detta, och mycket mycket mer, får du lära dig i 10 grundläggande lektioner i CSS.

Översikt

Lektion 1

  1. En introduktion till CSS
  2. Inline, embedded och external css
  3. Vi gör en stilmall – steg för steg guide

Lektion 2

  1. Syntax
  2. Grupperingar och globala värden
  3. Class-selector
  4. ID-selector

Lektion 3

  1. font-family
  2. font-style
  3. font-variant
  4. font-weight
  5. font-size

Lektion 4

  1. text-indent
  2. text-decoration
  3. text-align
  4. text-transform
  5. letter-spacing
  6. line-height
  7. word-spacing
  8. textfärg och bakgrundsfärg på en text
  9. No-wrap, radbrytning och paginerade dokument

Lektion 5

  1. Bakgrundsfärg
  2. Bakgrundsbild
  3. Position, repeat, attachment

Lektion 6

  1. Borderstyle
  2. Bordercolor
  3. Borderwidth
  4. Mer avancerade lösningar för border

Lektion 7

  1. Margin och padding

Lektion 8

  1. Unordered list – oordnade listor
  2. Ordered lists – ordnade listor
  3. List bullets – använd en bild
  4. Definierade listor

Lektion 9

  1. Grupperingar med div
  2. Grupperingar med ID
  3. Grupperingar med class
  4. grupperingar med span

Lektion 10

  1. Pseudo-class
  2. Parent och first-child – genealogin

Author: Lena

Lena är en riktig web geek med sikte mot web standards. Hon har både fått utmärkelsen Årets WebQueen som att ha blivit omskriven för sina insatser på nätet. Hennes stora intresse är gränssnitt. Lena är gränssnitt- front end designer och har studerat design, gränssnitt, tillgänglighet, användbarhet och web standards på Blekinge Tekniska Högskola.

5 svar på “10 grundläggande lektioner i CSS”

  1. 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. det ska alltså stå ”krokodilgap höger P krokodilgap” vänster i meningen: ”…text som är skriven innom (krokogapPkrokogap) i mina html doc.

    2. 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. 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. 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

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *