Nederdev : web and Drupal stuff

"CSS? Nooit van gehoord"

Veel mensen weten niet wat het is en wat je ermee kan doen. Nog steeds zijn er veel designers die hun pagina's met HTML opmaken omdat ze niets van CSS weten of denken dat het voorbehouden is aan W3C goeroe's. Ten eerste is het helemaal niet moeilijk en ten tweede kan je zelf ook zo'n goeroe worden :-) In deze tutoriel leer je waarom je CSS moet gebruiken en hoe je het gebruikt.

Inleiding

Een eenvoudige website bestaat uit minimaal één component: HTML. Hiermee bouw je structuur, een soort raamwerk, om de informatie van een pagina heen: <h1> voor de koptekst, <p> voor paragrafen enzovoort. Helaas ziet dit er nogal onaantrekkelijk uit voor een website; het is puur zwart en wit. Natuurlijk wil je dat jouw website er kleurig bij staat en dat kan niet beter dan met, je raadt het al, CSS. Met CSS kan je alle elementen op een pagina een opmaak geven, positioneren, hover (als je met de muis erop staat, bij Javascript "mouseover") effecten meegeven, enzovoort. De naam staat voor Cascading Stylesheets (Trapsgewijze stijlbladen). Deze trapsgewijze werking is een zeer krachtig element van CSS waar ik later nog op terugkom.

Een stukje geschiedenis

De meeste beginners - zelfs mensen met webdesign als beroep - op het gebied van HTML maken hun pagina's op met HTML code. In het begin van het web was er nog geen CSS of een goede CSS ondersteuning door browsers, dus het was geen logische keus om het te gaan gebruiken. Op deze manier is het opmaken met HTML ingeburgerd. Omdat dit erg inefficiënt is, leg ik het alternatief CSS uit;

• Waar je in HTML beperkt bent tot stijlen die niet op elk element van toepassing zijn, bestaan deze beperkingen in CSS niet. Het is dus veel uitgebreider.
• HTML opmaakcodes verstuur je bij elke pagina. Het CSS bestand kan je één keer versturen en dan staat deze in de cache van de browser. Dit scheelt dataverkeer.
• HTML opmaakcodes worden door het W3C steeds meer als deprecated (afgekeurd) bestempeld. In de toekomst kan de ondersteuning door browsers hiervoor steeds minder worden en het is slecht gebruik van HTML.
• En dan het, voor webdesigners, duidelijkste voordeel van CSS: Als je op elke HTML pagina naar hetzelfde CSS bestand linkt, hoef je alleen dat ene bestand aan te passen om de hele site een ander uiterlijk te geven.

De opbouw van CSS

Heel leuk en aardig dat je nu weet wat CSS is, maar als je er niet mee kan werken heeft het nog weinig nut. Opzich is CSS heel eenvoudig. Het werkt volgens een paar strakke regels en kent geen uitzonderingen. In het volgende voorbeeld staat een kort stukje CSS:

Als eerste wordt gedefinieerd om welk element het gaat. In dit geval gaat het om een . Tussen de accolades na een elementnaam staan de opmaakcodes voor dat element:

• background-color geeft de achtergrondkleur aan
• color definiëert de tekstkleur
• font-style kan een aantal waardes hebben en vertelt welke stijl de tekst heeft. In dit geval is het italic.

Als je meerdere elementen wilt stijlen zet je alles netjes achter elkaar:

Spaties en returns maken niets uit in CSS, daarom is de volgende code hetzelfde als de vorige:

Zoals ik al had gezegd, is de trapsgewijze werking van CSS en krachtige en handige functie. Bestudeer de volgende code eens:

Zoals je ziet staan er op de plek waar het element gedefinieerd moet worden drie elementen. In dit geval worden alle <a>-elementen in <p>-elementen in <div>-elementen geselecteerd. Dus alleen links die in een paragraaf staan die in een

ID's en classes

Er zijn nog twee manieren om specifieke elementen te selecteren behalve trapsgewijze selectie. Met een ID kan je één enkel element selecteren.Voorbeeld:

In dit stukje code wordt alleen de

Pseudo-classes en -elementen

Met pseudo-classes kan je elementen selecteren die een actie ondergaan (hebben). Bijvoorbeeld als de muis erop staat, of als de link bezocht is. Het gebruik ervan is precies hetzelfde als bij ID's en classes, alleen de definitie is iets anders:

Deze code geeft links waar de gebruiker met de muis op staat een blauwe kleur. Er zijn 10 pseudo-classes:

• hover Als de cursor boven het element staat
• visited Voor links naar reeds bezochte pagina's
• link Voor links naar nog niet bezochte pagina's
• active voor elementen die actief zijn. Een element is bijvoorbeeld actief tussen het indrukken van de muisknop op het element en het loslaten van de knop
• focus Voor elementen waar de focus op staat. Dit kan je met tab doen of als de tekstcursor in een invoerveld staat
• lang Deze selecteert elementen die geschreven zijn in een andere taal. In dat element moet het lang-attribuut opgenomen zijn om de taal ervan op te geven
• first-child Deze selecteert het eerste child element in een ander element
• left
• right
• first

Op left, right en first wordt hier verder niet ingegaan
Ik leg kort het gebruik van lang en first-child even uit:

De CSS code wordt alleen toegepast op elementen met lang="nl" in de tag.

Hierbij worden alleen <a>'s die het eerste child-element in een ander element zijn aangesproken.
Tip: Met :focus kan je invoervelden een licht afwijkende achtergrondkleur geven, waardoor gebruikers eenvoudig kunnen zien in welk veld de cursor staat. Dit maakt de pagina weer wat gebruiksvriendelijker.
Met pseudo-elementen kan je ook leuke truukjes uithalen. Hier zijn er vier en dat zijn:

• first-letter Deze selecteert de eerste letter van het betreffende element
• first-line Deze selecteert de eerste regel van een element
• before Hiermee kan je dingen voor de content van het element plaatsen (tekst, afbeeldingen)
• afterHetzelde als voor :before, maar dan plaatst hij dingen na de content

Pseudo-elementen worden hetzelfde gedefinieerd als pseudo-classes. first-letter en first-line werken net zoals ID's en classes, maar before en after werken iets anders:

De waarde van content kan open-quote, close-quote, no-open-quote, no-close-quote, url(afbeelding) of een string tussen quotes zijn.
Opmerking: Internet Explorer ondersteunt het gebruik van :before en :after helaas niet.

Stylesheets maken

Nu je weet hoe je HTML code moet opmaken, is het ook wel handig te weten hoe je ervoor zorgt dat je styles aan je HTML gelinkt worden. Dit kan op drie manieren gedaan worden, waarvan eentje aan te raden is;

• Via een extern bestand. Je plaatst de CSS code in een apart bestand met de extensie *.css en voegt hem in de in. Dit is dan een external style sheet.
• Tussen <style> tags in de <head>. Dit is een internal style sheet
• De losse stukjes code in de HTML tags als inhoud van het "style" attribuut plaatsen. Dit zijn dan inline style sheets

De eerste oplossing is het beste, aangezien je hier maar één CSS bestand hebt, waardoor de layout van een pagina erg makkelijk aan te passen is. Als je besluit de opmaak over de hele site - ook al is met maar een klein detail - aan te passen, dan hoef je deze wijziging slechts in dit ene bestand toe te passen. Je hoeft de CSS code maar één keer hoeft te verzenden omdat hij daarna in de cache van de gebruiker staat. De HTML code wordt dan zo:

De tweede methode kan handig zijn bij het ontwikkelen van een pagina. Zo heb je CSS en HTML bij elkaar. Het verschilt weinig van de vorige methode, behalve dat de code in het HTML bestand staat i.p.v. in een CSS bestand. Voorbeeld:

Bij de laatste optie is elke HTML tag voorzien van zijn eigen CSS code:

Dit is erg omslachtig en het 'bevuilt' de HTML code alleen maar. Zoekmachines komen er moeilijker door en voor jou is het ook niet makkelijk om alles te doorzoeken.

We zijn nu aangekomen bij het einde van deze tutorial. Je kent nu de werking van CSS en waarom je het zou moeten gebruiken. Nu kan je aan de slag gaan met tutorials waarin je leert met welke CSS-eigenschappen je HTML-elementen kan opmaken.