Een eigen Joomla template maken (8) – inleiding in CSS

In het vorige artikel ben ik geëindigd bij de footer van de index.php van een Joomla template. Daarmee heb ik de basis van een Joomla template besproken. De vormgeving van een template ligt grotendeels in de aanpassing van de bijbehorende stylesheest (Cascading Style Sheets).

Wat is CSS?
Cascading Stylesheets zijn bestanden die de opmaak van een webpagina regelen. Het grote verschil met eerdere opmaakmogelijkheden van HTML is dat de opmaak hierdoor gescheiden is van de HTML. De HTML geeft de structuur aan van je pagina, maar CSS geeft opmaak en positionering van elementen aan.

Hoe ziet CSS eruit?
Een CSS bestand kan enorm groot zijn. Toch heeft het maar 2 mogelijke onderdelen: selectors/selectoren of commentaar. Met selectors geef je de opmaak van je website aan, met commentaar voorzie je de pagina van verduidelijking. Een selector kan vier dingen beschrijven:
1) een standaard element uit de HTML taal
2) een class
3) een id
4) een pseudo element
Ik zal dit toelichten aan de hand van een paar stukjes uit het CSS bestand van MadeYourWeb (template_css.css)

1) CSS voor een standaard HTML element
In het onderstaand voorbeeld waarmee template_css.css begint geven we aan hoe de standaard body tag zich moet gedragen. Hier staat dat er geen marge (witruimte aan de buitenkant) en geen padding (witruimte aan de binnenkant van de tag) moet zijn rondom de body-tag. Verder staat er dat alle tekst gecentreerd weergegeven moet worden en dat het lettertype Verdana moet zijn. Als de bezoeker dit lettertype niet heeft Arial en als dat er ook niet is een andere, schreefloze letter. De volgorde waarin je deze instructies binnen de selector zet maakt niet uit.

2) CSS voor een class
Dit kun je ook toepassen op classes. Een class is een kenmerk dat je meegeeft aan HTML codes in je pagina. Hiermee kun je daarna opmaak toekennen aan het element. Een voorbeeld uit MadeYourWeb is de .content class. Classes herken aan de punt waarmee ze beginnen. In dit voorbeeld staat dat alle elementen die gekenmerkt zijn met de content class, geen interne witruimte moeten hebben, een lettertype van 10 pixels en een regelhoogte van 18 pixels.

3) CSS voor een id
Je kunt elementen in je pagina ook voorzien van een id. Een uniek kenmerk, zodat je er een unieke opmaak aan mee kunt geven. Je herkent ze aan het # waarmee ze beginnen. Een voorbeeld uit MadeYourWeb is het id #pagewidth-800. In het stylesheet staat dat het element met dit id precies 770 pixels breed moet zijn, de tekst links moet uitlijnen, de linker en rechtermarge zich automatisch moeten aanpassen aan de breedte van het scherm, de ondermarge 20 pixels moet zijn en de achtergrond bestaat uit het plaatje back_all.gif.

4) CSS voor een pseudo-element
Met een pseudo element wordt een bijzondere status van een HTML element bedoeld. Dit speelt met name bij het hyperlink element: a. In MadeYourWeb kom je dit ook tegen, nl a:hover. Hier staat dat – als iemand met zijn muis over een hyperlink gaat – het woord onderstreept moet worden en dat er geen rand om mag staan. Dat laatste is bedoeld voor plaatjes die ook een link kunnen zijn.

Combinaties van (pseudo)elementen, classes en id's
Je kunt in je stylesheet al deze zaken combineren en schakelen. In onderstaand voorbeeld staat bijv. een instructie die geldt voor een hyperlink met de class 'mainlevel' (op het moment dat je er met je muis overheen gaat), of een hyperlink met de class 'mainlevel' en het id 'active_menu'.

Instructies beperken tot elementen in een bepaald volgorde
Soms wil je een opmaak alleen maar toepassen als een element voorkomt op een bepaalde plek in je code. Dat kan je afdwingen zoals in onderstaand voorbeeld. Hier staat dat deze opmaak alleen geldt voor een h3 element dat binnen een div staat met de class 'module'.

De betekenis van het woord Cascading
Het woord cascading betekent zoveel als waterval. Daarmee wordt bedoeld dat in CSS een element de opmaak erft van het element boven je, tenzij je iets anders of nieuws aangeeft. Dit heet ook wel overerving. Dit heeft dus ook tot gevolg dat de opmaak van element dat onderaan een pagina staat voorrang krijgt boven een afwijkende beschrijving bovenaan de pagina.

Conclusie
Over CSS valt veel meer te zeggen. Ik heb geprobeerd de basis hier kort samen te vatten. Dit hebben we nodig om de aanpassingen in het CSS bestand die ik in het volgende artikel zal uitvoeren te kunnen begrijpen.

Meer lezen

• Een uitstekend boek over CSS is The Zen of CSS Design: Visual Enlightenment for the Web.
• Wat je zoal kunt doen met CSS kun je ook op de site van CSS Zengarden zien.

Stem / Bookmark [?]