CSS klinkt je vast bekend in de oren. Ook wij als e-learning consultants gooien er regelmatig een stukje CSS tegenaan in onze dagelijkse werkzaamheden. Als ik een telefonisch consult heb lossen we hands-on issues op en soms pas ik CSS toe om tot het gewenste resultaat te komen. Mijn gesprekspartner klinkt dan veelal verwonderd: “Oh, kun je dat zo snel oplossen met 1 regel code?” CSS is iets wat voor veel mensen onbereikbaar lijkt, maar het absoluut niet is. Maar.. beginnen je oren nu te klapperen en is CSS een nog abstract begrip voor jou? Lees dan eens rustig deze blog. Aan het einde behandel ik wat basis CSS code om je in de mood(le) te krijgen!
Wat is CSS?
Wat is CSS? CSS betekent letterlijk Cascading Style Sheets. Eigenlijk is het niets meer of minder dan een document waarin je de stijl opschrijft van je (Moodle) site, ook wel een stylesheet genaamd. Hiermee kunnen we de vormgeving van ieder element in de webpagina bepalen, waaronder kleur, lettertype, lijntjes en schaduwen. Je stylesheet wordt actief doordat HTML ernaar verwijst. De (kale) HTML opbouw gaat zich aanpassen naar de stijl die je hebt bepaald in je stylesheet. Je kunt het zien als een huid (design) die je over het skelet (bouwwerk) heentrekt.
Een Moodle site is daarin niet anders. Met een setup bouwen we een HTML code op (bouwwerk) en installeren we een template (design), op maat ontwikkeld of uit de Moodle Community. Die template bestaat ook uit een stylesheet, alleen is deze al geschreven voor jou. Wil je de geïnstalleerde template behouden, maar wel een aantal punten naar smaak aanpassen… dan is er CSS!
De basis van CSS
De uitstraling van een leeromgeving is bijna net zo belangrijk geworden als het doel van de leeromgeving op zich. Een leeromgeving met alle elementen didactisch correct slaagt niet zo goed als de uitstraling te wensen over laat. Het oog wil immers ook wat. We willen ons geïnformeerd en bovenal geïnspireerd voelen!
We gaan een mini workshop doen om je te introduceren met CSS. In deze casus gebruik ik de website http://nl.lipsum.com/. Om specifiek het element aan te wijzen wat je wil veranderen kun je de webpagina inspecteren. Rechtermuisknop: inspecteren.
In dit scherm zie je de HTML opbouw van je (Moodle) site. Klik op de muisaanwijzer links bovenin het scherm. Hiermee kun je specifieke HTML elementen aanwijzen. Lees nu de tab ‘Fonts’.
[tabs] [tab title=”Fonts”]
Nadat je de muisaanwijzer hebt aangeklikt ga je met de muis over de eerste titel links bovenin.
Je ziet dat dit element h2 heet. Dit is de titelkop h2, net zoals je in Word je alinea’s en koppen instelt.
Onder de HTML opbouw staat de CSS. Wees gerust, de aanpassingen die je maakt zijn lokaal en hebben geen enkele invloed op de daadwerkelijke site.
In de CSS zie je
h1, h2 {
font-size: DauphinPlain;
}
Verander ‘DauphinPlain’ naar ‘Muli’. Dit is een Google Font.
Je ziet nu dat de titel, h2, verandert is van lettertype! Maar.. we zien ook dat de algehele titel van de website verandert is van lettertype. Dat komt omdat je niet alleen h2 aanspreekt, maar ook h1. Klik op de regel en verwijder h1.
Lees nu de tab ‘Colors’.
[/tab] [tab title=”Colors”]
We gaan de titel ‘Wat is Lorem Ipsum?’ een andere kleur geven. Klik voor een nieuwe regel onder ‘font-family: muli’.
Voeg de regel color: blueviolet; toe.
Je ziet nu dat de titel (en alle andere titels in h2) een andere kleur hebben aangenomen.
Lees nu de tab ‘Borders’.
[/tab] [tab title=”Borders”]
De titels krijgen ook nog een border, oftewel een omlijning. Klik voor een nieuwe regel onder ‘color: blueviolet;’.
Voeg de regel border-style: ridge; toe.
Je ziet nu dat de titel (en alle andere titels in h2) een border hebben gekregen.
Lees nu de tab ‘Padding’.
[/tab] [tab title=”Padding”]
De border staat naar mijn wens te dicht op de titel, dit gaan we dus aanpassen zodat we een betere uitlijning krijgen. Dit noemen we padding in CSS, dit betekent hoeveel ruimte er bestaat om een element heen. Klik voor een nieuwe regel onder ‘border-style: ridge;’.
Voeg de regel padding: 20px; toe. px betekent pixels, een manier om grootte te typeren. Speel er maar eens mee. Maak van 20px ook eens 10 of 5px.
Je ziet nu dat de titel (en alle andere titels in h2) meer ruimte tussen de tekst en de border heeft.
[/tab] [/tabs]
Integreren in Moodle
In mijn volgende blog over CSS lees je alles over het integreren van aangepaste CSS code in je eigen Moodle site. Voor nu, ga eerst even lekker oefenen!
Lees/leer meer over CSS op www.w3schools.com/css.
Je moet ingelogd zijn om een reactie te plaatsen.