Waar staat CSS nou eigenlijk voor? Dit staat voor Cascading stylesheet, of vrij vertaald naar het Nederlands: trapsgewijze stijlopsomming.

Met CSS kan van elk element op een webpagina (tekst, afbeelding, lijst, ...) bepaald worden hoe het er uitziet en waar het moet staan of dit nu op één pagina telt of 230 pagina's, alle elementen die gelinkt zijn aan die CSS zal hetzelfde weergegeven worden.

Bijvoorbeeld, alle koppen van niveau 1 < h1&lgt; geven we een rode kleur. Meer dan de regel h1 { color: red } is daar niet voor nodig! En het kost weinig tijd om de opmaak achteraf nog te wijzigen.

U kunt met Css verschillende dynamische effecten maken, zoals tekst laten oplichten als u er met de muisaanwijzer overheen beweegt, daar hoeft geen Javascript aan te pas komen.

Je kan het uiterlijk van een website compleet veranderen door alleen een ander stijlblad te gebruiken. Surf naar www.csszengarden.com. Het is een bijzondere demonstratie project om te zien dat alle ontwerpen gebruikmaken van één en dezelfde HTML-pagina en toch heel verschillend zijn. Je hebt hier ook een Nederlandse versie van, download de HTML-pagina (index.html) via http://www.csszengarden.com/tr/nl/. Creëer nu zelf een eigen vormgeving voor 'opmaak.css'.

Elke stijlregel is opgebouwd uit twee hoofdonderdelen:

  1. de selector
  2. de declaratie

De selector bepaalt waarop de stijlregel van toepassing is. Dat kan een HTML-element zijn, maar het kunnen ook andere onderdelen op de pagina zijn zoals een id of class. Voorlopig beperkt u zich tot HTML-elementen.

De declaratie bepaalt de opmaak van het element. Dit bestaat ook uit twee onderdelen:

  1. een eigenschap
  2. een waarde

De eigenschap is het kenmerk van een element, bijvoorbeeld de grootte of de kleur. Een waarde geeft aan welk effect de eigenschap moet hebben. In CSS zijn verschillende soorten waarden mogelijk. Een ander mogelijke waarden is inherit (de waarde wordt overgeërfd) of auto (de waarde wordt bepaald door de omstandigheden). Hier komen we later nog op terug.

Een eenvoudige stijlregel ziet er als volgt uit:

p { color: purple ; }

p = de HTML selector
{ = start declaratie
color = de eigenschap
purple = de waarde
; = einde eigenschap
} = einde declaratie

Met CSS maakt u weliswaar stijlbladen, maar dat betekent niet automatisch dat de opmaak in een apart blad of document moet staan. Het heeft om verschillende redenen wel mijn voorkeur.

U kunt stijlen op drie manieren toepassen:

  • Inline stijlblad (binnen de HTML-tag);
    	<h1 style="color:#ccc;">
    Nadeel: U moet de inline stijlen ook steeds herhalen als u andere koppen dezelfde opmaak wilt geven.
  • Intern stijlblad (binnen de Head-tag);
    	
    		<style type="text/css">
    		h1 { color: #ccc; }
    		</style>
    
    Nadeel: Een ingesloten stijlblad definieert de opmaak voor het hele document, niet voor de verschillende pagina's.
  • Extern stijlblad (wordt gekoppeld of geïmporteerd);
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    

In de regel <link> worden drie dingen bepaald:

  1. Het type koppeling rel='stylesheet': Het HTML-attribuut rel geeft aan welke relatie het huidige document heeft met het gekoppelde document. In dit geval dus een stijlblad.
  2. De plaats waar het stijlblad te vinden is href='stijl.css': In dit voorbeeld bevindt het stijlblad zich in dezelfde directory of map als het HTML- document.
  3. Het type van het gekoppelde document type='text/css': Het HTML-attribuut type verteld de browser wat voor soort bestand het kan verwachten, zodat eventueel benodigde plug-ins kunnen worden geladen.

De selector van een stijlregel bepaalt waarop de opmaak van toepassing is. Dat kan een HTML-element zijn, maar ook een unieke id, een klasse of de eerste regel van een alinea.

Selectors kunnen gecombineerd worden, waardoor een bepaalde opmaak bijvoorbeeld alleen geldt voor de eerste alinea na een kop.

Selectors bepalen de regels:

  1. HTML-selector
    Voorbeelden: h1, p, div, span, img, ...
  2. ID-selector
    Voorbeelden: #menu, #inhoud, #footer, ...
  3. Klassen-selector
    Voorbeelden: .tekst, .titel, .foto, ...
  4. Pseudo-klassen en pseudo-elementen
    Voorbeelden: a:hover, a:visited, img:hover, ....

Tip: Gebruik geen spaties in CSS-namen zoals ".email link" is niet correct, je kan dit op verschillende manieren oplossen: onderstrepingsteken ".email_link" of hoofdlettergebruik ".emaillink".

1. De HTML-selector

Via het opmaken van HTML-selectors kan je stijlkenmerken toekennen aan gelijke elementen:

h1 { color: red }
// meerdere selectors dezelfde waarden geven
p, table { color: green } /

2. ID-selector

Elk element in een document kan een eigen, unieke naam krijgen: een id of identificatie. Omdat een id uniek moet zijn, is dat maar voor één element! In het HTML-document gebruikt u het attribuut id als volgt:

<div id="navigatie"> </div>
In het CSS-document ga dit vooraf met het #-teken :
#menu { background-color: #c00 }

In de volgende voorbeeld geldt de opmaak alléén voor de HTML-selector binnen de id menu.

#menu li { color: green }

3 Klassen-selector

Aan elementen kan een klasse toegewezen worden. Een klasse is in tegenstelling tot een id niet uniek en ga je vaak meerdere keren oproepen. Je gebruikt klassen om gelijksoortige elementen met behulp van één stijlregel dezelfde opmaak te geven. Neem als voorbeeld een website die nieuws uitbrengt. Je wilt dat elke eerste In het CSS-document ziet de opmaak er als volgt uit:

alinea van een bericht, net zoals vaak in de krant te zien is, vet wordt weergegeven. In HTML zou je het gecodeerd hebben met de tag <strong> of <b> om dat effect te krijgen. Op honderd berichten zijn dit heel wat <strong>-tags.

Nu kunt u het oplossen met een klassen-selector en één stijlregel. De stijlregel voor de klasse intro begint met een . (punt). Dit is het kenmerk van een klassenselector.

		.intro { font-weight: bold; }
		
De bijhorende HTML-code ziet er zo uit:
<p class="intro"> er is groot nieuws te melden! </p>

U gebruikt klassen als u een aantal elementen in dezelfde stijl op dezelfde pagina hebt. Je kan ook meerdere klassen als waarden achter elkaar oproepen binnen het attribuut class!

<p class="intro titel" > er is groot nieuws te melden! </p>

Stel dat de stijl van een selector in tegenspraak is met die van een identity en dat die weer in tegenspraak is met die van een class?

Wie is nu de baas?

  1. Een inline stijlblad (binnen de HTML-tag)
  2. Externe en intern stijlblad (binnen de head)
  3. Browser standaard instellingen
<h1 style="font-size:12px" class="tekst"> De style heeft voorrang boven
de CLASS-selector en dan de HTML-tag H1 </h1>

Een id-selector is specifieker dan een class-selector en heeft daardoor binnen het cascading mechanisme voorrang wanneer beide voor een element zijn opgenomen en dezelfde eigenschappen gebruiken.

In een stijlblok in de head van een document zijn de volgende stijlregels opgenomen:

<h3 class="speciaal" id="ab03x"> De ID-selector heeft voorrang boven
de CLASS-selector en de tekst van H3 is dus rood en geen blauw </H3>

h3 { color: #000000; background-color: #FFFFFF; font-size: 16px; } 
.speciaal { color: #336699; background-color: #FFFFFF; }
#ab03x { color: #FF0000; background-color: #FFFFFF; }  

Met de eigenschappen color bepaalt u de (voorgrond) kleur van tekst in element. Een stijlregel voor witte tekst kan op vier manieren worden samengesteld:

body { color: white }
body { color: #ffffff }
body { color: rgb(255, 255, 255) }
body { color: rgb(100%, 100%, 100% }
body { color: rgba(100%, 100%, 100%, 1.0 }

De hexidecimale notatie kan worden afgekort als paren die uit dezelfde waarden bestaan. Wit #ffffff wordt dan #fff. Op www.katinkahesselink.net/webvisie/css_ kleur_tabel.htm zie je een overzicht van HTML Kleuren-namen en hun hexadecimale codes.

De eigenschap background-color bepaalt de achtergrondkleur, maar u kunt ook samenvatten in de eigenschap background. Hierbij moet u niet alleen denken aan de achtergrond van het hele document, elk element heeft een achtergrond en dat kan net zo goed de ruimte rondom een koptekst zijn als een met <div> gedefinieerd blok op de pagina zijn. Dit wordt op dezelfde manier gebruikt als bij de eigenschap color.

body { background-color: black }

Een webpagina maakt vaak een rustige indruk als de kleuren die erop gebruikt worden bij elkaar passen. Via deze website http://paletton.com start je van een basiskleur. Bij elke combinatie zijn een aantal variaties mogelijk zoals contrast, triad, tetriad, ...

Wat is het verschil tussen PX, EM en Percent?

Pixel is een statische meting, terwijl procent en EM zijn relatieve metingen. De grootte van een EM of percentage hangt af van de ouder.

EM waarde

<p>These paragraphs have a calculated line-height of: 2x16px = 32px.</p>
<div>The font-size of the div element is set to 30px.
<span>The span element inside the div element has a font-size of 0.5em, 
which equals to 0.5x30 = 15px</span>.</div>
p {
  font-size: 16px;
  line-height: 2em;
}

div {
  font-size: 30px;
  border: 1px solid black;
}

span {
  font-size: 0.5em;
}

Wil je alles later een beetje groter, dan verhoog je enkel het ouder element (body). Relatieve lengte-eenheden schalen beter tussen de verschillende renderingmediums.

body { font-size: 16px; }
h1 { font-size: 1.5rem }

Indien het tekstformaat van de body-tag 16 pixels, dan 150% of 1,5 EM bedraagt 24 pixels (1,5 * 16).

Bekijk het voorbeeldje van w3school hier.

View height(vh) en view width-waarden (vw)

<h1>Hello</h1>

<p>Resize the width of the browser window to see how the font-size of h1 changes.</p>
<p>1vw = 1% of viewport width.</p>
h1 {
  font-size: 20vw;
}

Bekijk het voorbeeldje van w3school hier.

Met de eigenschap viewheight kan je zorgen voor fullscreen foto's.

<div class="fullscreen a"><p>a<p></div>
<div class="fullscreen b"><p>b</p></div>
<div class="fullscreen c"><p>cv/p></div>
<div class="fullscreen d"><p>d</p></div>
* {
  box-sizing: border-box;
  margin: 0;
}

body {
  text-align: center;
  font-family: 'Lato';
}

p {
  font-size: 6em;
}

.fullscreen {
  width: 100%;
  height: 100vh;
  color: white;
  padding: 40vh;
}

.a {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/vwa.jpg') center/cover;
}

.b {
  background: #aadd66;
}

.c {
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/vwc.jpg') center/cover;
}

.d {
  background: #ddaa66;
}