10 grundläggande lektioner i CSS

Genom att använda en border och formatera den med css kan man få snygga effekter på hemsidan.

Border

Vi ska nu gå igenom hur man kan använda en border, dock bör du tänka på följande: du måste använda egenskapen border-style tillsammans med border-width eller border-color för att det ska fungera.
Css-syntax för en border:

  1. border-style: solid;
  2. border-color:#333;

Css-syntax för border och width:

  1. border-style: solid;
  2. border-width: 5px;

Css-syntax för border och width och färg:

  1. border-style: solid;
  2. border-width: 5px;
  3. border-color: #333;

Som shorthand declaration skulle css-syntaxen för ovanstående exempel se ut så här:

  1. vald selektor {border: 5px solid #333;}

Borderstyle

Det finns ett flertal olika utseenden och vi ska nu titta på var och en av dessa och deras css-syntax.

border-style:solid;

border-style:dotted;

border-style:dashed;

border-style:ridge;

border-style:double;

border-style:inset;

border-style:outset;

border-style:groove;

Bordercolor

Genom att sätta färg på sin border så kan det höja utseendet markant. Du kan använda vilka värden du vill, antingen hexadecimalt såsom #11 22 33 eller värde i text såsom “black” eller rgb-skalans enheter som rgb(123,123,123). CSS-syntax:

  1. border-color: #11 22 33;
  2. border-color: black;
  3. border-color: rgb(123,123,123);

Borderwidth

Man kan även ställa in bredden på sin border. Här är några exempel:

10px 5px 15px 25px

Css-syntax:

  1. border-width: 10px;
  2. border-width: 5px;
  3. border-width: 15px;
  4. border-width: 25px;

Man kan även ange värdet: thin eller thick.

Egenskaper för border (kantlinje)

border
kan anges med följande värden: border, border-top, border-right, border-bottom, border-left
border-width
anger bredden på kantlinjen, kan även användas som värde på respektive border ex: border-top-width
border-style
anger stilen på bordern med följande värden: solid, dashed, inset, outset, ridge, double, groove, none. Man kan även ge varje kantlinje sitt eget värde, ex: border-top:dotted; border-left:solid;
border-color
anger färgen på alla kantlinjer med värdet: border-color:#000;. Man kan även ge varje kantlinje sin egen färg, ex border-left-color

Mer avancerade lösningar för border

Det går att variera utseendet på en och samma border, både med färger, storlek och utseende. Vi ska titta lite närmare på detta men också gå igenom hur vi skriver värdet i egenskaperna för en border som shorthand declaration för att optimera vår stilmall från en massa onödiga koder.

Olika färger på borderns sidor

Låts oss säga att du vill ha lite olika färger på din border, då har du fyra alternativ.

På en sida

Ofta skrivs egenskaperna för detta alternativ ut på följande traditionella vis:

  1. border-width: 5px;border-style: solid; border-left-color: #ccc;
  2. border-width: 5px;border-style: solid; border-top-color: #333;
  3. border-width: 5px;border-style: solid; border-right-color: #333;
  4. border-width: 5px;border-style: solid; border-bottom-color: #333;

Eller:

  1. vald selektor {border-width: 5px;border-style: solid; border-left-color: #ccc; border-top-color: #333; border-right-color: #333; border-bottom-color: #333;}

Det är massa koder, och en del definitivt onödiga koder. Vi ska istället dela på egenskaperna för att optimera vår stilmall och använda shorthand declaration där det går istället. Samma koder för border på en sida ser då ut så här:

  1. border-style: solid;
  2. border-width: 5px;
  3. border-left-color: #ccc;

Eller:

  1. vald selektor {border-width: 5px;border-style: solid; border-left-color: #ccc;}

När ska färglägga två sidor så använder vi shorthand för just border-color istället för att ange respektive sida. Kika här:

På två sidor

  1. border-style: solid;
  2. border-width: 5px;
  3. border-color: #ccc #333;

Eller:

  1. vald selektor {border-width: 5px;border-style: solid; border-color: #ccc #333;}

Som ni ser så behöver vi inte definera vilken sida det är som ska ha en annan färg mer än i border-color eftersom webbläsaren först läser in #ccc som innebär border-top respektive border-bottom. Därefter läser den in färgen #333 som då motsvarar de andra två sidorna, border-left och border-right. Man kan ytterligare lägga till färger i shorthand om det är tre sidor man vill förändra.

På tre sidor

  1. border-style: solid;
  2. border-width: 5px;
  3. border-color: #ccc #999 #333;

Eller:

  1. vald selektor {border-width: 5px;border-style: solid; border-color: #ccc #999 #333;}

Shorthand för border-color anger här dessa egenskaper: border-top:#ccc; border-bottom:#333; border-left och border-right:#999;

Slutligen så har vi det sista alternativet kvar och det är om du vill ha olika färger på alla sidor.

På fyra sidor

  1. border-style: solid;
  2. border-width: 5px;
  3. border-color: #ccc #999 #333 #fff;

Eller:

  1. vald selektor {border-width: 5px;border-style: solid; border-color: #ccc #999 #333 #fff;}

Shorthand för border-color anger här dessa egenskaper: border-top:#ccc; border-right:#999;border-bottom:#333; border-left:#fff;

Vi blandar stil färg och storlek

För att visa hur mycket man kan göra med en enda border så har jag lagt in flera olika värden i egenskaperna. Se själv.

Olika stilar

  1. border-style: solid dotted dashed;
  2. border-width: 5px;
  3. border-color: #ccc blue #333 red;

Eller:

  1. vald selektor {border-width: 5px;border-style: solid dotted dashed; border-color: #ccc blue #333 red;}

Shorthand för border-color anger här dessa egenskaper: border-top:#ccc; border-right:blue;border-bottom:#333; border-left:red;

Shorthand för border-style anger här dessa egenskaper: border-top:solid; border-right och border-left:dotted; border-bottom:dashed;

Positionera border-top, bottom, right eller left

Vi kan ju också ange var vi vill att vår border ska positioneras. Här är några exempel:

Border-bottom

Border-top

Border-left

Border-right

  1. border-bottom-style:solid; border-color: #ccc; border-width: 5px;
  2. border-top-style:double; border-color: blue; border-width: 5px;
  3. border-left-style:dashed; border-color: #000; border-width: 5px;
  4. border-right-style:dotted; border-color: red; border-width: 5px;

Hos W3C kan du också läsa om egenskaperna för en border.
I lektion nummer 7 kommer vi att gå igenom margin och padding. 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 *