CSS - BASISCURSUS

HOOFDSTUKKEN

THEORIE
Algemeen
CSS SYNTAX
CLASS en ID SELECTOR
CSS COMMENTAREN
INVOEGEN VAN EEN STYLESHEET
DIV en SPAN TAG
VOORRANG
GEBRUIK VAN CSS
- Achtergrond
- Randen en andere omliggende gebieden
- Lettertypen
- Tekst
CSS EENHEDEN


Algemeen

Terug naar de top
Opmerking
De Basiscursus CSS kan alleen gevolgd worden als men tenminste over enige kennis betreffende HTML beschikt.

Inleiding.
HTML-tags zijn oorspronkelijk ontworpen om de inhoud van een document te definiëren. Zij werden verondersteld te zeggen: Dit is een koptekst, dit is een paragraaf en dit is een tabel door het gebruiken van tags als <h1>, <p>, <table>, enzovoort. De layout moest verder verzorgd worden door de browser zonder gebruik te maken van opmaaktags.
Later werden aan HTML opmaaktags (zoals de <font>-tag en het color attribuut) toegevoegd. Dit maakte het echter moeilijk om websites te maken waar de inhoud van HTML-documenten duidelijk gescheiden werd van de opmaak.
Om dit probleem op te lossen besloot het World Wide Web Consortium (W3C) om STYLES te creeëren.

Styles worden vastgelegd in style sheets. Style sheets definiëren HOE HTML-elementen getoond moeten worden op dezelfde wijze waarop fonttags en kleurattributen dat deden in HTML.
Style sheets maken het mogelijk om informatie op vele verschillende manieren vast te leggen. Stijlen kunnen vastgelegd worden:
  • in een enkele HTML-tag,
  • binnen het <head> element van een HTML-pagina, of
  • in een externe CSS file.
  • Zelfs meerdere externe style sheets kunnen toegepast worden in één enkele HTML-pagina.
Het gebruik van stijlen heeft het meeste rendement als deze worden opgeslagen in externe .css files. Op de pagina's van de website staat dan aangegeven dat voor deze pagina een bepaalde style sheet gebruikt moet worden. Externe style sheets maken het mogelijk de opmaak en layout van alle pagina's van je website in één keer te wijzigen door alleen maar de externe style sheet te wijzigen. Op deze wijze kun je als ontwerper stijl en layout van vele webpagina's tegelijk te controleren. Je kunt een stijl definiëren voor elk HTML-element en die toepassen in net zoveel pagina's als men wenst. Een totale verandering toepassen gebeurt door de style sheet aan te passen. Daarmee zijn alle elementen in het web automatisch aangepast.

CSS SYNTAX

Terug naar de top
CSS kent een vastgestelde schrijfwijze. Deze schrijfwijze maakt gebruik van elementen die aangeven wat er precies moet gebeuren. Eén van de elementen is de HTML-code waaraan men een bepaalde waarde wil geven (bijvoorbeeld de paragraaf), de tweede de eigenschap die men wil veranderen (bijvoorbeeld de uitlijning), de derde de waarde van die eigenschap (bijvoorbeeld rechts). Deze elementen kennen namen. In het hieropvolgende deel worden de namen genoemd en worden voorbeelden van gebruik gegeven.

Definities

CSS maakt gebruik van style sheets, rules, selectors, declarations, properties en values:
Style sheet (stijl pagina)
Verzameling van regels (rules) ten behoeve van de opmaak van één of meer pagina's.
Rule (regel)
Definitie van een stilistisch aspect van één of meerdere HTML-elementen. Een rule bestaat uit een selector en uit één of meer decalarations
Selector (element)
Het HTML-element waaraan een bepaalde opmaak wordt gegeven. Bijzondere selectoren zijn de class-selector en de id-selector.
Declaration (eigenschap)
De gewenste opmaak. Deze bestaat weer uit twee delen: Property en Value.
Property (aspect)
De eigenschap die men wil veranderen (bijvoorbeeld kleur).
Value (waarde)
De waarde die men aan die eigenschap wil toekennen (bijvoorbeeld rood)

Voorbeelden

Eenvoudige rule:

Syntax:
selector {property: value}
Voorbeeld:
body {color: black}

Value bestaande uit meerdere woorden:

Een value kan uit meerdere woorden bestaan. Er dienen dan aanhalingstekens omheen gezet te worden.
Voorbeeld:
p {font-family: "sans serif"}

Selector met meerdere properties:

Als je meer dan één eigenschap wil specificeren, dan moet je ze scheiden met een puntkomma. Het geheel kan achter elkaar gezet worden, maar (voor de overzichtelijkheid) ook onder elkaar.
Voorbeeld - Achter elkaar:
p {text-align:center; color:red; font-family:arial}
Zelfde voorbeeld - Onder elkaar:
p
{
text-align: center;
color: black;
font-family: arial
}

Groeperen van selectors:

Het kan voorkomen dat meerdere selectors dezelfde declaration hebben. De selectors kunnen dan achter elkaar geplaatst worden, gescheiden door een komma:
h1,h2
{
color: green; 
font-style: italic; 
font-size: large
}



CLASS en ID SELECTOR

Terug naar de top
Een selector is het gedeelte van de rule dat voor de openingsaccolade staat. Het tweede gedeelte van de rule is de declaratie. In h2 {color:green}, is h2 de selector en {color:green} de declaratie. Met deze rule geeft u aan dat alle headings van het type <h2> een groene kleur moeten krijgen. Praktisch gezien heel makkelijk en snel. Maar wat nu als u van de tien headers er maar vijf groen wilt hebben en de overige rood? Er zijn in dat geval drie mogelijkheden.
  1. U gebruikt de oude HTML-methode om aan te geven dat het lettertype rood moet zijn.
  2. U gebruikt de inline style methode (wijzigen per element. Zie verderop).
  3. U maakt gebruik van class en id attributen.
De eerste twee mogelijkheden zijn niet handig als we een keurige style sheet willen maken. U heeft dan namelijk niet meer de mogelijkheid om achteraf één enkel bestand aan te passen, tenzij men elke pagina apart weer wil wijzigen. Gelukkig zijn er twee attributen aan HTML toegevoegd die een oplossing bieden voor dit probleem, namelijk class en id, ook wel de attribute selectors genoemd.

Class-selector

Met de class-selector kan men meerdere waarden toekennen aan één HTML-element. Dit doet men door het in de (external of internal) style sheet een naam (class) te geven en hieraan in het document te refereren. Syntax = element.class of .class

Voorbeeld.
Stel dat je twee typen paragrafen in je document wilt gebruiken: één rechts uitgelijnd en één gecentreerd. Dat doe je met stijlen als volgt:
p.right {text-align: right}
p.center {text-align: center}
Right en center zijn hier de classes. NB. Voor het gemak zijn hier de namen right en center gebruikt. Het staat de gebruiker echter vrij elke naam te kiezen die men wil (met uitzondering van de namen van HTML-tags; dit kan tot verwarring leiden). Het volgende voorbeeld werkt even goed:
p.kat {text-align: right}
p.hond {text-align: center}

Om het te laten werken moet je vervolgens het class-element gebruiken in je document:
<p class="right">
Deze paragraaf is rechts uitgelijnd.
</p>
<p class="center">
Deze paragraaf is gecentreerd.
</p>
Of, in geval van voorbeeld 2:
<p class="kat">
Deze paragraaf is rechts uitgelijnd.
</p>
<p class="hond">
Deze paragraaf is gecentreerd.
</p>
Opmerking! Er kan maar één class-attribuut per selector worden gebruikt. Het navolgende is dus onjuist:
<p class="right" class="center"> 
Dit is een paragraaf.
</p>
In dit geval is het duidelijk. Immers de waarden conflicteren. Tegelijk centreren en rechts uitlijnen is immers niet mogelijk. Echter, ook als de waarden niet zouden conflicteren, is het niet mogelijk. De oplossing is dan het maken van een derde class waarin de eerste twee classes opgenomen zijn. Bijvoorbeeld:
p.red {color: red}
p.center {text-align: center}
p.redcenter {color: red; text-align: center}

Een class-selector kan ook gebruikt worden voor meerdere HTML-elementen. Dit doet men dan door de selector niet te noemen. Dit werkt als volgt.
In het onderstaande voorbeeld worden alle HTML-elementen met de class="center" gecentreerd:
.center {text-align: center}

In de onderstaande code hebben zowel het h1 element als het p element de class="center". Dat wil zeggen dat beide elementen de regels in de ".center" selector zullen volgen:
<h1 class="center">
Deze heading wordt gecentreerd weergegeven
</h1>

<p class="center">
Deze paragraaf ook.
</p> 

ID-selector

Je kunt ook stijlen definiëren met de ID-selector. De ID-selector is gedefinieerd met een #. Het verschil tussen id en class is dat id een uniek kenmerk is dat maar éénmaal kan worden toegepast (id heeft een unieke naam) , terwijl het class attribuut meerdere malen kan worden gebruikt in verschillende HTML-tags. De id-selector weegt zwaarder in de ranglijst van de cascading style sheets omdat deze specifieker is. Een id kan evenals een class attribuut aan iedere HTML-tag worden gekoppeld. Daarnaast kan hij ook zonder selector worden opgenomen.


CSS COMMENTAREN

Terug naar de top
Commentaren worden gebruikt om codes uit te leggen of om bijvoorbeeld een css-document met behulp van commentaarkopjes in te delen. Dit kan het later wijzigen van het document vereenvoudigen. CSS-commentaar wordt door de browsers genegeerd. Een css-commentaar begint met "/*", en eindigt met "*/", op de volgende wijze:
/* Dit is commentaar */
p
{
text-align: center;
/* dit is ander commentaar */
color: black;
font-family: arial
}



INVOEGEN VAN EEN STYLESHEET

Terug naar de top
Er zijn drie methodes om een style sheet in te voegen:
1. Als External style sheet
2. Als Internal style sheet (binnen de <head>-tag)
3. Als Inline style (binnen een HTML-element)

External style sheet.

De codes staan in een apart document welke als extensie .css heeft. In het <head>-deel van de pagina staat vervolgens een verwijzing (link) naar dat document.
De Style Sheet (in dit voorbeeld opgeslagen als: stylesheet.css [NB. ook deze naam kan willekeurig gekozen worden mits het de extensie .css heeft]) zou bijvoorbeeld het volgende kunnen bevatten:
H1 {font-size: 20pt; font-weight: bold}
H2 {font-size: 16pt; font-weight: bold}
P {margin-left: -20px; margin-right: -20px; margin-top: 30px}
BODY {background: URL(../../plaatje.gif); text-indent: 2cm}
In het document komt dan te staan:
<LINK HREF="stylesheet.css" TYPE="text/css" REL="stylesheet">

Bij external style sheets staan de style sheet definities in een apart bestand en niet in het html-document zelf. Het HTML-document verwijst ernaar. Dit heeft het voordeel dat de opmaak in de hele site hetzelfde is (ze verwijzen allemaal naar hetzelfde document). Daarnaast is de opmaak snel aan te passen (alleen het CSS-document hoeft maar gewijzigd te worden).

Internal (of embedded) style sheet

Hiermee kan een bepaalde style worden toegekend aan één document. De codes staan in het html-document zelf en wel als volgt:

In de kop (tussen <head> en </head>)komt te staan:
<STYLE TYPE="text/css">
<!--

Direct daarna komen de de css-codes. Deze worden in commentaar-tags geplaats om te voorkomen dat oudere browsers ze verkeerd interpreteren. Voorbeeld van css-codes:
BODY {font-family: Arial; font-size: 12pt}
P    {margin-left: 30px; margin-top: 10px}

Het totale document ziet er dan bijvoorbeeld als volgt uit (hier is gebruik gemaakt van een id-selector):
<!-- Vastleggen in de kop -->
	<HTML> 
	<HEAD> 
	<TITLE> CSS</TITLE> 
	<STYLE TYPE="text/css"> 
	<!-- 
	#tip {
	background-color : #FFB6C1;
	color : #4B0082;
	font-size : 12pt;
	font-weight : bold;
	border : 2px;
	border-style : solid;
	border-color : #008B8B;
	padding : 2px;
	}
	--> 
	</STYLE> 
	</HEAD> 
<!-- Gebruiken in het document -->
	<BODY BGCOLOR="#FF9966"> 
	Een tip:
	<DIV ID="tip"> 
	Met eenvoudige middelen kun je een
         complexe opmaak creëren
	</DIV>  
	De tweede tip:
	<DIV ID="tip"> 
	Hier gebruik je dan weer die complexe
         opmaak die één keer in de kop staat
	</DIV> 
	</BODY> 
	</HTML> 

Inline style sheet.

Hierbij wordt een bepaalde stijl direct aan één enkel html-element gekoppeld. In dat geval wordt de style genoteerd in de start-tag van het html-element. Ook kan gebruik worden gemaakt van de <div>- of de <span>-tag. Div en span kunnen in het document opgenomen worden, maar het is ook mogelijk deze in een stylesheet te zetten. Daarmee kun je in feite je eigen tags formuleren. Voor <div>- en <span>-tags zie de volgende paragraaf.

Stijlen kunnen toegevoegd worden aan alle HTML-tags. Je kunt bijvoorbeeld de stijl van een bepaalde paragraaf als volgt wijzigen.
Syntax en voorbeeld:
<P STYLE="margin-left: 1in; margin-right: 1in; color: #0000FF">Deze tekst springt in en is blauw.</p>

Deze tekst springt in en is blauw.


Deze wijze van werken wordt niet aangeraden als standaardwijze. Op deze wijze wordt de grafische presentatie niet losgemaakt van de tekst (wat nu net de bedoeling was van CSS) en daarmee wordt de mogelijkheid van snel wijzigen verminderd. Immers, nu moet de hele tekst doorgelopen worden. Het biedt wel de mogelijkheid om plaatselijk afwijkingen te maken in de gekozen standaardvorm.


DIV en SPAN TAGS

Terug naar de top
De <div>-tag.
De division- of <div>-tag is een block-level tag. Dit betekent dat harde returns (<br>) zijn toegestaan en dat de tag andere HTML-tags kan omsluiten. Daarnaast forceert div een regeleinde.
Syntax en voorbeeld:
<div style="margin-left: 0.5in; margin-right: 0.5in; font-family: Arial; color:blue">Het door de div-tags omspannen deel springt in zijn geheel in (links en rechts) en en heeft blauwe letters.</div>
Het door de div-tags omspannen deel springt in zijn geheel in (links en rechts) en heeft blauwe letters.

De <span>-tag.
De <span>-tag is een inline tag en hier mogen geen andere tags en harde returns in voorkomen. SPAN forceert geen regeleinde.
Syntax en voorbeeld:
Deze tekst is niet <span style="color:red">rood</span>
Deze tekst is niet rood



VOORRANG

Terug naar de top
De specificatie CSS bestaat in feite uit twee gedeelten:
  1. De code zoals die in de style sheet wordt gedefinieerd
  2. Afspraken die conflicten moeten oplossen.

Daarnaast bestaat er nog de ouder-kind relatie.

CSS kan op diverse plaatsen zijn aangebracht; gekoppeld aan een externe style sheet, in het <head>-gedeelte van een document of in een tag. Beschrijvingen kunnen ook verschillend zijn. In de externe stylesheet kan staan dat de h1-kop rood moet worden gekleurd, terwijl in de interne stylesheet staat dat die blauw moet zijn. Er kunnen dus conflicten ontstaan. Om dit op te lossen wordt de waterval-methode toegepast. Alle stijlen vloeien samen in een nieuwe virtuele style sheet volgens de navolgende regels. Nummer 1 (de inline style) heeft daarbij de hoogste en nummer 4 de laagste prioriteit:
  1. Inline style (binnen een HTML-element)
  2. Interne style sheet (binnen de <head>-tag)
  3. Externe style sheet
  4. Browser instelling
Nadat de problemen van cascading zijn opgelost, moet er nog gekeken worden naar het erven (inheritance). Het mechanisme van erven treedt alleen op wanneer er geen rules zijn gedefinieerd voor bepaalde eigenschappen in het cascading mechanisme. Een bepaald element zal dan automatisch de eigenschappen overnemen van de ouder (parent).
Voorbeeld:
Als bijvoorbeeld aan 'body' (parent) de stijl blauw gegeven zou worden, wordt de hele pagina, met uitzondering van de achtergrond blauw. De 'lagere' tags (voor zover van toepassing,) zijn ingesteld op blauw (children). Als echter in dezelfde style sheet aan 'h3' rood wordt toegekend, dan zal 'h3' rood weergegeven worden.

Als eigenschappen (properties) in verschillende stylesheets gekoppeld zijn aan dezelfde selector, worden de waarden overgenomen van de meer specifieke style sheet. Bijvoorbeeld: De h3-selector heeft zowel in de external als in de internal stylesheet waarden gekregen:
External style sheet:
h3 
{
color: red;
text-align: left;
font-size: 8pt
}
Internal style sheet:
h3 
{
text-align: right; 
font-size: 20pt
}
Als de pagina met de internal style sheet wordt gekoppeld met de external style sheet worden de properties voor h3:
color: red; 
text-align: right; 
font-size: 20pt
De kleur wordt geerfd van de external style sheet en de text-alignment en de font-size worden vervangen door de internal style sheet.


GEBRUIK VAN CSS

Terug naar de top

CSS wordt opgemaakt op dezelfde manier als HTML. Er kan gebruik gemaakt worden van het Kladblok, maar er zijn ook editors waarmee CSS-codes gegenereerd kunnen worden.Elke CSS-code begint met de naam van de doelcode (de HTML-code), gevolgd door, tussen twee accolades, (een lijst van) stijlregel(s). De eigenschap krijgt een bepaalde waarde door het opgeven van de naam van de eigenschap, gevolgd door een dubbele punt en de nieuwe waarde en een puntkomma. De puntkomma kan na de laatste naam en waarde worden weggelaten.
Voorbeeld: h1 {font-size: 20pt; color:red}

Er zijn tientallen CSS-codes. Daarmee kunnen vier soorten opmaak worden vastgelegd:

  • Achtergrond: Deze kan bestaan uit een tekst of een afbeelding en kan gebruikt worden bij pagina's of blokelementen als p, blockquote,hx en div.
    Voorbeelden zijn: background-color, background-image en background-repeat
  • Randen en andere omliggende gebieden: Met deze eigenschappemn kun je randen, marges, regelafstanden, opvulling en vooral ook de plaats van tabel- of laagonderdelen wijzigen.
    Voorbeelden zijn: margin-top en border-width
  • Lettertypen: Je kunt de weergave van een tekst wijzigen door een speciaal lettertype te gebruiken met alle opmaakkenmerken
    Voorbeelden zijn: font-style, -family, en -weight
  • Tekst: Mogelijkheden daarbij zijn onder andere het bepalen van de kleur, de tussenruimte tussen woorden en letters, enzovoort
    Voorbeelden zijn: color, text-align, word-spacing, letter-spacing en text-decoration

Naast deze vier groepen zijn er nog andere CSS-codes die gebruikt kunnen worden. Daarop wordt in deze basiscursus niet verder ingegaan. Het gaat daarbij om:

  • De CSS classification properties. Deze maken het mogelijk te bepalen hoe een element wordt weergegeven, hoe een image in een ander element verschijnt, waar een element wordt gepositioneerd relatief ten opzichte van de normale positie, hoe een element wordt gepositioneerd met gebruik making van een absolute waarde en hoe de (on)zichtbaarheid van een element wordt bepaald.
  • De CSS list properties. Deze maken het mogelijk te kiezen en te wisselen uit diverse opsommingstekens, een plaatje te gebruiken als opsommingsteken en de lokatie te bepalen van het opsommingsteken.
  • CSS2 Print Reference, CSS2 Media Types en CSS2 Aural Reference
  • CSS pseudo-elementen. Deze worden gebruikt om aan sommige selectors speciale effecten toe te voegen (beginletter, beginregel).

Hierna staan de belangrijkste codes uit CSS 2.1 vermeld. Inmiddels is ook CSS 3 ingevoerd. Deze kentt nog meer mogelijkheden. Zie daarvoor De desbetreffende pagina's op deze site.

Achtergrond

Terug naar de top

Property Beschrijving Waarden
background Een verkorte property om alle achtergrond eigenschappen in &eacuteén declaration vast te leggen.
Vb:
body {background:#ffffff}
background-color
background-image
background-repeat background-attachment background-position
background-attachment Geeft aan of een achtergrondplaatje vast staat of meescrollt met de rest van de pagina. Vb
div {background-image: url(foto.gif); background-attachment: fixed}
scroll
fixed
background-color Bepaalt de achtergrondkleur van een element.
Vb:
p {background-color: red}
color-rgb
color-hex
color-name
transparent
background-image Geeft een plaatje als achtergrond.
Vb: body {background-image: url(foto.gif)}
url
none
background-position Geeft aan wat de startpositie is van een achtergrondplaatje.
Vb:
div {background-image: url(foto.gif); background-position: right top;}
top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background-repeat Geeft aan of/hoe een achtergrondplaatje herhaalt moet worden. Vb:
body {background-image: url(foto.gif); background-repeat: repeat-y}
repeat
repeat-x
repeat-y
no-repeat



Randen en andere omliggende gebieden

Terug naar de top

Property Beschrijving Waardes
Randen
border Een shorthand property om alle properties voor de vier randen in één declaration vast te leggen. Vb:
p {border: purple outset medium}
border-width
border-style
border-color
border-top
border-right
border-bottom
border-left
Een shorthand property om alle properties voor de boven-, rechter-, onder en linkerrand in één declaration vast te leggen. Vb:
div {border-left: purple outset medium}
-width
-style
-color
border-style Een shorthand property om alle stijlen voor de randen in één declaration vast te leggen. Kan één tot vier waarden hebben.
1 - rondom
2 - boven/onder + rechts/links
3 - boven + rechts/links + onder
4 - boven + rechts + onder + links
Vb:
h1 {border-style: dotted dashed solid double}
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-top-style
border-right-style
border-bottom-style
border-left-style
Legt de stijl van de boven-, rechter-, onder-, linkerrand vast.
Vb:
p {border-left-style: dotted}
border-style
border-color Legt de kleuren van de vier randen vast, kan bestaan uit één tot vier kleuren. Vb:
p {border-color: green #ff0000 rgb(0,0,255) rgb(0%,0%,100%}
color
border-top-color
border-right-color
border-bottom-color
border-left-color
Legt de kleur van de boven-, rechter-, onder-, linkerrand vast border-color
border-width Een shorthand property om alle dikten voor de randen in één declaration vast te leggen. Kan één tot vier waarden hebben. Vb:
p {border-style: solid; border-width: 5px thick 1px medium}
thin
medium
thick
length
border-top-width
border-right-width
border-bottom-width
border-left-width
Legt de dikte van de boven-, rechter-, onder-, linkerrand vast thin
medium
thick
length
Marges
margin Een shorthand property waarmee alle (vier) margin properties in één declaration kunnen worden aangepast. Vb:
p {margin: 2cm 4cm 3cm 4cm}
margin-top
margin-right
margin-bottom
margin-left
margin-top
margin-left
margin-bottom
margin-right
Bepaalt de boven-, rechter-, onder-, linkermarge rond een element auto
length
%
Hoogten en Breedten
height
width
Legt de hoogte cq breedte van een element vast. Vb:
img {height: 200px}
auto
length
%
line-height Legt de regelhoogte vast. Vb:
p {line-height: 1.4}
normal
number
length
%
max-height
max-width
Legt de maximum hoogte cq breedte van een element vast. Vb:
p {max-height: 100px; max-width: 500px}
none
length
%
min-height
min-width
Legt de minimum hoogte cq breedte van een element vast length
%
Padding
padding Een shorthand property waarmee alle padding properties in één declaration kunnen worden vastgelegd. Vb:
td {padding: 1.5cm 10px 20% 36pt}
padding-top
padding-right
padding-bottom
padding-left
padding-top
padding-left
padding-bottom
padding-right
Bepaalt de boven-, rechter-, onder-, linkerruimte (padding) van een element length
%
Positie
top
right
bottom
left
Geeft aan hoever de boven-, rechter-, onder-, linkerkant van een element ligt boven/onder cq links/rechts van de boven-, rechter-, onder-, linkerkant van het parent element. Negatieve waarden zijn mogelijk. Vb:
p {position: absolute; bottom: 20px}
auto
%
length
clip Bepaalt de vorm van een element. Het element wordt "afgeknipt" en in deze vorm geplaatst. Vb:
img {clip: rect(10px, 5px, 10px, 5px)}
shape
auto
overflow Geeft aan wat er gebeurt als de inhoud van een element groter is dan het venster/gebied waarin die geplaatst wordt. Vb:
p {overflow: scroll}
visible
hidden
scroll
auto
position Plaatst een element in een statische, relatieve, absolute of vaste positie. Vb:
h1 {position:absolute; left:100px; top:150px;}
static
relative
absolute
fixed
vertical-align Bepaalt de verticale uitlijning van een element. Vb:
img {vertical-align: bottom}
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
z-index Bepaalt de stapelorde van een element. Een element met een hogere z-index (bijvoorbeeld een tekst) wordt altijd op een element met een lagere z-index geplaatst (bijvoorbeeld een plaatje). Vb:
img {position:absolute; left:0px; top:0px; z-index:-1}
auto
number



Lettertypen

Terug naar de top

Property Beschrijving Waardes
font Een verkorte property waarmee alle eigenschappen van een font in één declaration kunnen worden samengevat. Vb:
p {font: oblique small-caps 900 12px/14px arial}
font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
font-family Een lijst in prioriteitsvolgorde van de te hanteren font family en/of generic family namen voor een element family-name
generic-family
font-size Bepaalt de grootte van een letterteken xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
font-size-adjust Bepaalt de waarde van een aspect voor een element dat de x-hoogte van de eerst gekozen font vastlegd none
number
font-stretch Verkleind of vergroot de huidige font-family normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style Bepaalt de stijl van het letterteken normal
italic
oblique
font-variant Geeft de tekst weer in kleine hoofdletters of in een normale schrijfwijze normal
small-caps
font-weight Bepaalt de dikte (gewicht) van een letterteken normal
bold
bolder
lighter
100
200
300
600
500
600
700
800
900



Tekst

Terug naar de top

Property Beschrijving Waardes
color Bepaalt de kleur van een tekst. Vb:
body {color: rgb(255,255,0)}
color
direction Bepaalt de tekst-richting. Vb:
div {direction: rtl}
ltr
rtl
letter-spacing Vermindert of vermeerdert de ruimte tussen de letters. Vb:
p {letter-spacing: -0.5px}
normal
length
text-align Lijnt de tekst uit in een element. Vb:
p {text-align: center}
left
right
center
justify
text-decoration Plaatst een lijn onder, boven of door een tekst of laat deze knipperen. Vb:
p {text-decoration: underline}
none
underline
overline
line-through
blink
text-indent Laat de eerste regel van een tekst in een element inspringen. Vb:
p {text-indent: -12px}
length
%
text-shadow   none
color
length
text-transform Plaatst al dan niet hoofdletters in een element. Vb:
p {text-transform: uppercase}
none
capitalize
uppercase
lowercase
unicode-bidi Plaatst een bi-directional tekst in een blok. Tekst binnen een blok kan twee richtingen opgaan. Vb:
#div1 {direction: ltr; unicode-bidi: embed}
normal
embed
bidi-override
white-space Geeft aan hoe omgegaan wordt met de witte ruimte in een element. Vb:
p {white-space: pre}
normal
pre
nowrap
pre-wrap
pre-line
word-spacing Vermeerdert of vermindert de ruimte tussen woorden. Vb:
p {word-spacing: -0.5px}
normal
length



CSS EENHEDEN

Terug naar de top

Maten

Eenheid Beschrijving
% percentage
in inch
cm centimeter
mm millimeter
em 1 em is gelijk aan de huidige font size in het huidige element
ex 1 ex is de x-hoogte van een font (x-hoogte is gewoonlijk ongeveer een halve font-size)
pt point (1 pt is gelijk aan 1/72 inch)
pc pica (1 pc is gelijk aan 12 points)
px pixels (een dot op het computer scherm)

Kleuren

Eenheid Beschrijving
color_name Een kleurnaam (bijv. red)
rgb(x,x,x) Een RGB waarde (bijv. rgb(255,0,0))
rgb(x%, x%, x%) Een RGB waarde in percentages (bijv. rgb(100%,0%,0%))
#rrggbb Een HEX getal (bijv. #ff0000)



Terug naar de top