CSS in combinatie met (x)html (de basis)

CSS wordt gebruikt om aan een (x)html bestand een stijl mee te geven. In CSS worden dingen als lettertypes, achtergronden, tekstkleuren, posities van bepaalde elementen, enzovoort gedeclareerd. Cascading Style Sheets (waarvan CSS de afkorting is) maken websites dus mooi en overzichtelijk. In dit artikel wordt de basis uitgelegd van CSS en hoe het te gebruiken is met x(html). Om alles te begrijpen is wel enige kennis van (x)html vereist.

CSS in combinatie met (x)html

(X)html is opgebouwd uit tags. Iedere tag zorgt ervoor dat content kan worden benaderd vanuit CSS. Hieronder staan de manieren hoe opmaak kan worden ingevoegd in een (x)html bestand.

> Inline style:
De style wordt meegegeven in een tag, hiermee kun je geen globale styles maken, de stijl is alleen van toepassing op de ene tag.

Toepassing:
<span style=”font-weight: bold;”>tekst</span>

> Embedded style sheet:
Hiermee kunnen globale styles worden bepaald. Via tagnames, classes en ID’s worden de styles toegekend aan specifieke of meerdere elementen in de (x)html-pagina.

Toepassing:
De volgende code moet in de head van de (x)html-pagina worden geplaatst. Waar ‘styles’ staat komt de opmaak te staan, maar daarover later meer.


> External style sheet:
Deze manier om de styles in de pagina te verwerken is vrijwel identiek aan de embedded manier zoals hierboven. Het enige verschil is dat bij external style sheets de styles in een apart bestand staan.

Toepassing:
De volgende code moet in de head van de (x)html-pagina worden geplaatst. In het bestand style.css komen dan de styles te staan.

Benadering van tags in (x)html en CSS

Aan tags in de (x)html kan op verschillende manieren een style worden gekoppeld. Zoals al eerder verteld kan dan via inline styles. Alleen is dat niet handig in gebruik en ook nog inefficiënt als je grote en veel pagina’s moet maken. Vandaar dat je via tagnames, classes en ID’s elementen in de (x)html kunt benaderen en die een style mee kunt geven. Dat kan zowel in embedded style sheets als in external style sheets. Hieronder staan de drie manieren waarop dat kan:

> Tagnames
Dit is de makkelijkste manier. In de CSS wordt het volgende gezet:


Nu geef je aan alles wat tussen de body-tags staat het lettertype Verdana mee. Natuurlijk kan body worden vervangen door iedere andere tag, zodat de style wordt meegegeven aan andere tags.

> Classes
Bij deze methode wordt de style alleen meegegeven aan elementen in de (x)html die een bepaalde class hebben. Een voorbeeld is: <span class=”sub”>tekst</span>
De style voor dat element is dan:


Een class kan in de (x)html aan ieder element mee worden gegeven.

> ID’s
Een ID is indentiek aan een class afgezien van het feit dat een ID maar één keer in de (x)html mag worden gebruikt. Een voorbeeld is: <div id=”header”>titel</div>
Je geeft een element een ID mee als het uniek is. In dit geval klopt dat ook, want de header is er toch maar één keer. Hetzelfde geldt voor de footer, een menu, enzovoort.
Een ID wordt zo aangegeven in de CSS:

Soorten opmaak

Dingen als font-size: 9px; worden de stijlregels genoemd. Ze kunnen worden meegegeven in inline styles, embedded styles sheets en external style sheets. Hieronder staat een overzicht met de meest gebruikte stijlregels, ieder met een opmaak die je natuurlijk zelf in kunt stellen.

• font-family: Verdana, Arial, Helvetica, sans-serif; > lettertype, als de eerste niet beschikbaar is wordt de tweede gebruikt enzovoort
• font-size: 11px; > tekstgrootte
• color: #000000; > tekstkleur
• background-color: #000000; > achtergrondkleur
• text-align: center; > uitlijning van de tekst
• border: 1px solid #000000; > rand van 1px breed in het zwart

© 2006 - 2008 Willem, gepubliceerd in Programmeren (Pc en Internet) op 06-10-2006. Het auteursrecht van dit artikel ligt bij de infoteur. Zonder toestemming van Willem is vermenigvuldiging van dit artikel verboden. Meer...

Verwante artikelen

• Waar moet u opletten als u een DVD combinatie koopt?: Een dvd combinatie, iets van de laatste tijd wat vele graag willen hebben en ook kopen. Het voordeel van een dvd combinatie is dat u een programma gelijk…
• Tutorials: Wat houdt het in?: Een artikel waar het begrip "tutorial" in wordt uitglegd. Ook wat de beste manier is om de juiste tutorials te vinden.
• Abiword als gratis tekstverwerker: Abiword is ook wel een “wolf in schaapskleren” genoemd, omdat het een klein pakket is, en tegelijkertijd een professioneel tekstverwerkingspakket zeker aankan.
• Combinatiehypotheek: vorm de ideale hypotheek: De meeste mensen kiezen voor een combinatie van hypotheken. Zo heeft vrijwel niemand een volledig aflossingsvrije of beleggingshypotheek. Op deze manier combine…
• PHP: Hypertext Preprocessor: In dit artikel zal ik een uitleg geven wat PHP is wat je ermee kunt en nog een paar simpele voorbeelden hoe je het kunt gebruiken. Er zal wat uitgelegd worden over de kenmerken,…