HTML CSS
"CSS staat voor Cascading Style Sheets"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). |
CSS koppelen
Stijlen kunnen op 3 verschillende manieren aan HTML gekoppeld worden:Via een inline stijl, of intern met behulp van een stijlblok in de head van het document of een extern stijlblad.
| 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. |
CSS opbouw
De opbouw van een CSS stijl is als volgt:
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 CSS stijlen
Inline CSS heeft de hoogste prioriteit van de drie manieren waarop je CSS kunt gebruiken: inline, intern, en extern. Dit betekent dat je de stijlen die zijn gedefinieerd in de interne of externe door inline CSS kan overschrijven. Inline stijl is handig voor het aanbrengen van een unieke stijl naar een enkel HTML-element.Inline stijl maakt gebruik van het attribuut style=" "
Voorbeeld:
<p style="background: blue; color: white;">
Een nieuwe achtergrond en lettertype kleur met inline CSS.</p>
Interne CSS stijlen
Een interne style sheet kan worden gebruikt om een gemeenschappelijke stijl voor alle HTML elementen op een pagina te maken. Bij het gebruik van interne CSS, moet je een nieuwe tag, <style> toevoegen, in de head van het document. De onderstaande HTML code bevat een voorbeeld hoe je gebruik maakt van de tag <style>.
Voorbeeld:
<!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 CSS stijlen
Bij het gebruik van CSS is het beter om de CSS-code gescheiden te houden van je HTML-documenten. Externe CSS is een bestand dat alleen CSS-code bevat en wordt opgeslagen met een ".css" bestandsextensie. Deze CSS-bestand wordt dan geladen in je HTML-documenten met behulp van het element <link> in plaats van het attribuut <style>.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 |
CSS fonts
In CSS heb je de controle over de wijze waarop de tekst in de browser wordt weergegeven. Je kunt de tekst- grootte, kleur, stijl, en nog veel meer veranderen. Je weet waarschijnlijk al hoe je de tekst vet of onderstreept kunt maken, maar wist je ook dat je het lettertype kan vergroten of verkleinen met behulp van percentages?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.
Voorbeeld:
<style>
h1 {color: red; font-family: "sans-serif"; font-size: 200%;}
p {color: green; font-family: "serif"; font-size: 150%;}
</style>
Voorbeeld:
<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? |
CSS randen
In HTML was het vroeger onmogelijk om een rand te plaatsen rond een element, met uitzondering van de tabel. In CSS is het mogelijk om randen te creëren met zeer weinig werk, in vergelijking met de verouderde methoden van HTML. Elke zichtbare HTML element heeft een rand, zelfs als je het niet kunt zien.De CSS eigenschap border definieert een zichtbare rand rond een HTML element:
De CSS-eigenschap padding definieert een ruimte binnen de rand:
De CSS-eigenschap margin definieert een ruimte buiten de rand:
Voorbeeld:
<style>
p {
border: 1px solid silver;
padding: 10px;
margin: 30px;
}
</style>
CSS class attribuut
Je vraagt je waarschijnlijk al af of het mogelijk is om in CSS een HTML-element meerdere looks te geven. Bijvoorbeeld dat je de lettertype groot en in het wit wilt hebben. Dit is mogelijk met CSS omdat je verschillende soorten formaten kan geven aan een enkele HTML-tag.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:
Hieronder een voorbeeld van 3 paragrafen waar de tekst in een verschillende kleur wordt weergegeven:
Voorbeeld:
<style>
p.eerste { color: red; }
p.tweede { color: green; }
p.derde { color: blue; }
</style>
CSS id attribuut
Het W3C definieert het klasse id als "een unieke identificatie aan een element". In aanvulling op het groeperen van elementen, kan je een uniek element identificeren. Dit gebeurt door het attribuut id. Het bijzondere van het id attribuut is dat het maar één keer met een bepaalde id in een document mag staan. Elke id moet uniek zijn. In andere gevallen moet je het class attribuut gebruiken.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:
Hieronder een voorbeeld van 4 verschillende id's:
Voorbeeld:
<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. |
