Inleiding
1. Wat is CSS?
2. Uiterlijke style sheet
3. Interne style sheet
4. Innerlijke style sheet
5. Syntax
6. Classes
7. ID's
8. Commentaar
9. Oefeningen
1. Wat is CSS ?
CSS staat voor "Cascading Style Sheets" en is een opmaaktaal waarmee je stijlen met kunt aanmaken die je later kunt gebruiken op verschilende pagina's. Het voordeel is dus dat je op één pagina met als extensie .css allerlei stijlen kunt aanmaken. Je kunt natuurlijk ook stijlen aanmaken die je maar op één pagina gebruikt. Hieronder vind je de drie manieren hoe je CSS kan gebruiken op je webpagina's.
 top
2. Uiterlijke style sheet
Met de uiterlijke style sheet is het dus mogelijk om één pagina aan te maken met allerlei stijlen die je kan gebruiken op verschillende pagina's. Op elke pagina waar je gebruik wilt kunnen maken van de aangemaakte stijlen pagina moet je verwijzen naar de pagina, zie onderstaande code:
|
<LINK
REL="stylesheet" HREF="stijlen.css" TYPE="text/css">
|
Deze code plaats je tussen <HEAD> en </HEAD>. In het bestand "stijlen.css" moet je dus de stijlen plaatsen die je wilt gebruiken. Er mogen geen HTML elementen gebruikt worden in dit bestand!
top
3. Interne style sheet
Als je stijlen wilt aanmaken die je maar op één pagina gebruikt kan je deze methode gebruiken.
<STYLE TYPE="text/css">
/* Hier de stijlen */
</STYLE> |
Deze code plaats je tussen <HEAD> en </HEAD>. Tussen de twee tags plaats je de stijlen die je wilt gebruiken op de pagina.
top
4. Innerlijke style sheet
Het is ook mogelijk om stijlen te gebruiken voor één element:
top
5. Syntax
Nu weten we al hoe we CSS kunnen gebruiken, nu nog leren maken. De syntax code ziet er zo uit:
element {eigenschap: waarde} |
| element |
Op het element waar we een stijl op willen uitoefenen. (vb: P) |
| eigenschap |
Welk eigenschap dat we willen aanpassen. (vb: kleur) |
| waarde |
De waarde dat het eigenschap krijgt. (vb: red) |
Een voorbeeld:
Als je deze stijl toepast op een pagina zullen alle paragrafen als tekstkleur rood krijgen. We kunnen ook stijlen uitoefenen op meerdere elementen tegelijkertijd, zie onderstaand voorbeeld:
top
6. Classes
Met classes kunnen we verschilende stijlen uitoefenen éénzelfde element. Neem nu dat je verschillende paragrafen links wilt uitlijnen, en verschillende paragrafen rechts wil uitlijnen, met onderstaande classes kunnen we dat oplossen:
P.links {text-align: left}
P.rechts {text-align: right}
|
Het HTML document zou er dan zo moeten uitzien:
<P CLASS="links">
Deze tekst staat links.
</P>
<P CLASS="rechts">
Deze tekst staat rechts.
</P> |
We kunnen maar één CLASS attribuut gebruiken in één element, het volgende voorbeeld is dus FOUT:
<P CLASS="links" CLASS="rechts">
Deze code is FOUT !
</P> |
Wat je wel kan doen is dit:
<P CLASS="class1 class2">
Deze code is JUIST !
</P> |
Op bovenstaand voorbeeld zullen dus twee classes worden uitgeoefend.
top
7. ID's
top
8. Commentaar
top
9. Oefeningen
top
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
