Stijlen die je af en toe nodig hebt

Stijlklassen

In een aantal gevallen kan je een stijl meer dan Ã©Ã©n keer, maar daarom niet altijd nodig hebben. Neem bijvoorbeeld afbeeldingen.Het kan zijn dat je een afbeelding de ene keer links wil uitlijnen in een tekst (met tekstomloop), de andere keer rechts en meestal gewoon over de volledige breedte wil weergeven. Het is een beetje zoals in een klaslokaal. Op een school zitten meerdere studenten. Het zijn allemaal studenten van dezelfde school, maar elke student hoort ook bij een bepaalde klas. Ze hebben dus wel allemaal gemeenschappelijke kenmerken (ze horen bij dezelfde school = lees website), maar ook bij een bepaalde klas. Studenten zitten ook in een bepaald "jaar". In dit voorbeeld komt de school overeen met de "website/webpagina's", de klas en het jaar met een CSS-klasse. "Student" is in dit geval gewoon het HTML-element dat we selecteren. Stel dat er een HTML-element met de naam "student" zou bestaan, dan kan het resultaat er als volgt uitzien:

<student class="jaar1 klas2B">
...
</student>

Een HTML-element heeft een bepaalde naam (<article>, <p>... enz), kan ook een id hebben, maar ook Ã©Ã©n of meerdere klassen:

<article id="albert_einstein" class="news topten">
...
</article>
<article id="max_planck" class="news">
...
</article>

Vervolgens kan je zowel de specifieke klassen als de id's stijlkenmerken toekennen:

#albert_einstein{
    /*specifieke kenmerken voor dit ene element*/
}
#max_planck{
    /*specifieke kenmerken voor dit ene element*/
}
.news{
    /*specifieke kenmerken voor alle elementen met de klasse news*/
}
.topten{
    /*specifieke kenmerken voor alle elementen met de klasse topten*/
}

BELANGRIJK OM TE ONTHOUDEN: eenzelfde ID mag je maar Ã©Ã©n keer op Ã©Ã©n pagina gebruiken. Een bepaalde klasse mag je op dezelfde pagina meerdere keren gebruiken.

Een voorbeeld: afbeeldingen uitlijnen in een tekst

Je weet ondertussen hoe je afbeeldingen in html plaatst. Je kan in CSS klassen definiÃ«ren om die afbeeldingen, indien je dat wenst rechts of links uit te lijnen in je tekst. In ons CSS-bestand vond je voor de afbeeldingen al de volgende regel::

img{
  max-width:100%;
}

Die stijlregel zorgt ervoor dat alle afbeeldingen die je in een HTML-pagina plaatst, nooit breder zullen worden dan 100% breedte van het element waar ze inzitten.

Stel dat je in een artikel bepaalde afbeeldingen nu links wil uitlijnen met tekstomloop, andere rechts en nog andere de volledige breedte wil geven. Standaard willen we alle afbeeldingen de volledige breedte geven van het artikel, ook als het om heel "smalle" afbeeldingen gaat (afbeeldingen met weinig pixels bijvoorbeeld) Voor de links en rechts uit te lijnen afbeeldingen definiÃ«ren we 2 klassen:

article img{
   margin: 0px;
   margin-top:13px;
   margin-bottom:13px;
   width:100%;
}

.left{
   float:left;
   margin-right:13px;
   width: 50%;
}

.right{
   float:right;
   margin-left:13px;
   width: 50%;
}

De bovenstaande code kan wat vreemd lijken, maar doet helemaal wat we willen. We stellen dat alle afbeeldingen die in een artikel staan een breedte van 100% krijgen, maar toch nog een boven- en ondermarge van 13 pixels. Hierdoor plakt de tekst niet tegen de foto aan langs onder en langs boven.

Als we aan een afbeelding ook de klasse " left" toekennen, dan krijgt de afbeelding 50% van de breedte van het artikel en is ze links uitgelijnd, maar ook nog een marge langs rechts, zodat de tekst aan de rechterkant niet tegen de afbeelding aan plakt.

Als we aan een afbeelding ook de klasse " right" toekennen, dan krijgt de afbeelding 50% van de breedte van het artikel en is ze rechts uitgelijnd, maar ook nog een marge langs links, zodat de tekst aan de linkerkant niet tegen de afbeelding aan plakt.

Het leuke is dat dit nu niet enkel werkt voor afbeeldingen. Stel dat je een citaat links of rechts zou willen uitlijnen dan kan je dezelfde klasse gebruiken:

blockquote{
   font-size:2rem;
   padding:13px;
   border:2px solid black;
}

Vervolgens kunnen we het citaat (blockquote) eveneens opmaken.

<article>
   <blockquote class="right">Een citaat</blockquote>
   <p>Een lange inhoud van het artikel...</p>
</article>

Als je wil dat de blockquote net zoals de afbeeldingen een marge langs onder en boven krijgt, dan kan je bovenstaande CSS als volgt aanpassen:

article img, 
article blockquote{
   margin: 0px;
   margin-top:13px;
   margin-bottom:13px;
   width:100%;
}

Even en oneven

In plaats van alle afbeeldingen een klasse te geven om ze links of rechts uit te lijnen, kan je ook gebruik maken van stijlregels voor even en oneven elementen. Wat dit precies betekent, zie je in het voorbeeld hieronder. Het <section>-element bevat hier 4 <article>-elementen. Het eerste en derde <article> zijn de oneven elementen, het tweede en vierde de even elementen. Elk <article> bevat een afbeelding en een onderliggende <section> met daarin een titel en een afbeelding.

<section>
	<article>
		<img src="assets/images/product1.jpg" />
		<section>
			<h1>Product 1</h1>
			<p>Lorem ipsum</p>
		</section>
	</article>
	<article>
		<img src="assets/images/product2.jpg" />
		<section>
			<h1>Product 2</h1>
			<p>Lorem ipsum</p>
		</section>
	</article>
	<article>
		<img src="assets/images/product3.jpg" />
		<section>
			<h1>Product 3</h1>
			<p>Lorem ipsum</p>
		</section>
	</article>
	<article>
		<img src="assets/images/product4.jpg" />
		<section>
			<h1>Product 4</h1>
			<p>Lorem ipsum</p>
		</section>
	</article>
</section>

De onderstaande stijlregel zorgt ervoor dat alle article-elementen een flexibele indeling krigjen, waardoor de afbeelding en de onderliggende <section> naast elkaar gaan staan. Door voor elk "even" element de richting van (flex-direction) aan te passen, zal bij de "even" article-elementen de foto aan de rechterkant gaan staan.

.afwisselend article{
  display:flex;
}
.afwisselend article:nth-child(even) {
  flex-direction: row-reverse;
}

Pseudoklassen

Met zogenaamde pseudoklassen (klassen waarvan je de naam niet zelf mag bedenken, kan je heel fijne effecten bereiken... De stijlregels van een pseudoklasse zijn niet standaar zichtbaar. Ze worden zichtbaar wanneer de gebruiker iets "doet", bijvoorbeeld ergens met zijn muis over beweegt of een stuk tekst selecteert.

De pseudoklasse :hover wordt op die manier actief als de websitebezoeker met de muis over een bepaald element beweegt. In het onderstaande voorbeeld moet je "kleur2" natuurlijk vervangen door een kleurnaam uit je eigen CSS-bestand.

nav a:hover{
    color:var(--kleur2);
}

Pseudo-elementen

Pseudo-elementen zijn inhouden die je via CSS toevoegt aan je HTML-inhoud. M.a.w. de inhouden staat niet rechtstreeks in je HTML-code, maar voeg je toe via CSS. In het onderstaande voorbeeld voegen we met ::beforevoor elk <h1>-element met CSS de inhoud "Hoofdstuk " toe.

h1::before{
    content: "Hoofdstuk: ";
}

Naast het pseudo-element ::before, bestaat eveneens ::after.

Tellers

Met CSS kan je elementen ook "tellen" en vervolgens een teller toevoegen via een pseudo-element. Hiervoor moet je eerst, bovenaan in je CSS-code de teller op 0 zetten en de teller ook een naam geven. Bij elke <h1>-titel die in je document voorkomt, verhoog je de teller met "1". Vervolgens kan je de teller toevoegen met een pesudo-element.

Je geeft de teller de naam "hoofdstuk".
Je zet de teller op "0" met counter-reset:hoofdstuk
Je verhoogt de teller met 1 bij elke nieuwe titel: counter-increment: hoofdstuk.
Vervolgens voeg je de teller toe bij het stijlkenmerk "content" in het pseudo-element "before".

body{
    counter-reset: hoofdstuk
}

h1{
    counter-increment: hoofdstuk;
}

h1::before{
    content: "Hoofdstuk " counter(hoofdstuk) ": ";
}