Lettertype-gerelateerde CSS-eigenschappen

Articles

Dit artikel legt lettertype-gerelateerde CSS-eigenschappen uit.

Je kunt leren over de toepassingsmogelijkheden en hoe je eigenschappen zoals font-style en font-family schrijft.

YouTube Video

HTML maken voor voorbeeldweergave

css-font.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-font.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Font-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Font-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>font-size</h3>
 23            <section>
 24                <h4>Absolute Values</h4>
 25                <header><h4>font-size: 16px</h4></header>
 26                <section class="sample-view">
 27                    <p class="font-size-px">Font size: 16px</p>
 28                </section>
 29                <header><h4>font-size: 12pt</h4></header>
 30                <section class="sample-view">
 31                    <p class="font-size-pt">Font size: 12pt</p>
 32                </section>
 33            </section>
 34            <section>
 35                <h4>Relative Values</h4>
 36                <header><h4>font-size: 1.2em</h4></header>
 37                <section class="sample-view">
 38                    <p class="font-size-em">Font size: 1.2em</p>
 39                </section>
 40                <header><h4>font-size: 1.5rem</h4></header>
 41                <section class="sample-view">
 42                    <p class="font-size-rem">Font size: 1.5rem</p>
 43                </section>
 44                <header><h4>font-size: 150%</h4></header>
 45                <section class="sample-view">
 46                    <p class="font-size-percent">Font size: 150%</p>
 47                </section>
 48            </section>
 49            <section>
 50                <h4>Keywords</h4>
 51                <header><h4>font-size: small</h4></header>
 52                <section class="sample-view">
 53                    <p class="font-size-small">Font size: small</p>
 54                </section>
 55                <header><h4>font-size: medium%</h4></header>
 56                <section class="sample-view">
 57                    <p class="font-size-medium">Font size: medium (default)</p>
 58                </section>
 59                <header><h4>font-size: large</h4></header>
 60                <section class="sample-view">
 61                    <p class="font-size-large">Font size: large</p>
 62                </section>
 63                <header><h4>font-size: x-large</h4></header>
 64                <section class="sample-view">
 65                    <p class="font-size-x-large">Font size: x-large</p>
 66                </section>
 67            </section>
 68            <section>
 69                <h4>Relative Keywords</h4>
 70                <header><h4>font-size: smaller</h4></header>
 71                <section class="sample-view">
 72                    <p class="font-size-smaller">Font size: smaller</p>
 73                </section>
 74                <header><h4>font-size: larger</h4></header>
 75                <section class="sample-view">
 76                    <p class="font-size-larger">Font size: larger</p>
 77                </section>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>font-family</h3>
 82            <section>
 83                <h4>Specific Font Names</h4>
 84                <header><h4>font-family: Arial, sans-serif</h4></header>
 85                <section class="sample-view">
 86                    <p class="font-family-arial">Font Family Arial</p>
 87                </section>
 88                <header><h4>font-family: Verdana, sans-serif</h4></header>
 89                <section class="sample-view">
 90                    <p class="font-family-verdana">Font Family Verdana</p>
 91                </section>
 92                <header><h4>font-family: "Times New Roman", serif</h4></header>
 93                <section class="sample-view">
 94                    <p class="font-family-times">Font Family Times New Roman</p>
 95                </section>
 96                <header><h4>font-family: "Courier New", monospace</h4></header>
 97                <section class="sample-view">
 98                    <p class="font-family-courier">Font Family Courier New</p>
 99                </section>
100                <header><h4>font-family: Georgia, serif</h4></header>
101                <section class="sample-view">
102                    <p class="font-family-georgia">Font Family Georgia</p>
103                </section>
104            </section>
105            <section>
106                <h4>Generic Font Families</h4>
107                <header><h4>font-family: serif</h4></header>
108                <section class="sample-view">
109                    <p class="font-family-serif">Font Family Serif</p>
110                </section>
111                <header><h4>font-family: sans-serif</h4></header>
112                <section class="sample-view">
113                    <p class="font-family-sans-serif">Font Family Sans-Serif</p>
114                </section>
115                <header><h4>font-family: monospace</h4></header>
116                <section class="sample-view">
117                    <p class="font-family-monospace">Font Family Monospace</p>
118                </section>
119                <header><h4>font-family: cursive</h4></header>
120                <section class="sample-view">
121                    <p class="font-family-cursive">Font Family Cursive</p>
122                </section>
123                <header><h4>font-family: fantasy</h4></header>
124                <section class="sample-view">
125                    <p class="font-family-fantasy">Font Family Fantasy</p>
126                </section>
127            </section>
128        </article>
129        <article>
130            <h3>font-weight</h3>
131            <section>
132                <h4>Keyword Values</h4>
133                <header><h4>font-weight: normal</h4></header>
134                <section class="sample-view">
135                    <p class="font-weight-normal">Font weight: normal</p>
136                </section>
137                <header><h4>font-weight: bold</h4></header>
138                <section class="sample-view">
139                    <p class="font-weight-bold">Font weight: bold</p>
140                </section>
141                <header><h4>font-weight: bolder</h4></header>
142                <section class="sample-view">
143                    <p class="font-weight-bolder">Font weight: bolder</p>
144                </section>
145                <header><h4>font-weight: lighter</h4></header>
146                <section class="sample-view">
147                    <p class="font-weight-lighter">Font weight: lighter</p>
148                </section>
149            </section>
150            <section>
151                <h4>Numeric Values</h4>
152                <header><h4>font-weight: 100</h4></header>
153                <section class="sample-view">
154                    <p class="font-weight-100">Font weight: 100 (Thin)</p>
155                </section>
156                <header><h4>font-weight: 200</h4></header>
157                <section class="sample-view">
158                    <p class="font-weight-200">Font weight: 200 (Extra Light)</p>
159                </section>
160                <header><h4>font-weight: 300</h4></header>
161                <section class="sample-view">
162                    <p class="font-weight-300">Font weight: 300 (Light)</p>
163                </section>
164                <header><h4>font-weight: 400</h4></header>
165                <section class="sample-view">
166                    <p class="font-weight-400">Font weight: 400 (Normal)</p>
167                </section>
168                <header><h4>font-weight: 500</h4></header>
169                <section class="sample-view">
170                    <p class="font-weight-500">Font weight: 500 (Medium)</p>
171                </section>
172                <header><h4>font-weight: 600</h4></header>
173                <section class="sample-view">
174                    <p class="font-weight-600">Font weight: 600 (Semi Bold)</p>
175                </section>
176                <header><h4>font-weight: 700</h4></header>
177                <section class="sample-view">
178                    <p class="font-weight-700">Font weight: 700 (Bold)</p>
179                </section>
180                <header><h4>font-weight: 800</h4></header>
181                <section class="sample-view">
182                    <p class="font-weight-800">Font weight: 800 (Extra Bold)</p>
183                </section>
184                <header><h4>font-weight: 900</h4></header>
185                <section class="sample-view">
186                    <p class="font-weight-900">Font weight: 900 (Black)</p>
187                </section>
188            </section>
189        </article>
190        <article>
191            <h3>font-style</h3>
192            <section>
193                <h4>Keyword Values</h4>
194                <header><h4>font-style: normal</h4></header>
195                <section class="sample-view">
196                    <p class="font-style-normal">This is normal font style.</p>
197                </section>
198                <header><h4>font-style: italic</h4></header>
199                <section class="sample-view">
200                    <p class="font-style-italic">This is italic font style.</p>
201                </section>
202                <header><h4>font-style: oblique</h4></header>
203                <section class="sample-view">
204                    <p class="font-style-oblique">This is oblique font style.</p>
205                </section>
206                <header><h4>font-style: oblique 20deg</h4></header>
207                <section class="sample-view">
208                    <p class="font-style-oblique-20deg">This is an oblique font style with a 20-degree angle.</p>
209                </section>
210            </section>
211        </article>
212        <article>
213            <h3>color</h3>
214            <section>
215                <h4>Color Property Examples</h4>
216                <header><h4>color: red</h4></header>
217                <section class="sample-view">
218                    <p class="color-red">This text is red using a keyword.</p>
219                </section>
220                <header><h4>color: #FF5733</h4></header>
221                <section class="sample-view">
222                    <p class="color-hex">This text is displayed with a hex color code (#FF5733).</p>
223                </section>
224                <header><h4>color: rgb(255, 87, 51)</h4></header>
225                <section class="sample-view">
226                    <p class="color-rgb">This text is displayed using RGB (rgb(255, 87, 51)).</p>
227                </section>
228                <header><h4>color: rgba(255, 87, 51, 0.7)</h4></header>
229                <section class="sample-view">
230                    <p class="color-rgba">This text is displayed using RGBA with transparency (rgba(255, 87, 51, 0.7)).</p>
231                </section>
232                <header><h4>color: hsl(14, 100%, 60%)</h4></header>
233                <section class="sample-view">
234                    <p class="color-hsl">This text is displayed using HSL (hsl(14, 100%, 60%)).</p>
235                </section>
236                <header><h4>color: hsla(14, 100%, 60%, 0.7)</h4></header>
237                <section class="sample-view">
238                    <p class="color-hsla">This text is displayed using HSLA with transparency (hsla(14, 100%, 60%, 0.7)).</p>
239                </section>
240            </section>
241        </article>
242    </main>
243</body>
244</html>

Typografie (Lettertype-gerelateerd)

`font-size` eigenschap

 1/* Absolute Values */
 2.font-size-px {
 3    font-size: 16px;
 4}
 5
 6.font-size-pt {
 7    font-size: 12pt;
 8}
 9
10/* Relative Values */
11.font-size-em {
12    font-size: 1.2em; /* 120% of the parent font size */
13}
14
15.font-size-rem {
16    font-size: 1.5rem; /* 150% of the root element's font size */
17}
18
19.font-size-percent {
20    font-size: 150%; /* 150% of the parent font size */
21}
22
23/* Keywords */
24.font-size-medium {
25    font-size: small;
26}
27
28.font-size-medium {
29    font-size: medium;
30}
31
32.font-size-large {
33    font-size: large;
34}
35
36.font-size-x-large {
37    font-size: x-large;
38}
39
40/* Relative Keywords */
41.font-size-larger {
42    font-size: larger;
43}
44
45.font-size-smaller {
46    font-size: smaller;
47}

font-size is een CSS-eigenschap die wordt gebruikt om de grootte van tekst binnen een element te specificeren. Het wordt gebruikt om het visuele belang van tekst aan te passen en de leesbaarheid te verbeteren. font-size kan worden gespecificeerd met behulp van verschillende eenheden en methoden.

Belangrijkste manieren om waarden te specificeren

Absolute waarden(px, pt)

Als je een vaste grootte wilt gebruiken die onafhankelijk is van de browser of het apparaat, specificeer lettergroottes in absolute eenheden zoals pixels of punten.

1p {
2    font-size: 16px;
3}

px: Pixels zijn de meest voorkomende eenheid. Specificeer de grootte in stappen van 1 pixel.

1p {
2    font-size: 12pt;
3}

pt: Punten zijn eenheden die vaak worden gebruikt in drukwerk. 1 punt is 1/72 van een inch.

Relatieve waarden(em, rem, %)

Je kunt ook relatieve lettergroottes specificeren op basis van de lettergrootte van een bovenliggend of root-element. Dit is geschikt voor responsive design.

1p {
2    font-size: 1.2em; /* 120% of the parent element's font size */
3}

em: em is een relatieve eenheid gebaseerd op de lettergrootte van het bovenliggende element. Als de font-size van het bovenliggende element 16px is, dan is 1em gelijk aan 16px.

1p {
2    font-size: 1.5rem; /* 150% of the root element's font size */
3}

rem: rem is een relatieve eenheid gebaseerd op de lettergrootte van het rootelement (meestal het <html>-element).

1p {
2    font-size: 150%; /* 150% of the parent element's font size */
3}

%: % wordt gespecificeerd als een percentage ten opzichte van de lettergrootte van het moeder-element.

Trefwoorden

Je kunt ook trefwoorden gebruiken om eenvoudig gebruiksvriendelijke groottes te specificeren.

 1p.xx-small {
 2    font-size: xx-small;
 3}
 4p.x-small {
 5    font-size: x-small;
 6}
 7p.small {
 8    font-size: small;
 9}
10p.medium {
11    font-size: medium;
12}
13p.large {
14    font-size: large;
15}
16p.x-large {
17    font-size: x-large;
18}
19p.xx-large {
20    font-size: xx-large;
21}

xx-small, x-small, small, medium, large, x-large, xx-large: Deze trefwoorden definiëren basislettergroottes die per browser variëren, maar eenvoudig te gebruiken zijn.

Relatieve trefwoorden

Je kunt relatieve lettergroottes specificeren met trefwoorden in relatie tot het moeder-element of de omliggende tekstgrootte.

1p {
2    font-size: larger;
3}

larger: larger maakt de lettergrootte groter dan die van het moeder-element.

1p {
2    font-size: smaller;
3}

smaller: smaller maakt de lettergrootte kleiner dan die van het moeder-element.

Veelvoorkomende gebruiksvoorbeelden

In responsive design worden em en rem vaak gebruikt om flexibele lettergroottes te specificeren op basis van de grootte van de moeder- of rootelementen.
In fixed design of precieze ontwerpen wordt vaak px gebruikt om de grootte vast te leggen.

Voorbeelden van aanpassingen in lettergrootte

 1h1 {
 2    font-size: 2.5rem; /* 2.5 times the size of the root element's font size */
 3}
 4
 5p {
 6    font-size: 16px; /* Fixed size */
 7}
 8
 9.small-text {
10    font-size: smaller; /* Smaller than the parent element's size */
11}

Conclusie

font-size is een belangrijke eigenschap om het visuele belang en de leesbaarheid van tekst aan te passen. Het is belangrijk om eenheden en trefwoorden adequaat te gebruiken, afhankelijk van het ontwerpdoel of voor flexibele responsive design.

De `font-family`-eigenschap

 1/* Specific Font Names */
 2.font-family-arial {
 3    font-family: Arial, sans-serif;
 4}
 5
 6.font-family-verdana {
 7    font-family: Verdana, sans-serif;
 8}
 9
10.font-family-times {
11    font-family: "Times New Roman", serif;
12}
13
14.font-family-courier {
15    font-family: "Courier New", monospace;
16}
17
18.font-family-georgia {
19    font-family: Georgia, serif;
20}
21
22/* Generic Font Families */
23.font-family-serif {
24    font-family: serif;
25}
26
27.font-family-sans-serif {
28    font-family: sans-serif;
29}
30
31.font-family-monospace {
32    font-family: monospace;
33}
34
35.font-family-cursive {
36    font-family: cursive;
37}
38
39.font-family-fantasy {
40    font-family: fantasy;
41}

De font-family-eigenschap kan hoofdzakelijk de volgende twee soorten waarden specificeren:.

Specifieke lettertypenamen: Specificeer de naam van een bepaald lettertype. Specificeer lettertypen die op het systeem zijn geïnstalleerd of beschikbaar zijn als webfonts.
- Voorbeeld:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Generieke lettertypefamilie: Specificeer een groep alternatieve lettertypen die gebruikt wordt wanneer een specifiek lettertype niet beschikbaar is.
- Voorbeeld:
  - serif: Serif (bijv. Times New Roman, Georgia)
  - sans-serif: Sans-serif (bijv. Arial, Verdana)
  - monospace: Monospace (bijv. Courier New, Lucida Console)
  - cursive: Cursief (bijv. Comic Sans MS)
  - fantasy: Fantasie (bijv. Papyrus, Impact)

Hoe `font-family` te specificeren

Bij het specificeren van meerdere lettertypen wordt aanbevolen om lettertypenamen te scheiden met komma's en aan het einde een generiek lettertype als alternatieve optie op te nemen.

1p {
2    font-family: "Times New Roman", Georgia, serif;
3}

In dit geval, als Times New Roman niet beschikbaar is, wordt Georgia gebruikt, en als geen van beide beschikbaar is, wordt een serif lettertype gebruikt.

De `font-weight` Eigenschap

 1/* Keyword Values */
 2.font-weight-normal {
 3    font-weight: normal; /* Standard thickness (usually 400) */
 4}
 5
 6.font-weight-bold {
 7    font-weight: bold; /* Bold (usually 700) */
 8}
 9
10.font-weight-bolder {
11    font-weight: bolder; /* Bolder than the parent element */
12}
13
14.font-weight-lighter {
15    font-weight: lighter; /* Lighter than the parent element */
16}
17
18/* Numeric Values */
19.font-weight-100 {
20    font-weight: 100; /* Thin (Thin) */
21}
22
23.font-weight-200 {
24    font-weight: 200; /* Extra Light */
25}
26
27.font-weight-300 {
28    font-weight: 300; /* Light */
29}
30
31.font-weight-400 {
32    font-weight: 400; /* Normal */
33}
34
35.font-weight-500 {
36    font-weight: 500; /* Medium */
37}
38
39.font-weight-600 {
40    font-weight: 600; /* Semi Bold */
41}
42
43.font-weight-700 {
44    font-weight: 700; /* Bold */
45}
46
47.font-weight-800 {
48    font-weight: 800; /* Extra Bold */
49}
50
51.font-weight-900 {
52    font-weight: 900; /* Black */
53}

font-weight is een CSS-eigenschap die wordt gebruikt om de dikte van tekst te specificeren. Het speelt een belangrijke rol in de visuele nadruk en stijl van tekst en wordt gebruikt om de letterstijl te wijzigen. font-weight kan worden gespecificeerd met nummers of trefwoorden om een reeks diktes aan te geven, van dun tot vet.

Hoofdwaarden van `font-weight`

Trefwoorden

1p {
2    font-weight: normal; /* Default thickness */
3}

normaal vertegenwoordigt het standaard lettergewicht. Dit komt doorgaans overeen met 400.

1p {
2    font-weight: bold; /* Bold */
3}

vet vertegenwoordigt vette tekst. Dit komt doorgaans overeen met 700.

1p {
2    font-weight: bolder; /* Bolder than the parent element's font-weight */
3}

vetter vertegenwoordigt tekst die vetter is dan het bovenliggende element.

1p {
2    font-weight: lighter; /* Lighter than the parent element's font-weight */
3}

lichter vertegenwoordigt tekst die lichter is dan het bovenliggende element.

Numerieke Waarden

1p {
2    font-weight: 300; /* Light text */
3}
4
5h1 {
6    font-weight: 700; /* Bold text */
7}

font-weight kan ook worden gespecificeerd als een nummer, variërend van 100 tot 900. Kleinere nummers resulteren in dunnere tekst, en grotere nummers resulteren in vettere tekst. Gewoonlijk ondersteunen lettertypefamilies een reeks specifieke diktes, maar niet alle nummers zijn beschikbaar voor alle lettertypen.

100: Dun
200: Extra Licht
300: Licht
400: Normaal
500: Medium
600: Halfvet
700: Vet
800: Extra Vet
900: Zwart

Voorbeelden van hoe `font-weight` te gebruiken

 1h1 {
 2    font-weight: 900; /* Black (Extra Bold) */
 3}
 4
 5p.normal {
 6    font-weight: normal; /* Standard thickness */
 7}
 8
 9p.bold {
10    font-weight: bold; /* Bold */
11}
12
13p.lighter {
14    font-weight: lighter; /* Lighter than the parent element */
15}
16
17p.custom-weight {
18    font-weight: 500; /* Medium */
19}

Praktisch Gebruik

Standaardtekst gebruikt meestal 400 (normaal).
Voor koppen of benadrukte delen wordt vaak 700 (vet) gebruikt.
Afhankelijk van het ontwerp kunnen ook tussenliggende gewichten zoals 500 of 600 worden gebruikt om overaccentuering te voorkomen.

Samenvatting

font-weight is een eigenschap die de dikte van de tekst specificeert, met behulp van trefwoorden zoals normaal of vet, of cijfers van 100 tot 900.
lighter en bolder passen zich relatief aan op basis van de dikte van het bovenliggende element.
Het kiezen van een passende font-weight op basis van ontwerp en leesbaarheid is belangrijk.

De `font-style` Eigenschap

 1/* Font style examples */
 2.font-style-normal {
 3    font-style: normal; /* Normal font style */
 4}
 5
 6.font-style-italic {
 7    font-style: italic; /* Italic */
 8}
 9
10.font-style-oblique {
11    font-style: oblique; /* Slanted text */
12}
13
14.font-style-oblique-20deg {
15    font-style: oblique 20deg; /* Slanted text with a 20-degree angle */
16}

font-style is een CSS-eigenschap die wordt gebruikt om de stijl van tekens te specificeren, met name voor het toepassen van cursieve of normale stijlen. Deze eigenschap wordt vaak gebruikt voor tekstnadruk en ontwerp, vooral in titels en citaten.

Belangrijkste Waarden van `font-style`

`normal`

1p {
2    font-style: normal;
3}

normaal is de standaard tekenstijl (normaal rechtopstaande tekens).

`italic`

1p {
2    font-style: italic;
3}

cursief maakt de tekst cursief (schuin). Deze stijl kan worden toegepast als de lettertypefamilie cursieve letters ondersteunt.

`oblique`

1p {
2    font-style: oblique;
3}

oblique maakt de tekst schuin. In tegenstelling tot italic, als het lettertype geen cursieve versie heeft, kan dit de tekst kunstmatig schuin maken.

`oblique <angle>`

1p {
2    font-style: oblique 20deg;
3}

Specificeer een hoek met oblique om de tekst in de opgegeven hoek te laten hellen. Deze specificatie is bedoeld voor verdere aanpassing van oblique. Momenteel ondersteunen de meeste browsers geen hoekspecificatie, maar sommige wel.

Gebruik van `font-style`

cursief wordt vaak gebruikt voor nadruk, citaten en boektitels.
oblique wordt vaak gebruikt wanneer een lettertype geen cursieve stijl bevat, als een manier om tekst kunstmatig schuin te maken.
normal wordt gebruikt om terug te keren naar een normale tekststijl.

Samenvatting

font-style wordt gebruikt om de helling van de tekst te beheersen, met drie hoofdwaarden: normal, italic en oblique.
In ontwerp worden cursieven vaak gebruikt om tekst te benadrukken, en als het lettertype dit niet ondersteunt, kan oblique worden gebruikt om de tekst schuin te maken.

`color`-eigenschap

 1/* Color examples */
 2.color-red {
 3    color: red;
 4}
 5
 6.color-hex {
 7    color: #FF5733;
 8}
 9
10.color-rgb {
11    color: rgb(255, 87, 51);
12}
13
14.color-rgba {
15    color: rgba(255, 87, 51, 0.7);
16}
17
18.color-hsl {
19    color: hsl(14, 100%, 60%);
20}
21
22.color-hsla {
23    color: hsla(14, 100%, 60%, 0.7);
24}

De color-eigenschap is een fundamentele eigenschap in CSS om de kleur van tekst te specificeren. Deze eigenschap wordt gebruikt om de tekstkleur van HTML-elementen te wijzigen en kan kleuren in verschillende formats specificeren.

Uitleg:

De color-red-klasse specificeert de tekstkleur als rood met behulp van een sleutelwoord.
- Je kunt kleurennamen zoals red, blue, green gebruiken die zijn gedefinieerd in CSS.
De color-hex-klasse specificeert kleuren met behulp van hexadecimale kleurcodes.
- Je kunt kleuren specificeren met 3 cijfers zoals #F00. In dit geval is #F00 dezelfde kleur als #FF0000.
De color-rgb-klasse specificeert kleuren met behulp van het RGB-formaat.
- RGB: Specificeert de rode, groene en blauwe componenten binnen een bereik van 0 tot 255.
De color-rgba-klasse gebruikt het RGBA-formaat om transparantie toe te voegen.
De color-hsl-klasse specificeert kleuren met behulp van het HSL-formaat.
- Kleuren kunnen worden gespecificeerd met tint, verzadiging en helderheid. De tint wordt gespecificeerd van 0 tot 360 graden, en verzadiging en helderheid worden gespecificeerd van 0% tot 100%.
De color-hsla-klasse gebruikt het HSLA-formaat om transparantie toe te voegen.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video

CSS `@` Regels Tekstgerelateerde CSS-eigenschappen

Lettertype-gerelateerde CSS-eigenschappen

YouTube Video

HTML maken voor voorbeeldweergave

Typografie (Lettertype-gerelateerd)

font-size eigenschap

Belangrijkste manieren om waarden te specificeren

Absolute waarden(px, pt)

Relatieve waarden(em, rem, %)

Trefwoorden

Relatieve trefwoorden

Veelvoorkomende gebruiksvoorbeelden

Voorbeelden van aanpassingen in lettergrootte

Conclusie

De font-family-eigenschap

Hoe font-family te specificeren

De font-weight Eigenschap

Hoofdwaarden van font-weight

Trefwoorden

Numerieke Waarden

Voorbeelden van hoe font-weight te gebruiken

Praktisch Gebruik

Samenvatting

De font-style Eigenschap

Belangrijkste Waarden van font-style

normal

italic

oblique

oblique <angle>

Gebruik van font-style

Samenvatting

color-eigenschap

Uitleg:

YouTube Video

`font-size` eigenschap

De `font-family`-eigenschap

Hoe `font-family` te specificeren

De `font-weight` Eigenschap

Hoofdwaarden van `font-weight`

Voorbeelden van hoe `font-weight` te gebruiken

De `font-style` Eigenschap

Belangrijkste Waarden van `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

Gebruik van `font-style`

`color`-eigenschap