Misschien heb je eerder al eens gehoord over CSS zonder echt te weten wat het is. In deze les leer je meer over wat CSS is en wat het voor je kan betekenen. CSS is een stijl taal die opmaak van HTML-documenten definieert. Bijvoorbeeld, CSS omvat lettertypen, kleuren, marges, lijnen, hoogte, breedte, achtergrondafbeeldingen, geavanceerde functies en vele andere dingen die met HTML tags alleen niet mogelijk zijn.
Zie onze CSS handleiding voor uitgebreide informatie over CSS (Cascading Style Sheets). |
Inline - met behulp van een stijl attribuut in HTML-elementen. | |
Intern - met behulp van een <style> element in de head van het document. | |
Extern - met behulp van één of meer externe CSS-bestanden. |
element { type:waarde; type:waarde }
Het element is een HTML element naam. Het type is een CSS eigenschap. De waarde is een CSS-waarde.
Meerdere stijlen zijn gescheiden met een puntkomma.
Inline stijl maakt gebruik van het attribuut style=" "
<h2 style="color:green;">Deze tekst wordt in het groen weergegeven.</h2>
<p style="background: blue; color: white;">
Een nieuwe achtergrond en lettertype kleur met inline CSS.</p>
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:black;}
h1 {color:yellow;}
p {color:white;}
</style>
</head>
<body>
<h1>Interne CSS voorbeeld:</h1>
<p>Witte tekst op een zwarte achtergrond!</p>
</body>
</html>
Externe style sheets zijn ideaal wanneer de stijl wordt toegepast op meerdere pagina's. Met externe style sheets, kan je het uiterlijk van een hele site veranderen door alleen de inhoud van het CSS bestand te wijzigen.
Aan de slag met externe CSS
Laten we beginnen met het maken van een externe CSS-bestand. Open notepad.exe (kladblok), of een andere teksteditor en neem de volgende CSS-code over:
body {background-color:blue}
h1 {color:yellow}
p {color:white}
Sla het bestand op als een CSS-bestand (.css) Zorg ervoor dat je het niet opslaat als een tekstbestand (.txt), geef het bestand de naam "styles.css" (zonder aanhalingstekens). Maak nu een nieuw HTML-bestand en neem de onderstaande HTML-code over:
<html>
<head>
<link rel="stylesheet" href="styles.css">>
</head>
<body>
<h1>Externe CSS voorbeeld:</h1>
<p>Witte tekst op een blauwe achtergrond!</p>
</body>
</html>
Sla dit bestand op als "index.html" (zonder aanhalingstekens) in dezelfde map als het CSS-bestand. Open nu het HTML-bestand in je webbrowser en het moet er dan ongeveer als volgt uitzien:
Gefeliciteerd! Je hebt je eerste pagina gemaakt door gebruik te maken van externe style sheets! Je kunt nu heel eenvoudig de CSS van je HTML-document bewerken door het bestand "styles.css" te openen in een teksteditor.
Voor degenen die de bovenstaande code niet willen overnemen kunnen direct het resultaat bekijken door op het voorbeeld link hiernaast te klikken: |
Voorbeeld |
Wat doet een CSS eigenschap: CSS eigenschappen bepalen het uitzicht en gedrag van een html element.
De CSS-eigenschap color definieert de tekstkleur dit kun je aan je html elementen toekennen.
De CSS-eigenschap font-family definieert het lettertype dit kun je aan je html elementen toekennen.
De CSS-eigenschap font-size bepaalt de grootte van de tekst dit kun je aan je html elementen toekennen.
<style>
h1 {color: red; font-family: "sans-serif"; font-size: 200%;}
p {color: green; font-family: "serif"; font-size: 150%;}
</style>
<style>
h1 {font-size: 30px; font-family: "arial";}
h2 {font-size: 20px; font-family: "courier";}
p {font-size: 15px; font-family: "times new roman";}
</style>
Je kunt het lettertype vergroten of verkleinen met behulp van pixels of percentages? |
De CSS eigenschap border definieert een zichtbare rand rond een HTML element:
<style>
p {
border: 1px solid silver;
}
</style>
De CSS-eigenschap padding definieert een ruimte binnen de rand:
<style>
p {
border: 1px solid silver;
padding: 10px;
}
</style>
De CSS-eigenschap margin definieert een ruimte buiten de rand:
<style>
p {
border: 1px solid silver;
padding: 10px;
margin: 30px;
}
</style>
Om een stijl voor een element te definiëren, voeg je het class attribuut toe aan het element:
<p class="rood">Deze tekst wordt weergegeven in rood.</p>
Nu kun je een stijl voor het class attribuut definiëren:
<style>
p.rood { color: red; }
</style>
Hieronder een voorbeeld van 3 paragrafen waar de tekst in een verschillende kleur wordt weergegeven:
<style>
p.eerste { color: red; }
p.tweede { color: green; }
p.derde { color: blue; }
</style>
Om een stijl voor een element te definiëren, voeg je het id attribuut toe aan het element:
<p id="h01">Hoofdstuk 1.2
Nu kun je een stijl voor het id attribuut definiëren:
<style>
#h01 { color: red; }
</style>
Hieronder een voorbeeld van 4 verschillende id's:
<style>
p#voorbeeld1 { background-color: yellow; }
p#voorbeeld2 { text-transform: uppercase; }
p#voorbeeld3 { background-color: blue; color: white; }
p#voorbeeld4 { border: 1px solid silver; }
</style>
Het class attribuut kan meerdere keren gebruikt worden, terwijl een bepaalde ID-waarde slechts eenmaal kan worden gebruikt in een document. |
Ad blocker gedetecteerd! | |
Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt. |