CSS-egenskapslista

Här är en lista på de flesta CSS-egenskaperna. Då CSS är en ständigt föränderlig standard (eller snarare flera delstandarder), täcker inte denna lista varenda liten egenskap som finns tillgänglig. Dock så bör detta vara ett bra urval.

Det finns även en hel del CSS-egenskaper som är specifika för olika webbläsare. Generellt sett bör man undvika att använda sig av dessa och hålla sig till de som är standardiserade. Då blir din webbsida mer framtidssäker och mer tillgänglig för dina användare.

A

align-content

Styr hur innehållet i flexboxar ska läggas ut när det inte får plats på en enda rad. Påverkar enbart om flex-wrap: wrap gäller för flexbehållaren. Se flexbox grunder och avancerad flexbox för mer information.

align-items

Justerar hur en flexbehållares innehåll placeras ut längs med korsaxeln. Se flexbox grunder och avancerad flexbox för mer information och specifikt detta.

align-self

Styr hur ett individuellt flexföremål ska placeras ut längs med korsaxeln. Används oftast då man vill undanta ett element från det som satts med align-items. Se flexbox grunder och avancerad flexbox för mer information och specifikt detta.

all

Nollställer alla egenskaper, förutom direction och unicode-bidi.

animation

Samlingsegenskap som används för att sätta de flesta animationsegenskaper samtidigt.

animation-delay

Anger hur lång tid som ska förflyta innan animationen börjar spelas.

animation-direction

Anger om animationen ska spelas baklänges varannan cykel (pingpong-animation).

animation-duration

Anger hur lång tid en animationscykel ska ta.

animation-fill-mode

Anger på vilket sätt de animerade egenskaperna ska sättas på elementet, såväl före som efter animationen körs.

animation-iteration-count

Anger hur många gånger en animation ska spelas upp innan den avslutas helt.

animation-name

Anger namnet på en animationssekvens.

animation-play-state

Anger om en animation spelas upp eller om den är stoppad.

animation-timing-function

Anger vilken tidsfunktion som ska användas när en en animation spelas upp.

B

background

En samlingsegenskap som sätter alla värden som har med bakgrunden att göra.

background-attachment

Anger om en bakgrund ska fixeras eller om den ska skrollas med.

background-blend-mode

Anger hur utritningen av en bakgrund ska mixas med annat material. Fungerar ungefär som Photoshops blendmodes.

background-clip

Anger om bakgrunden ska sträcka sig in under eventuell kantlinje eller ej.

background-color

Används för att ändra bakgrundsfärgen på ett element.

background-image

Anger en bild som ska användas som bakgrund.

background-origin

Anger var någonstans i en bild som bakgrunden ska hämtas. Används om man vill ha en viss bit ur en större bild.

background-position

Anger var i elementet bakgrunden ska placeras ut.

background-repeat

Anger om en bakgrund ska repeteras eller ej.

background-size

Storleken på eventuell bakgrund.

border

Används för skapa en kantlinje runt ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjer att göra (förutom border-radius och border-image).

border-bottom

Används för skapa en kantlinje på botten av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.

border-bottom-color

Används för att sätta linjefärgen på en kantlinje på botten av ett element.

border-bottom-left-radius

Används för att sätta skapa ett rundat hörn på ett element, i detta fall det nedre, vänstra hörnet.

border-bottom-right-radius

Används för att sätta skapa ett rundat hörn på ett element, i detta fall det nedre, högra hörnet.

border-bottom-style

Används för att sätta linjetyp på en kantlinje på botten av ett element.

border-bottom-width

Används för att sätta bredden på en kantlinje på botten av ett element.

border-collapse

Anger hur kanterna i tabellelement ska falla samman.

border-color

Används för att sätta linjefärgen på en eller flera kantlinje på ett element.

border-image

En samlingsegenskap som används för att sätta allt som har att göra med grafik i kantlinjer.

border-image-outset

Anger hur långt utanför kantlinjen som grafiken ska sticka ut.

border-image-repeat

Anger om grafiken i en kantlinje ska repeteras eller ej.

border-image-slice

Ange om grafiken för en kantlinje ska använda sig av så kallad nine-slice.

border-image-source

Anger URL:en som leder till grafiken för en kantlinje.

border-image-width

Anger bredden på grafiken för en kantlinje.

border-left

Används för skapa en kantlinje på vänsterkanten av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.

border-left-color

Används för att sätta linjefärgen på en kantlinje på vänstersidan av ett element.

border-left-style

Används för att sätta linjetyp på en kantlinje på vänstersidan av ett element.

border-left-width

Används för att sätta bredden på en kantlinje på vänstersidan av ett element.

border-radius

Används för att sätta skapa rundade hörn på ett element.

border-right

Används för skapa en kantlinje på högerkanten av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.

border-right-color

Används för att sätta linjefärgen på en kantlinje på högersidan av ett element.

border-right-style

Används för att sätta linjetyp på en kantlinje på högersidan av ett element.

border-left-width

Används för att sätta bredden på en kantlinje på högersidan av ett element.

border-top

Används för skapa en kantlinje på toppen av ett element. Detta är en samlingsegenskap med vilken man kan ange alla egenskaper som har med kantlinjen att göra.

border-style

Används för att sätta linjetypen på en eller flera kantlinje på ett element.

border-top-color

Används för att sätta linjefärgen på en kantlinje på toppen av ett element.

border-top-left-radius

Används för att sätta skapa ett rundat hörn på ett element, i detta fall det övre, vänstra hörnet.

border-top-right-radius

Används för att sätta skapa ett rundat hörn på ett element, i detta fall det nedre, högra hörnet.

border-top-style

Används för att sätta linjetyp på en kantlinje på toppen av ett element.

border-left-width

Används för att sätta bredden på en kantlinje på toppen av ett element.

border-width

Används för att sätta linjebredden på en eller flera kantlinje på ett element.

bottom

Anger var den botten på ett element ska placeras. Hur detta tolkas varierar med vilken typ av position som angetts för elementet.

box-shadow

Används för att skapa en, eller flera, skuggor kring en box.

box-sizing

Väljer vilken boxmodell som ska gälla för ett blockelement.

break-after

Anger om det ska ske en brytning efter ett skapat element.

break-before

Anger om det ska ske en brytning före ett skapat element.

break-inside

Anger om det ska ske brytningar ska kontrolleras inuti ett skapat element.

C

caption-side

Anger var en illustrations bildtext ska placeras.

clear

Anger om flytande element ska ligga mot varandra eller ej. Se Layout för mer info.

clip-path

Klipper ut en del av ett element så det inte visas. Kan användas för att åstadkomma andra former än rent rektangulära regioner.

color

Används för att ändra förgrundsfärgen på ett element. Mestadels är detta för att förändra textfärgen, men även andra egenskaper påverkas...

content

Används tillsammans med ::before och ::after för att lägga till innehåll i dessa.

counter-increment

Används för att öka en CSS-räknare med ett angivet värde.

counter-reset

Används för att nollställa en CSS-räknare.

cursor

Anger vilken typ av cursor som ska användas i ett element.

D

direction

Anger i vilken riktning innehåll ska läggas ut, speciellt gäller detta för text. Vi kan sätta om texten ska ritas ifrån vänster till höger, dvs "vanlig" text eller om den ska ritas ut ifrån höger till vänster, t.ex. om det är arabiska.

display

Anger vilken layouttyp ett element ska ritas ut med. I de enklaste fallen kan det vara om ett element är ett blockelement eller ett inlineelement.

E

empty-cells

Anger hur tomma celler i en tabell ska hanteras.

F

filter

Anger ett grafikfilter för ett element. Kan användas för att t.ex. göra innehållet i ett element suddigt.

flex

En samlingsegenskap för att sätta flex-basis, flex-grow och flex-shrink på en och samma gång.

flex-basis

Anger startstorleken på ett flexelement. Se Flexbox - sätta storlek för mer info.

flex-direction

Anger i vilken riktning flexaxeln ska gå. Se Flexbox - sätta riktning för mer info.

flex-flow

En samlingsegenskap för att sätta flex-direction och flex-wrap på en och samma gång.

flex-grow

Anger hur mycket ett flexelement ska växa till sig i förhållande till andra flexelement. Se Flexbox - sätta storlek för mer info.

flex-shrink

Anger hur mycket ett flexelement ska krympa i förhållande till andra flexelement. Se Flexbox - sätta storlek för mer info.

flex-wrap

Anger hur en flexbehållare ska bete sig när det blir "fullt" på flexaxeln. Ska innehållet delas upp på flera rader/kolumner? Se Flexbox - flexbehållare med flera rader för mer info.

float

Anger om ett element ska vara flytande och hur det i så fall ska positioneras. Det traditionella sättet på vilket man skapar layout i CSS. Se layout för mer info. Flexbox är ett modernare och bättre sätt på vilket man kan skapa layout.

font

En samlingsegenskap som kan användas för att sätta många av värdena som har med teckensnitt att göra.

font-family

Anger vilket teckensnitt som ska användas i ett element.

font-feature-settings

Används för att styra egenskaper hos OpenType-teckensnitt.

font-kerning

Anger för att styra hur mellanrummet mellan bokstäver hanteras.

font-language-override

Används för att hantera tecken som är specifika för speciella språk.

font-size

Anger vilken storlek som teckensnittet i ett element ska ha.

font-size-adjust

Anger om storleken på ett teckensnitt ska baseras på dess versaler eller dess gemena (stora/små bokstäver).

font-stretch

Används för att välja mellan olika typer i ett teckensnitt.

font-style

Används för att ändra mellan olika teckensnittsstilar, t.ex. kursiv.

font-synthesis

Kontrollerar hur och om webbläsaren ska "skapa" tecken som saknas i ett teckensnitt.

font-variant

En samlingsegenskap som används för att ange värden för alla egenskaperna av typen font-variant-*.

font-variant-alternates

Anger hur alternativa tecken som definerats med @font-feature-values ska hanteras.

font-variant-caps

Anger hur versala (stora) bokstäver ska hanteras.

font-variant-east-asian

Anger hur asiatiska tecken ska hanteras.

font-variant-ligatures

Används för att ange hur sammanbundna tecken, dvs ligaturer, ska hanteras.

font-variant-numeric

Används för att ange hur tecken för siffror ska hanteras.

font-variant-position

Anger hur alternativa tecken ska placeras i förhållande till de "vanliga" tecknen.

font-weight

Anger hur tjockt ett teckensnitt ska återges.

H

height

Används för att ange höjden på ett blockelement. Fungerar lite olika beroende på vilken boxmodell man valt.

hyphens

Anger hur "-"-tecknet ska hanteras när ord bryts.

I

isolation

Anger om det ska skapas ett nytt stacking context för ett element.

J

justify-content

Justerar hur en flexbehållares innehåll placeras ut längs med flexaxeln. Se flexbox grunder och avancerad flexbox för mer information och specifikt detta.

L

left

Anger hur den vänstra hörnet ska placeras på ett positionerat element.

letter-spacing

Anger hur mycket utrymme som ska vara mellan varje bokstav.

line-height

Anger höjden på textrader.

list-style

En samlingsegenskap för list-style-type, list-style-image och list-style-position.

list-style-image

Anger en bild som ska användas för att markera innehållsraderna i en lista.

list-style-position

Anger var innehållsmarkeringen ska placeras i en lista.

list-style-type

Anger hur vilken typ av innehållsmarkering som ska användas i en lista.

M

margin

Anger hur mycket yttermarginal ett element ska ha. Detta är en samlingsegenskap med vilken man kan sätta marginalerna för alla sidor på samma gång. Se även boxmodellen för mer information.

margin-bottom

Anger den nedre yttermarginalen på ett element.

margin-left

Anger den vänstra yttermarginalen på ett element.

margin-right

Anger den högra yttermarginalen på ett element.

margin-top

Anger den övre yttermarginalen på ett element.

marks

Anger klippningsmarkeringar på ett dokument.

mask

Anger att enbart vissa delar av ett element ska visas.

mask-type

Anger vilken typ av mask en SVG-mask är.

max-height

Anger den maximala höjden på ett element.

max-width

Anger den maximala bredden på ett element.

max-zoom

Anger hur mycket användaren maximalt ska kunna zoom in.

min-height

Anger den minimala höjden på ett element.

min-width

Anger den minimala bredden på ett element.

min-zoom

Anger vad som är den minsta inzoomning som användaren ska få utföra.

mix-blend-mode

Anger hur ett element ska blandas med innehållet som ligger under det. Påminner om PhotoShops blendmodes.

N

negative

Används med CSS-räknare för bestämma hur negativa tal ska visas.

O

object-fit

Anger hur ett objekts storlek ska justeras gentemot föräldraelementet.

object-position

Anger hur ett objekts position ska justeras gentemot föräldraelementet.

opacity

Anger hur genomskinligt ett element ska vara. Detta påverkar allt innehåll i elementet.

order

Anger i vilken ordning ett "flexibelt" element ska placeras i förhållande till övriga flexibla element.

orientation

Anger hur ett dokument ska vara orienterat i förhållande till viewport. Används främst för surfplattor/telefoner.

orphans

Anger det minimala antalet rader som ska vara kvar i slutet på ett blockelement. Används främst för att styra sidbrytningar.

outline

Anger att man vill att det ska ritas en konturlinje kring ett element. Detta påminner om kantlinjer, men är till för att dra uppmärksamheten till sig och visa att något är speciellt med elementet. Detta är en samlingsegenskap där alla outline-egenskaper går att sätta samtidigt.

outline-color

Anger färgen på konturlinjen kring ett element.

outline-offset

Anger hur långt ifrån elementet konturlinjen ska ritas.

outline-style

Anger med vilken linjetyp konturlinjen ska ritas, t.ex. streckad eller heldragen.

outline-width

Anger bredden på konturlinjen.

overflow

Anger vad som ska hända om innehållet i elementet flödar över/hamnar utanför. Om man t.ex. vill få upp en scrollbar eller liknande. Detta är en samlingsegenskap som gäller såväl horisontellt som för vertikalt.

overflow-x

Anger vad som ska hända om innehållet i elementet flödar över/hamnar utanför i X-led. Om man t.ex. vill få upp en scrollbar eller liknande.

overflow-y

Anger vad som ska hända om innehållet i elementet flödar över/hamnar utanför i Y-led. Om man t.ex. vill få upp en scrollbar eller liknande.

P

padding

Anger hur mycket utfyllnad ett element ska ha. Detta är en samlingsegenskap med vilken man kan sätta utfyllnaden för alla sidor på samma gång. Se även boxmodellen för mer information.

padding-bottom

Anger hur mycket utfyllnad som ska finnas i botten av ett element. Se även boxmodellen för mer information.

padding-left

Anger hur mycket utfyllnad som ska finnas på vänstra sidan av ett element. Se även boxmodellen för mer information.

padding-right

Anger hur mycket utfyllnad som ska finnas på högra sidan av ett element. Se även boxmodellen för mer information.

padding-top

Anger hur mycket utfyllnad som ska finnas i toppen av ett element. Se även boxmodellen för mer information.

page-break-after

Anger om en sidbrytning ska läggas till efter ett element. Elementet kan inte vara tomt eller positionerat.

page-break-before

Anger om en sidbrytning ska läggas till före ett element. Elementet kan inte vara tomt eller positionerat.

page-break-inside

Anger om en sidbrytning får förekomma inuti ett element. Elementet kan inte vara tomt eller positionerat.

perspective

Används för att styra perspektivet på 3D-element.

position

Används för att styra vilken typ av positionering ett element ska ha.

perspective-origin

Används för att styra perspektivet på 3D-element.

Q

quotes

Anger vilken typ av citationstecken som ska användas för citat.

R

resize

Anger om ett elements storlek ska kunna ändras av användaren.

right

Anger var den högra kanten på ett element ska placeras. Hur detta tolkas varierar med vilken typ av position som angetts för elementet.

T

table-layout

Anger vilken algoritm som ska användas för att skapa layouten för en tabell.

tab-size

Anger hur stort utrymme ett tabb-tecken ska uppta.

text-align

Anger hur elementet ska placeras horisontellt i relation till andra element.

text-align-last

Anger hur den sista textraden i ett elementet ska placeras horisontellt i relation till andra element.

text-decoration

Används för att sätta olika typer av textstilar, såsom t.ex. understrykning. Detta är en samlingsegenskap som kan användas för att sätta alla text-decoration-egenskaperna på en gång.

text-decoration-color

Anger färg på understrykningar och liknande textutsmyckningar.

text-decoration-line

Anger vilken typ av linje som ska läggas till på en text, t.ex. en understrykning.

text-decoration-style

Anger vilken typ av linje som ska läggas till på en text, t.ex. dotted för en punkt-linje.

text-indent

Anger hur den första textraden i ett stycke ska indenteras.

text-justify

Anger hur ett text stycke ska justeras, t.ex. center-justering eller höger-justering.

text-overflow

Anger hur text som flödar ut ur ett element ska hanteras, t.ex. om den ska klippas av och inte visas.

text-shadow

Anger en, eller flera textskuggor.

text-transform

Anger om en text ska omvandlas så den visas med t.ex. enbart versaler.

top

Anger var den toppen på ett element ska placeras. Hur detta tolkas varierar med vilken typ av position som angetts för elementet.

transform

Anger hur ett objekt ska förflyttas, roteras, skalas osv.

transform-box

Anger en layoutbox, som tjänar som referenspunkt för en transform.

transform-origin

Anger utifrån vilken punkt en transform ska beräknas, t.ex. om man vill sätta en bestämd rotationspunkt.

transform-style

Anger om transformationer ska vara 2D eller 3D.

transition

En samlingsegenskap som används för att sätta allt som har med övergångar att göra.

transition-delay

Anger hur lång tid det ska ta innan övergången körs igång.

transition-duration

Anger hur lång tid en övergång ska ta.

transition-property

Anger vilka egenskaper som ska påverkas av en övergång.

transition-timing-function

Anger vilken tidsfunktion som ska kontrollera en övergång.

U

unicode-bidi

Anger hur sidan ska hantera text som är skriven i olika riktningar, t.ex. om man blandar arabiska och svenska på samma sida.

unicode-range

Anger vilket spann av unicode-tecken som ska laddas ner.

V

vertical-align

Anger hur ett element av typen inline eller table-cell ska placeras vertikalt i relation till dess föräldraelement.

visibilty

Anger om ett element är synligt eller ej. Även om det inte är synligt så tar det upp plats i sidan.

W

white-space

Anger hur white space (dvs, mellanslag, tabs, return osv) ska hanteras i ett element.

width

Används för att ange bredden på ett blockelement. Fungerar lite olika beroende på vilken boxmodell man valt.

will-change

Talar om för webbläsaren att ett element antagligen kommer att förändras på något vis, t.ex. animeras eller något liknande.

word-break

Anger hur ord ska avstavas när en rad blir för lång.

word-spacing

Anger storleken på mellanrummet mellan ord.

word-wrap

Anger om ord ska avstavas när en rad blir för lång

Z

z-index

Styr hur olika element ska överlappa. Förflyttar elementen längs en tänkt Z-axel.

zoom

Anger default-zoomvärde.