CSS Info

Een overzicht van de CSS elementen die gebruikt kunnen worden in een stylesheet van een webpagina.

Stijl elementen

  1. Achtergrond kleur of plaatje background
  2. Omkadering van elementen border
  3. Tekstkleur color
  4. Cursorvorm cursor
  5. Font (lettertype) font
  6. Hoogte van een element height
  7. Ruimte tussen letters letter-spacing
  8. Regelafstand (interlinie) line-height
  9. Lijststijl list-style
  10. Kantlijnen margin
  11. Ruimte tussen teksten of foto's en de kantlijn padding
  12. Tekst opmaak text-...
  13. Breedte van een element width

Standaardkleuren

  • black (zwart) hexadecimale waarde: #000000
  • silver (licht grijs) hexadecimale waarde: #C0C0C0
  • gray (donker grijs) hexadecimale waarde: #808080
  • white (wit) hexadecimale waarde: #FFFFFF
  • maroon (donkerrood) hexadecimale waarde: #800000
  • red (rood) hexadecimale waarde: #FF0000
  • orange (oranje) hexadecimale waarde: #FFA500
  • purple (paars) hexadecimale waarde: #800080
  • fuchsia (magenta) hexadecimale waarde: #FF00FF
  • green (donkergroen) hexadecimale waarde: #008000
  • lime (limoengroen) hexadecimale waarde: #00FF00
  • olive (olijfgroen) hexadecimale waarde: #808000
  • yellow (geel) hexadecimale waarde: #FFFF00
  • navy (donkerblauw) hexadecimale waarde: #000080
  • blue (blauw) hexadecimale waarde: #0000FF
  • teal (zeegroen) hexadecimale waarde: #008080
  • aqua (cyaan) hexadecimale waarde: #00FFFF

Kleurenkiezer

Achtergrond kleur of plaatje

background color image repeat attachment
Voorbeeld:
background: white url(tegel.jpg) repeat fixed;

background-attachment fixed of scroll
Voorbeeld:
background-attachment: fixed;

background-color kleur(waarde) of transparent
Voorbeeld:
background-color: yellow;

background-image url(url van de afbeelding)
Voorbeeld:
background-image: url(http://www.website.com/plaatje.gif)

background-repeat no-repeat of repeat of repeat-x of repeat-y
Voorbeeld:
background-repeat: repeat;

naar boven | naar stijl | naar kleur

Omkadering van elementen

border width style color
Voorbeeld:
border: 3px dashed blue;

border-bottom width style color
Voorbeeld:
border-bottom: 3px dashed blue;

border-left width style color
Voorbeeld:
border-left: 3px dashed blue;

border-right width style color
Voorbeeld:
border-right: 3px dashed blue;

border-top width style color
Voorbeeld:
border-top: 3px dashed blue;

border-color kleur(waarde)
Voorbeeld:
border-color: red;

border-bottom-color kleur(waarde)
Voorbeeld:
border-bottom-color: red;

border-left-color kleur(waarde)
Voorbeeld:
border-left-color: red;

border-right-color kleur(waarde)
Voorbeeld:
border-right-color: red;

border-top-color kleur(waarde)
Voorbeeld:
border-top-color: red;

border-style kaderstijl
Voorbeeld:
border-style: solid;

border-bottom-style kaderstijl
Voorbeeld:
border-bottom-style: solid;

border-left-style kaderstijl
Voorbeeld:
border-left-style: solid;

border-right-style kaderstijl
Voorbeeld:
border-right-style: solid;

border-top-style kaderstijl
Voorbeeld:
border-top-style: solid;

border-width kaderdikte
Voorbeeld:
border-width: 2px;

border-bottom-width kaderdikte
Voorbeeld:
border-bottom-width: 2px;

border-left-width kaderdikte
Voorbeeld:
border-left-width: 2px;

border-right-width kaderdikte
Voorbeeld:
border-right-width: 2px;

border-top-width kaderdikte
Voorbeeld:
border-top-width: 2px;

naar boven | naar stijl | naar kleur

Tekstkleur

color kleur(waarde)
Voorbeeld:
color: black;

naar boven | naar stijl | naar kleur

Cursorvorm

cursor vorm
Voorbeeld:
cursor: default;

naar boven | naar stijl | naar kleur

Font (lettertype)

font style weight size family
Voorbeeld:
font: normal 300 14pt "Times New Roman";

font-family lettertype
Voorbeeld:
font-family: tahoma,arial,"sans serif";

font-size grootte
Voorbeeld:
font-size: 12pt;

font-style normal of italic
Voorbeeld:
font-style: normal;

font-weight dikte
Voorbeeld:
font-weight: 600;

naar boven | naar stijl | naar kleur

Hoogte van een element

height waarde, percentage of auto
Voorbeeld:
height: 120%;

naar boven | naar stijl | naar kleur

Ruimte tussen letters

letter-spacing waarde, auto of normal
Voorbeeld:
letter-spacing: normal;

naar boven | naar stijl | naar kleur

Regelafstand (interlinie)

line-height waarde, percentage of normal
Voorbeeld:
line-height: 140%;

naar boven | naar stijl | naar kleur

Lijststijl

list-style type position image
Voorbeeld:
list-style: square inside none;

list-style-image url of none
Voorbeeld:
list-style-image: none;

list-style-position inside of outside
Voorbeeld:
list-style-position: inside;

list-style-type opsomteken
Voorbeeld:
list-style-type: circle;

naar boven | naar stijl | naar kleur

Kantlijnen

margin waarde of auto
Voorbeeld:
margin: 50px;

margin-bottom waarde of auto
Voorbeeld:
margin-bottom: 50px;

margin-left waarde of auto
Voorbeeld:
margin-left: 50px;

margin-right waarde of auto
Voorbeeld:
margin-right: 50px;

margin-top waarde of auto
Voorbeeld:
margin-top: 50px;

naar boven | naar stijl | naar kleur

Ruimte tussen teksten of foto's en de kantlijn

padding waarde
Voorbeeld:
padding: 20px;

padding-bottom waarde
Voorbeeld:
padding-bottom: 20px;

padding-left waarde
Voorbeeld:
padding-left: 20px;

padding-right waarde
Voorbeeld:
padding-right: 20px;

padding-top waarde
Voorbeeld:
padding-top: 20px;

naar boven | naar stijl | naar kleur

Tekst opmaak

text-align center, left, right of justify
Voorbeeld:
text-align: left;

text-decoration line-through, overline, underline of none
Voorbeeld:
text-decoration: none;

text-indent afstand of percentage
Voorbeeld:
text-indent: 100px;

text-transform capitalize, lowercase, uppercase of none
Voorbeeld:
text-transform: uppercase;

naar boven | naar stijl | naar kleur

Breedte van een element

width waarde, percentage of auto
Voorbeeld:
width: 100%;

naar boven | naar stijl | naar kleur

C.A. de Keijzer -- Webmastertools

hit tracker