10 grundläggande lektioner i CSS
10 grundläggande lektioner om css stilmall syntax. Hur fungerar egentligen CSS? Hur länkar vi in en stilmall till hemsidan? Hur ser syntaxen ut? Vad menas med allmänna cssmärkningar? Vad är fulhtml?
Detta, och mycket mycket mer, får du lära dig i guiden 10 grundläggande lektioner om CSS.
CSS PreProcessors som SaSS och LeSS berörs inte i denna guide.
Denna post innehåller kod-snippar som du kan använda. Det är alltid bra att ta en backup av din stilmall innan.
Översikt
Lektion 1
- En introduktion till CSS
- Inline, embedded och external css
- Vi gör en stilmall – steg för steg guide
Lektion 2
- syntax
- grupperingar och globala värden
- class-selector
- ID-selector
Lektion 3
- font-family
- font-style
- font-variant
- font-weight
- font-size
Lektion 4
- text-indent
- text-decoration
- text-align
- text-transform
- letter-spacing
- line-height
- word-spacing
- textfärg och bakgrundsfärg på en text
- No-wrap, radbrytning och paginerade dokument
Lektion 5
- Bakgrundsfärg
- Bakgrundsbild
- Position, repeat, attachment
Lektion 6
- Borderstyle
- Bordercolor
- Borderwidth
- Mer avancerade lösningar för border
Lektion 7
- Margin och padding
Lektion 8
- Unordered list – oordnade listor
- Ordered lists – ordnade listor
- List bullets – använd en bild
- Definierade listor
Lektion 9
- Grupperingar med div
- Grupperingar med ID
- Grupperingar med class
- grupperingar med span
Lektion 10
- Pseudo-class
- Pseudo-element
- Parent och first-child – genealogin
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
det ska alltså stå ”krokodilgap höger P krokodilgap” vänster i meningen: ”…text som är skriven innom (krokogapPkrokogap) i mina html doc.
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:
Eller:
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
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!
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