På den här sidan hittar du de vanligaste CSS-egenskaperna. Även om listan inte är helt komplett är detta mer än vad som använts för att bygga Webbdesigna.se. Listan bör vara tillräcklig för dig som är nybörjare.

I exemplen nedan utgår vi ifrån att deklarationen skrivs som extern CSS.

Snabblänkar: Font och text | Marginal | Padding | Dimension | Background | Border | List | Klassifikation | Positionering

Egenskaper för font och text

Font-family
Skapar en prioritetsordning av vilken font som ska användas på ett element. Om den fonten inte finns i besökarens dator så provas nästa tills en lämplig font har hittats.

Värden:
Arial, Helvetica, sans-serif
"Times New Roman", Times, serif
"Courier New", Courier, monospace
Georgia, "Times New Roman", Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Exempel:

body {font-family: Verdana, Arial, Helvetica, sans-serif;}

Font-size
Anger teckenstorleken

Värden (de enda viktiga):
em
px

Exempel:

p {font-size: 12px;}

Font-style
Anger om du vill att texten ska ha en speciell stil.

Värden:
normal
italic
oblique

Exempel:

.special {font-style: italic;}

".special" är en class - följ länken för att repetera!

Font-weight
Anger vikten/tjockleken på ett teckensnitt.

Värden:
Normal
Bold
Bolder
Lighter
100 - 900 (Stöds ej i någon webbläsarenär detta skrivs)

Exempel:

.fatso {font-weight: bold;}

Egenskaper för marginaler

Margin
Förkortning av alla egenskaper av margin i ordningen margin-top, margin-right, margin-bottom, margin-left.

Värden:
margin-top (toppmarginal)
margin-right (högermarginal)
margin-bottom (bottenmarginal)
margin-left (vänstermarginal)

Exempel:

p {margin: 10px 20px 15px 10px}

Margin-top, margin-right, margin-bottom, margin-left
Anger marginalen för vald sida på ett element.

Värde:
Auto
Längd (px)
%

Exempel:

p {margin-left: 20px; margin-bottom: 30px;}
div#wrapper {margin-left: auto; margin-right: auto; width: 750px;

Egenskaper för padding

Padding-top
Padding-right
Padding-bottom
Padding-left

Beskrivning: Anger vilken kant på elementet som du vill formatera med padding.

Värden:
px

Exempel:

p {padding-left; 5px; padding-bottom: 10px;}

Padding
En kortform av varianten som visades tidigare för att skapa padding för alla sidor i ett enda uttryck. Värdena sätts då i ordningen topp, höger, botten vänster.

Värden:
padding

p {padding: 2px 5px 2px 5px;}

Egenskaper för dimensioner

Height
Anger höjden på ett element

Värden:
auto
längd (px, em)

Exempel:

div#bannerholder {height: 62px;}

Line-height
Anger radavståndet

Värden:
normal
längd (px, em)

Exempel:

p {line-height: 1.2em;}

div#huvudtext {line-height: 12px;}

Width
Anger bredden på ett element.

Värden:
auto
längd (px, em)

Exempel:

div#artikelText {width: 550px;}
div#sidoMeny {width: 200px;}

Egenskaper för background

Background-color
Anger bakgrundsfärgen för ett element

Värden:
Färg i hexadecimal kod
Färgnamn

Exempel:

p {background-color: #CCCCCC;}
div#red {background-color: red;}

Background-image
Väljer en bild som bakgrund.

Värden:
URL
none

Bildformat:
.jpg
.gif
.png

Exempel:

div#header {background-image: url(../images/background.gif;}

Background-repeat
Anges hur och om du vill att bakgrundsbilden ska upprepas. Upprepning används ofta för att skapa mönster som bygger på en liten och lättladdad bild och för att skapa snygg deisng utan att behöva ladda stora bilder.

Värden:
repeat
repeat-x
repeat-y
no-repeat

Exempel:

div#container {background-image: url(../images/background.gif; background-repeat: repeat-y;}

Egenskaper för border

Border
En kortform för att ange alla egenskaper för fyra kantlinjer i en enda deklaration i ordningen border-style, border-width och border-color.

Värden:
border-width ( bredd på kantlinje i pixlar)
border-style (typ av kantlinje)
border-color (färg på kantlinje med hexadecimal kod eller färgnamn)

Exempel:

p {border: 2px solid red;}
p {border: 2px solid #CCCCCC;}

Style, width och color
Du kan välja att formatera kantlinjer i ett enda uttryck. För att göra det så skriver du "border-top", "border-right", "border-bottom" eller "border-left" följt av värden för style, width och color.

Exempel

p {border-left: solid 2px red}

Style
Anger vilken typ av kantlinje som du vill ha på elementet.

Värden (viktigaste):
none
dotted (prickad linje - fungerar ej i Internet Explorer)
solid (heldragen linje)

Width
Anger bredden på kantlinjen.

Värden:
längd (px, em)

Color
Färg på kantlinjen

Värden:
Läs mer:
Hexadecimal färgkod
Färgnamn

Exempel:

p {border-top: solid 2px gray;}

Detta är resultatet

Egenskaper för listor

List-style-position
Anger om du vill ha tecknet för listan placerat innanför eller utanför "listboxen".

Värden:
inside
outside

Exempel:

ul {list-style-position: inside;}

Skapar en lista som ser ut så här...(hjälplinje för illustration):

  • Listelement 1
  • Listelement 2
  • Listelement 3

ul {list-style-position: outside;}

...medan denna kod skapar en lista som ser ut så här:

  • Listelement 1
  • Listelement 2
  • Listelement 3

List-style-type
Anger vilket typ av listtecken som ska stå framför listan.

Värden:
none
disc
circle
square
m.fl.
(Listor har även ett "default" listtecken som används om du inte väljer någon särskild formatering.

Exempel:

ul {list-style-type: circle;}

Egenskaper för klassifikation

Clear
Anger ett område där det inte får finnas några flytande element.

Värden:
left
right
both
none

Exempel:

p {clear:left;}

Display
Anger om elementet ska visas som ett inline- eller blockelement. Ett exempel med display togs upp i ett tidigare kapitel i CSS-guiden.

Värden:
none
block
inline

Float
Används bland annat för att låta text flyta runt bilder istället för att lägga sig under eller längst ner till höger efter bilden.

Värden:
left
right
none

Exempel:

img {float:left}

Position
Anger om du vill placera ett element i en statisk, absolut eller fixerad position.

Värden:
(static)
relative(position i relation till det föregående elementet i px eller em)
absolute (position i förhållande till body-taggen)
fixed (position i förhållande till webbläsarfönstret)

Egenskaper för positionering

Bottom
Anger hur långt ovanför nedre kanten som ett element ska befinna sig från föräldraelementet (parent).

Värden:
auto
%
längd (px, em)

Left ( Samma som ovan men vänster kant)
Right ( Samma som ovan men höger kant)
Top ( Samma som ovan men övre kant)

Position
Välj om du vill att ett element ska ha statisk, aboslut eller relativ position.

Värden:
(static)
relative
absolute
fixed

Att använda hemsideprogram som exempelvis Dreamweaver underlättar användandet av egenskaper eftersom programmet ger förslag på de valmöjligheter som finns.

Hitta ett billigt webbhotell för din hemsida

12:-/mån
One Webbhotell Betyg
15:-/mån
Web10 Webbhotell Betyg
36:-/mån
Host Gator Webbhotell Betyg
36:-/mån
Surftown Webbhotell Betyg

Snabbguider

Nedanför finns information för dig som vill komma igång med en hemsida på snabbast möjliga sätt - utan fokus på webbspråk.

Ett litet "gilla" är också ett sätt att hjälpa sajten. =)