CSS Basis
Dit artikel legt de basisprincipes van CSS uit.
Je kunt meer leren over CSS-selectors, combinatoren en specificiteit.
YouTube Video
HTML/CSS voor Voorbeeldweergave
css-base.css
1body {
2 font-family: Arial, sans-serif;
3 line-height: 1.6;
4 margin: 20px 20px 600px 20px;
5 background-color: #f4f4f9;
6 color: #333;
7}
8
9header h1 {
10 font-size: 24px;
11 color: #333;
12 text-align: center;
13 margin-bottom: 20px;
14}
15
16h2, h3 {
17 color: #555;
18}
19
20h2 {
21 font-size: 20px;
22 border-bottom: 2px solid #ccc;
23 padding-bottom: 5px;
24}
25
26h3 {
27 font-size: 18px;
28 margin-top: 20px;
29 padding-left: 10px;
30 border-left: 2px solid #ccc;
31}
32
33h4 {
34 margin: 0;
35 margin-left: 10px;
36 font-size: 14px;
37}
38
39article section p {
40 margin-left: 40px;
41}
42
43p, pre {
44 margin: 10px 0;
45 padding: 0;
46}
47
48ul, ol, dl, menu {
49 margin: 0;
50}
51
52pre {
53 background-color: #f0f0f0;
54 border-left: 4px solid #ccc;
55 padding: 10px;
56 overflow-x: auto;
57}
58
59.sample-view {
60 border: 1px solid #eee;
61 border-left: 4px solid #eee;
62 padding: 10px;
63 overflow-x: auto;
64}
65
66p.sample, .sample {
67 background-color: #e7f4e9;
68 padding: 10px;
69 border-left: 4px solid #7bbd82;
70 color: #333;
71}
72
73p.sample-error, .sample-error {
74 background-color: #f4e7e7;
75 padding: 10px;
76 border-left: 4px solid lightcoral;
77 color: #333;
78}
79
80.example {
81 background-color: #e0f0ff;
82 padding: 10px;
83 border-left: 4px solid #4a90e2;
84 color: #333;
85}
86
87p.sample-warn, .sample-warn {
88 background-color: #f4f1e7;
89 padding: 10px;
90 border-left: 4px solid #bda97b;
91 color: #333;
92}
93
94code {
95 background-color: #f4f4f4;
96 padding: 2px 4px;
97 border-radius: 4px;
98 font-family: monospace;
99}
100
101span {
102 font-weight: bold;
103}
104
105article {
106 background-color: white;
107 padding: 20px;
108 margin-bottom: 10px;
109 border-radius: 8px;
110 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
111}
112
113section {
114 margin-bottom: 20px;
115}
116
117section div {
118 width: 400px;
119 height: 50px;
120 margin: 20px auto;
121 color: white;
122 display: flex;
123 align-items: center;
124 justify-content: center;
125 font-size: 1.2rem;
126 background-color: lightgray;
127 border: 1px solid #ccc;
128}
129
130header h4 {
131 text-align: right;
132 color: #666;
133 font-size: 0.8em;
134 text-decoration: none;
135}
136
137header + pre {
138 margin: 0;
139 margin-top: -20px;
140 padding-top: 14px;
141 font-size: 0.9em;
142}
143
144header + .sample-view {
145 margin: 0;
146 margin-top: -16px;
147}
148
149.sample-view p {
150 margin: 0;
151 padding: 0;
152}css-basics.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 Basics</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-basics.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Basics</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Selectors</h2></header>
19 <article>
20 <h3>Universal Selector : *</h3>
21 <section>
22 <header><h4>CSS</h4></header>
23<pre class="sample">
24* {
25 font-family:'Courier New', Courier, monospace;
26}
27</pre>
28 </section>
29 </article>
30 <article>
31 <h3>Element Selector</h3>
32 <section>
33 <header><h4>CSS</h4></header>
34<pre class="sample">
35strong {
36 color: red;
37}
38</pre>
39 <header><h4>HTML</h4></header>
40 <pre>This is <strong>sample</strong> text.</pre>
41 <header><h4>HTML+CSS</h4></header>
42 <section class="sample-view">
43 This is <strong>sample</strong> text.
44 </section>
45 </section>
46 </article>
47 <article>
48 <h3>ID Selector : #</h3>
49 <section>
50 <header><h4>CSS</h4></header>
51<pre class="sample">
52#example1 {
53 color: steelblue;
54}
55</pre>
56 <header><h4>HTML</h4></header>
57 <pre><span id="example1">This is sample text.</span></pre>
58 <header><h4>HTML+CSS</h4></header>
59 <section class="sample-view">
60 <span id="example1">This is sample text.</span>
61 </section>
62 </section>
63 </article>
64 <article>
65 <h3>Class Selector : .</h3>
66 <section>
67 <header><h4>CSS</h4></header>
68<pre class="sample">
69.example1 {
70 background-color: yellow;
71 font-weight: bold;
72}
73</pre>
74 <header><h4>HTML</h4></header>
75 <pre><span class="example1">This is sample text.</span></pre>
76 <header><h4>HTML+CSS</h4></header>
77 <section class="sample-view">
78 <section>
79 <span class="example1">This is sample text.</span>
80 </section>
81 </section>
82 </article>
83 <article>
84 <h3>Attribute Selector : [property=value]</h3>
85 <section>
86 <header><h4>CSS</h4></header>
87<pre class="sample">
88a[href="index.html"] {
89 font-weight: bold;
90}
91</pre>
92 <header><h4>HTML</h4></header>
93<pre>
94<a href="index.html">Home</a><br>
95<a href="about.html">About</a>
96</pre>
97 <header><h4>HTML+CSS</h4></header>
98 <section class="sample-view">
99 <a href="index.html">Home</a><br>
100 <a href="about.html">About</a>
101 </section>
102 </section>
103 </article>
104 <article>
105 <h3>Descendant Combinator</h3>
106 <section>
107 <header><h4>CSS</h4></header>
108<pre class="sample">
109span strong {
110 text-decoration: underline;
111}
112</pre>
113 <header><h4>HTML</h4></header>
114 <pre><span>This is <strong>sample</strong> text.</span></pre>
115 <header><h4>HTML+CSS</h4></header>
116 <section class="sample-view">
117 <span>This is <strong>sample</strong> text.</span>
118 </section>
119 </section>
120 </article>
121 <article>
122 <h3>Child Combinator : ></h3>
123 <section>
124 <header><h4>CSS</h4></header>
125<pre class="sample">
126span > em {
127 color: blue;
128}
129</pre>
130 <header><h4>HTML</h4></header>
131<pre>
132This is <em>sample</em> text.<br>
133<span>This is <em>another</em> text.</span><br>
134<span>This text is not <s><em>blue</em></s> in color.</span>
135</pre>
136 <header><h4>HTML+CSS</h4></header>
137 <section class="sample-view">
138 This is <em>sample</em> text.<br>
139 <span>This is <em>another</em> text.</span><br>
140 <span>This text is not <s><em>blue</em></s> in color.</span>
141 </section>
142 </section>
143 </article>
144 <article>
145 <h3> Next Sibling combinator : +</h3>
146 <section>
147 <header><h4>CSS</h4></header>
148<pre class="sample">
149br + b {
150 color: green;
151}
152</pre>
153 <header><h4>HTML</h4></header>
154<pre>
155<span>
156 This is <b>first text</b>.<br>
157 This is <b>second text</b>.<br>
158 <i>This</i> is <b>third text</b>.<br>
159</span>
160</pre>
161 <header><h4>HTML+CSS</h4></header>
162 <section class="sample-view">
163 <span>
164 This is <b>first text</b>.<br>
165 This is <b>second text</b>.<br>
166 <i>This</i> is <b>third text</b>.<br>
167 </span>
168 </section>
169 </section>
170 </article>
171 <article>
172 <h3>Subsequent Sibling Combinator : ~</h3>
173 <section>
174 <header><h4>CSS</h4></header>
175<pre class="sample">
176br ~ b {
177 color: steelblue;
178}
179</pre>
180 <header><h4>HTML</h4></header>
181<pre>
182<span>
183 This is <b>first text</b>.<br>
184 This is <b>second text</b>.<br>
185 <i>This</i> is <b>third text</b>.<br>
186</span>
187</pre>
188 <header><h4>HTML+CSS</h4></header>
189 <section class="sample-view">
190 <span>
191 This is <b>first text</b>.<br>
192 This is <b>second text</b>.<br>
193 <i>This</i> is <b>third text</b>.<br>
194 </span>
195 </section>
196 </section>
197 </article>
198 <article>
199 <h3>Pseudo Class ":" </h3>
200 <section>
201 <header><h4>CSS</h4></header>
202<pre class="sample">
203a:hover {
204 background-color: lightskyblue;
205}
206</pre>
207 <header><h4>HTML</h4></header>
208<pre>
209 <a href="#">Click here</a><br>
210</pre>
211 <header><h4>HTML+CSS</h4></header>
212 <section class="sample-view">
213 <a href="#">Click here</a><br>
214 </section>
215 </section>
216 </article>
217 <article>
218 <h3>Pseudo Element "::" </h3>
219 <section>
220 <header><h4>CSS</h4></header>
221<pre class="sample">
222u::before {
223 content: " ** ";
224 color: red;
225 font-weight: bold;
226}
227</pre>
228 <header><h4>HTML</h4></header>
229<pre>
230 <u>Sample Text</u>
231</pre>
232 <header><h4>HTML+CSS</h4></header>
233 <section class="sample-view">
234 <u>Sample Text</u>
235 </section>
236 </section>
237 </article>
238 </main>
239
240 <main>
241 <header><h2>Inheritance & Priority of CSS</h2></header>
242 <article>
243 <h3>CSS Specificity Rule</h3>
244 <section>
245 <header><h4>CSS Specificity</h4></header>
246 <section class="example">
247 <ol>
248 <li><b>Inline Styles</b>: Styles written directly within the HTML element.</li>
249 <li><b>ID Selectors</b>: e.g., <code>#id</code></li>
250 <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: e.g., <code>.class</code>, <code>[attribute=value]</code>, <code>:hover</code>, etc.</li>
251 <li><b>Element Selectors</b>: e.g., <code>div</code>, <code>h1</code>, <code>p</code>, etc.</li>
252 <li><b>Universal Selector</b>: <code>*</code></li>
253 </ol>
254 </section>
255
256 <header><h4>How Specificity is Calculated</h4></header>
257 <section class="example">
258 <ol>
259 <li><b>Inline Styles</b>: Always have the highest specificity and are always applied.</li>
260 <li><b>ID Selectors</b>: Worth 100 points each.</li>
261 <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: Worth 10 points each.</li>
262 <li><b>Element Selectors and Pseudo-elements</b>: Worth 1 point each.</li>
263 </ol>
264 </section>
265 </section>
266 </article>
267 <article>
268 <h3>Example of CSS Specificity Rule</h3>
269 <section>
270 <header><h4>CSS</h4></header>
271<pre class="sample">
272/* ID Selector */
273#header {
274 color: blue;
275}
276
277/* Class Selector */
278.header {
279 color: red;
280}
281
282/* Element Selector */
283h1 {
284 color: green;
285}
286</pre>
287 <header><h4>HTML</h4></header>
288 <pre><h1 id="header" class="header">Example of CSS Specificity Rule</h1></pre>
289 <header><h4>HTML+CSS</h4></header>
290 <section class="sample-view">
291 <h1 id="header" class="header">Example of CSS Specificity Rule</h1>
292 </section>
293 </section>
294 </article>
295 <article>
296 <h3>Using <code>!important</code> in CSS</h3>
297 <section>
298 <header><h4>CSS</h4></header>
299<pre class="sample">
300#important-header {
301 color: blue;
302}
303
304.important-header {
305 color: red !important;
306}
307</pre>
308 <header><h4>HTML</h4></header>
309 <pre><h1 id="important-header" class="important-header">Example of <code>!important</code></h1></pre>
310 <header><h4>HTML+CSS</h4></header>
311 <section class="sample-view">
312 <h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
313 </section>
314 </section>
315 </article>
316 <article>
317 <h3>CSS Inheritance</h3>
318 <section>
319 <header><h4>CSS</h4></header>
320<pre class="sample">
321footer {
322 color: gray;
323}
324
325p {
326 color: black;
327}
328</pre>
329 <header><h4>HTML</h4></header>
330<pre>
331<footer>
332 <p>This paragraph's text will be black.</p>
333 <span>This text will be gray.</span>
334</footer>
335</pre>
336 <header><h4>HTML+CSS</h4></header>
337 <section class="sample-view">
338 <footer>
339 <p>This paragraph's text will be black.</p>
340 <span>This text will be gray.</span>
341 </footer>
342 </section>
343 </section>
344 </article>
345 <article>
346 <h3>Cascading Styles</h3>
347 <section>
348 <header><h4>CSS</h4></header>
349<pre class="sample">
350.text {
351 color: red;
352}
353
354.text {
355 color: blue;
356}
357</pre>
358 <header><h4>HTML</h4></header>
359 <pre><p class="text">This text will be blue.</p></pre>
360 <header><h4>HTML+CSS</h4></header>
361 <section class="sample-view">
362 <p class="text">This text will be blue.</p>
363 </section>
364 </section>
365 </article>
366
367</body>
368</html>Basis Syntax
1selector {
2 property: value;
3}De basisstructuur van CSS bestaat uit selector, eigenschap en waarde. Elke combinatie van eigenschappen en waarden wordt gevolgd door een puntkomma.
selectorbepaalt op welk HTML-element de stijl wordt toegepast. In dit voorbeeld worden stijlen toegepast op alle<header>-elementen.eigenschapgeeft aan welke stijl-eigenschap moet worden gewijzigd, zoals kleur of lettergrootte.Paddingenkleurzijn in dit voorbeeld de eigenschappen.waardeis de waarde die aan de eigenschap wordt toegekend. Bijvoorbeeld, voor kleur kan hetwhiteof#9cfzijn, en voor margegrootte kan het20pxzijn.
Selectors
CSS-selectors zijn patronen om HTML-elementen te selecteren. Met selectors kun je stijlen toepassen op specifieke elementen of groepen elementen.
Universele Selector
1/* Universal Selector : "*" */
2* {
3 font-family:'Courier New', Courier, monospace;
4}*is een universele selector die op alle elementen wordt toegepast.- In dit voorbeeld wordt het lettertype voor alle elementen gewijzigd.
Elementselector
1/* Element Selector */
2strong {
3 color: red;
4}- Een elementselector is een selector die wordt toegepast op specifieke HTML-tags door de naam van de HTML-tag te schrijven.
- In dit voorbeeld wordt de tekstkleur van het
<strong>-element gewijzigd in rood.
ID-selector
1/* ID Selector : "#" */
2#example1 {
3 color: steelblue;
4}#is een ID-selector die wordt gebruikt om elementen op basis van een ID te selecteren.- ID's zijn uniek, dus er kan maar één element met dezelfde ID op één pagina zijn.
Class-selector
1/* Class Selector : "." */
2.example1 {
3 background-color: yellow;
4 font-weight: bold;
5}.is een class-selector die wordt gebruikt om elementen op basis van een class te selecteren.- Voeg een class-attribuut toe aan HTML-elementen om stijlen toe te passen op elementen die tot die class behoren.
Attribuutselector
1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3 font-weight: bold;
4}[href="index.html"]is een attribuutselector die elementen met een specifiek attribuut selecteert.- In dit voorbeeld wordt de tekst van het
<a>-element met de waardeindex.htmlvoor hethref-attribuut vetgedrukt weergegeven.
Combinator
Combinators worden gebruikt om meerdere selectors te combineren en elementen te selecteren die specifieke relaties hebben. Een selector selecteert elementen afzonderlijk, terwijl een combinator de structuurrelaties tussen elementen definieert.
Afstammingscombinator
1/* Descendant Combinator : " " */
2span strong {
3 text-decoration: underline;
4}- Een afstammingscombinator past stijlen toe op alle opgegeven elementen binnen een bepaald element.
- In dit voorbeeld wordt een onderstreping toegepast op
<strong>-elementen binnen<span>-elementen.
Kindcombinator
1/* Child Combinator : ">" */
2span > em {
3 color: blue;
4}- Het
>-teken tussenspanenemwordt gebruikt als een kindcombinator. In dit voorbeeld worden stijlen alleen toegepast op<em>-elementen die directe kinderen zijn van<span>-elementen. In het voorbeeld van de derde regel wordt de stijl niet toegepast, omdat er een<s>-tag tussen de<span>- en<em>-tags staat.
Aangrenzende broer/zus-combinator
1/* Next Sibling combinator */
2br + b {
3 color: green;
4}- De aangrenzende sibling-combinator met het
+-teken past stijlen toe op een sibling-element dat direct na een bepaald element verschijnt. - In dit voorbeeld wordt de tekstkleur groen alleen als een
<b>-tag direct na een<br>-tag verschijnt.
Algemene sibling-combinator
1/* Subsequent Sibling Combinator */
2br ~ b {
3 color: steelblue;
4}- De algemene sibling-combinator met het
~-teken selecteert alle sibling-elementen die na een bepaald element verschijnen. - In dit voorbeeld krijgt de tekstkleur van alle
<b>-tags die na een<br>-tag verschijnen een blauwe tint.
Pseudo-klassen
1/* Pseudo Class : ":" */
2a:hover {
3 background-color: lightskyblue;
4}:wordt gebruikt om pseudo-klassen te selecteren.- Details over pseudo-classes worden in een ander artikel uitgelegd.
Pseudo-elementen
1/* Pseudo Element : "::" */
2u::before {
3 content: " ** ";
4 color: red;
5 font-weight: bold;
6}::wordt gebruikt om pseudo-elementen te selecteren.- Details over pseudo-elementen worden ook in een ander artikel uitgelegd.
CSS Specificiteit
Voorrang in CSS is cruciaal om te begrijpen hoe CSS werkt en om onverwachte stijltoepassingen te voorkomen. CSS-prioriteit bepaalt welke regel het krachtigst is wanneer meerdere CSS-regels op hetzelfde element worden toegepast. De prioriteit van CSS wordt voornamelijk bepaald door de volgende factoren.
- Inline styles: Stijlen die direct in HTML worden geschreven
- ID Selectoren ：
#id - Classes, Attribuutselectoren, Pseudo-classes ：
.class,[attribute=value],:hover, etc - Elementselectoren ：
div,h1,p, etc - Universele Selector ：
*
Hoe hoger op de lijst, hoe groter de prioriteit, en hoe lager op de lijst, hoe kleiner de prioriteit.
Hoe specificiteit te berekenen
De CSS-prioriteit wordt bepaald door het 'gewicht' van elke selector te kwantificeren. Het gewicht van elke selector wordt als volgt weergegeven.
- Inline-stijlen: Inline-stijlen zijn het krachtigst en hebben altijd prioriteit.
- ID-selectors: Eén ID-selector komt overeen met '100 punten'.
- Klasse-, attribuutselectors, pseudo-klassen: Deze komen overeen met '10 punten'.
- Elementselectors, pseudo-elementen: Deze komen overeen met '1 punt'.
De regel met de hoogste score wordt toegepast.
Voorbeeld:
1/* ID Selector */
2#header {
3 color: blue;
4}
5
6/* Class Selector */
7.header {
8 color: red;
9}
10
11/* Element Selector */
12h1 {
13 color: green;
14}1<h1 id="header" class="header">Example of CSS Specificity Rule</h1>Hier heeft de <h1>-tag drie verschillende stijlen toegepast:
h1elementselector (1 punt).headerklasse-selector (10 punten)#headerID-selector (100 punten)
In dit geval, omdat de ID-selector de hoogste prioriteit heeft, wordt color: blue toegepast.
Prioriteit overschrijven met !important
Gebruik !important als je een stijl wilt forceren en de gebruikelijke prioriteiten wilt negeren. !important heeft de sterkste invloed op alle regels en overschrijft alles.
Voorbeeld:
1#important-header {
2 color: blue;
3}
4
5.important-header {
6 color: red !important;
7}1<h1 id="important-header" class="important-header">Example of <code>!important</code></h1>- Hier wordt
color: red !important;gespecificeerd, waardoorcolor: redvoorrang krijgt.
Overerving en prioriteit
CSS kan stijlen van ouder-elementen naar kind-elementen overerven. Bijvoorbeeld, eigenschappen zoals color en font-family worden standaard geërfd. Echter, als een specifiek kind-element direct wordt gestyled, heeft de direct toegepaste stijl voorrang op geërfde stijlen.
Voorbeeld:
1footer {
2 color: gray;
3}
4
5p {
6 color: black;
7}1<footer>
2 <p>This paragraph's text will be black.</p>
3 <span>This text will be gray.</span>
4</footer>- Hier wordt
color: gray;toegepast op defooter-tag, maar omdatcolor: black;expliciet is gespecificeerd voor hetp-element, wordt de tekst van hetp-element weergegeven in zwart. Ondertussen erft hetspan-element decolor-eigenschap van defooteren wordt weergegeven in grijs.
CSS Cascade en Prioriteit
Zoals de naam 'Cascading Style Sheets (CSS)' al aangeeft, 'cascaderen' stijlen. Dit betekent dat als er meerdere stylesheets of regels zijn, de laatst gedefinieerde regel voorrang krijgt. Als de prioriteiten gelijk zijn, wordt de stijl die later is geschreven toegepast.
Voorbeeld:
1.text {
2 color: red;
3}
4
5.text {
6 color: blue;
7}1<p class="text">This text will be blue.</p>- Hier wordt
color: blue;later gedefinieerd, dus de tekst wordt weergegeven in blauw.
Samenvatting
De prioriteit in CSS wordt bepaald met behulp van algoritmes zoals specificiteit, maar hier hebben we alleen de basisaspecten bekeken.
De basisregels zijn als volgt:
- Inline-stijlen hebben altijd de hoogste prioriteit.
- ID-selectoren zijn krachtig en hebben voorrang boven klassen en tags.
- Klasse-selectoren en pseudo-klassen hebben een gemiddeld prioriteitsniveau.
- Tag-selectoren en pseudo-elementen hebben het laagste prioriteitsniveau.
- !important overschrijft de normale prioriteit en past de stijl dwingend toe.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.