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

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 *