CSS selectors, de familie

In het eerste artikel over CSS selectors heb ik je vertelt dat CSS is opgebouwd uit verschillende onderdelen. In dit tweede artikel wil ik het hebben over de familieboom die je kunt gebruiken om de verschillende namen te kunnen plaatsen.

We gebruiken hiervoor een simpele html opzet.

Ancestor

Ancestor – (stamvader): Een HTML tag die geplaatst is rondom een andere tag is de stamvader van die tag. In bovenstaand voorbeeld is de tag <html>, de stamvader van alle andere genoemde tags. De tag <body> is de stamvader van <h1>, <p> en <em>.

Descendent

Descendent – (afstammeling): Een tag in een tag is een afstammeling. In de afbeelding is <body> de afstammeling van <html>.

Tegelijkertijd is <p> een afstammeling van en <body> en <html>.

Parent

Parent – (ouder (in de vorm van vader of moeder)): Een parent is de meest directe stamvader (ancestor). In ons voorbeeld is de <html> tag dus Parent van <body> en <head>, maar niet van alle andere tags. Lees verder ยป

CSS selectors voor beginners

Oei, dat klinkt spannend, het lijkt bijna taal voor de echter computer geeks.

Echter CSS selectors voor beginners heeft als bedoeling om je te vertellen hoe het precies zit met het schrijven van CSS en welke basisprincipes je in acht moet houden wil je op een goede manier met CSS omgaan.

Het is belangrijk om de Selectors goed te gebruiken want daarmee doe je veel voordeel. Je kunt bijvoorbeeld de eerste paragraaf in een div voorzien van vetgedrukte letters zonder deze meteen een class mee te moeten geven.

Heb je geen idee waar ik het in het vorige stukje over heb dan raad ik je aan enkele beginners artikelen te lezen over CSS.

Hoe maak je een prijsoverzicht in CSS?

Je kent ze vast wel, van bijvoorbeeld een hosting bedrijf. Een prijsoverzicht met bijvoorbeeld vier mogelijkheden waaruit je kunt kiezen met bovenaan, of juist onderaan de juiste prijs.

Dit kun je maken met een afbeelding, maar het is prima mogelijk om een prijsoverzicht te maken met CSS, in combinatie met HTML. Het voordeel daarvan is dat je eenvoudig onderdelen kunt aanpassen op het moment dat er iets verandert.

Als de prijs omhoog gaat hoef je alleen maar de HTML code aan te passen en niet een hele afbeelding.
Daarnaast is HTML code natuurlijk veel beter als het gaat om zoekmachine optimalisatie.

Prijstabel in HTML en CSS

In deze tutorial laat ik je zien hoe je deze prijstabel kunt maken.

De eerste stap die we moeten nemen is het maken van een tabel, met alle gegevens.

Hoe krijg je de URL in beeld bij printen?

Wanneer je een webpagina wilt printen kun je heel wat instellingen van de website aanpassen met CSS. Je gebruikt hiervoor een specifiek stijlblad waarbij je alle gegevens voor het te printen geheel invoegt.

Hoe je dat doet lees je in een artikel over CSS voor het printen van je website.

Een van de onderdelen die het printen lastig maakt zijn de verschillende links die je gebruikt. Deze links komen er gewoon als tekst in te staan terwijl, wanneer de gebruiker print, het veel gemakkelijker is als er een complete URL gedrukt staat.