HTML -stijlen - CSS
CSS staat voor Cascading Style Sheets.
CSS bespaart veel werk. Het kan de lay-out van meerdere webpagina's tegelijk regelen.
CSS = stijlen en kleuren
Wat is CSS?
Cascading Style Sheets (CSS) wordt gebruikt om de lay-out van een webpagina op te maken.
Met CSS kunt u de kleur, het lettertype, de tekstgrootte, de afstand tussen elementen, hoe elementen worden gepositioneerd en ingedeeld, welke achtergrondafbeeldingen of achtergrondkleuren moeten worden gebruikt, verschillende weergaven voor verschillende apparaten en schermformaten, en veel meer!
Tip: Het woord trapsgewijze betekent dat een stijl die op een bovenliggend element wordt toegepast, ook van toepassing is op alle onderliggende elementen binnen het bovenliggende element. Dus als u de kleur van de hoofdtekst instelt op "blauw", krijgen alle koppen, alinea's en andere tekstelementen in de hoofdtekst ook dezelfde kleur (tenzij u iets anders opgeeft)!
CSS gebruiken
CSS kan op 3 manieren aan HTML-documenten worden toegevoegd:
- Inline - door het
styleattribuut in HTML-elementen te gebruiken - Intern - door een
<style>element in de<head>sectie te gebruiken - Extern - door een
<link>element te gebruiken om naar een extern CSS-bestand te linken
De meest gebruikelijke manier om CSS toe te voegen, is door de stijlen in externe CSS-bestanden te bewaren. In deze zelfstudie zullen we echter inline en interne stijlen gebruiken, omdat dit gemakkelijker te demonstreren is en u het gemakkelijker zelf kunt proberen.
Inline CSS
Een inline CSS wordt gebruikt om een unieke stijl toe te passen op een enkel HTML-element.
Een inline CSS gebruikt het styleattribuut van een HTML-element.
In het volgende voorbeeld wordt de tekstkleur van het <h1>element ingesteld op blauw en de tekstkleur van het <p>element op rood:
Voorbeeld
<h1 style="color:blue;">A Blue Heading</h1>
<p
style="color:red;">A red paragraph.</p>
Interne CSS
Een interne CSS wordt gebruikt om een stijl voor een enkele HTML-pagina te definiëren.
Een interne CSS wordt gedefinieerd in de <head>sectie van een HTML-pagina, binnen een <style>element.
Het volgende voorbeeld stelt de tekstkleur van ALLE <h1>elementen (op die pagina) in op blauw en de tekstkleur van ALLE <p>elementen op rood. Bovendien wordt de pagina weergegeven met een "poederblauwe" achtergrondkleur:
Voorbeeld
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a
heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Externe CSS
Een externe stylesheet wordt gebruikt om de stijl voor veel HTML-pagina's te definiëren.
Om een extern stijlblad te gebruiken, voegt u er een link naar toe in de <head>sectie van elke HTML-pagina:
Voorbeeld
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Het externe stylesheet kan in elke teksteditor worden geschreven. Het bestand mag geen HTML-code bevatten en moet worden opgeslagen met de extensie .css.
Zo ziet het bestand "styles.css" eruit:
"stijlen.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Tip: Met een externe stylesheet kun je het uiterlijk van een hele website veranderen door één bestand te veranderen!
CSS-kleuren, lettertypen en formaten
Hier zullen we enkele veelgebruikte CSS-eigenschappen demonstreren. U zult later meer over hen te weten komen.
De CSS color-eigenschap definieert de te gebruiken tekstkleur.
De CSS- font-familyeigenschap definieert het te gebruiken lettertype.
De CSS font-size-eigenschap definieert de te gebruiken tekstgrootte.
Voorbeeld
Gebruik van CSS-kleur, font-family en font-size eigenschappen:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS-rand
De eigenschap CSS borderdefinieert een rand rond een HTML-element.
Tip: U kunt voor bijna alle HTML-elementen een rand definiëren.
Voorbeeld
Gebruik van CSS border eigenschap:
p {
border: 2px
solid powderblue;
}
CSS-opvulling
De CSS padding-eigenschap definieert een opvulling (spatie) tussen de tekst en de rand.
Voorbeeld
Gebruik van CSS-rand- en opvuleigenschappen:
p {
border: 2px
solid powderblue;
padding: 30px;
}
CSS-marge
De CSS margin-eigenschap definieert een marge (spatie) buiten de rand.
Voorbeeld
Gebruik van CSS-rand- en marge-eigenschappen:
p {
border: 2px
solid powderblue;
margin: 50px;
}
Link naar externe CSS
Er kan naar externe stylesheets worden verwezen met een volledige URL of met een pad ten opzichte van de huidige webpagina.
Voorbeeld
In dit voorbeeld wordt een volledige URL gebruikt om naar een stylesheet te linken:
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Voorbeeld
Dit voorbeeld linkt naar een stylesheet in de html-map op de huidige website:
<link rel="stylesheet" href="/html/styles.css">
Voorbeeld
Dit voorbeeld linkt naar een stylesheet in dezelfde map als de huidige pagina:
<link rel="stylesheet" href="styles.css">
U kunt meer lezen over bestandspaden in het hoofdstuk HTML-bestandspaden .
Hoofdstuk samenvatting
- Gebruik het HTML
style-kenmerk voor inline-styling - Gebruik het HTML-
<style>element om interne CSS te definiëren - Gebruik het HTML
<link>-element om naar een extern CSS-bestand te verwijzen - Gebruik het HTML
<head>-element om <style>- en <link>-elementen op te slaan - Gebruik de CSS
color-eigenschap voor tekstkleuren - Gebruik de CSS
font-family-eigenschap voor tekstlettertypen - Gebruik de CSS
font-size-eigenschap voor tekstgroottes - Gebruik de CSS-
bordereigenschap voor randen - Gebruik de CSS
padding-eigenschap voor ruimte binnen de rand - Gebruik de CSS
margin-eigenschap voor ruimte buiten de rand
Tip: je kunt veel meer leren over CSS in onze CSS-zelfstudie .
HTML-oefeningen
HTML-stijltags
| Tag | Description |
|---|---|
| <style> | Defines style information for an HTML document |
| <link> | Defines a link between a document and an external resource |
Bezoek onze HTML Tag Reference voor een volledige lijst van alle beschikbare HTML-tags .