InfoNu.nl > Pc en Internet > Programmeren > CSS in combinatie met (x)html (de basis)

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

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.

<style type="text/css">
<!--
styles
-->
</style>

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.

<link href="style.css" rel="stylesheet" type="text/css" />

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:

body {
font-family: Verdana;
}

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:

.sub {
font-size: 9px;
}

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

ID’s

Een ID is identiek 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:

#header {
font-size: 20px;
}

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 - 2017 Willem, het auteursrecht van dit artikel ligt bij de infoteur. Zonder toestemming van de infoteur is vermenigvuldiging verboden.
Gerelateerde artikelen
CSS - groeperen, class en idCSS - groeperen, class en idCSS (Cascading Style Sheets) is een taal waarmee je een internetpagina mooi kan vormgeven. Je kunt aan alle tags in HTML…
CSS - basis uitlegCSS - basis uitlegHet opmaken van een website kan op verschillende manieren. Naast HTML kun je ook CSS gebruiken als opmaakmiddel. CSS hee…
Website layout: Frames, tabellen of CSS?Een van de belangrijke dingen bij het maken van uw website is een goede layout. De layout moet de bezoekers aanspreken,…
Gratis website bouwenGratis website bouwenIedereen kan websites bouwen met Kompozer, een zogenaamde webbuilder. Het is een Nederlandstalig open-sourceprogramma da…
Stiltand is achteruitgang,  IE6 moet doodStiltand is achteruitgang, IE6 moet doodStilstand is achteruitgang, en als je je niet blijft ontwikkelen wordt je vroeg of laat ingehaald door de nieuwe ontwikk…

Reageer op het artikel "CSS in combinatie met (x)html (de basis)"

Plaats een reactie, vraag of opmerking bij dit artikel. Reacties moeten voldoen aan de huisregels van InfoNu.
Meld mij aan voor de tweewekelijkse InfoNu nieuwsbrief
Reactie

Wmnoa (infoteur), 11-10-2006 19:38 #1
HTML in combinatie met CSS wordt ook DHTML genoemd (Dynamic HTML) Reactie infoteur, 11-10-2006
Dat is niet helemaal waar… Bij DHTML wordt over het algemeen ook nog javascript gebruikt. Met bv onclick en onchange kun via javascript een andere css waarde meegeven of javascript uitvoeren. Maar goed opgemerkt iig, het heeft zeker met elkaar te maken!

Infoteur: Willem
Gepubliceerd: 06-10-2006
Rubriek: Pc en Internet
Subrubriek: Programmeren
Reacties: 1
Schrijf mee!