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.
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:
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!
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:
<TAG STYLE="..."></TAG>
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:
P {color: red}
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:
P,H1,H2 {color: red}
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:
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
