|
In de voorgaande voorbeelden werd CSS-opmaak steeds toegepast op alle elementen. Alle titels werden rood en onderstreept weergegeven, alle tabelcellen (td) kregen een kleur enzovoort.
Als je een bepaalde opmaak wilt koppelen aan één bepaald element, kun je je niet meer uit de slag trekken met een regel à la p { text-align: center; } want dan zullen alle paragrafen (p) gecentreerd worden.
In ons voorbeeld moet de eerste paragraaf gecentreerd worden en de tweede
moet links uitgelijnd worden. Hiervoor bestaan 2 mogelijkheden: de inline stijl
of met het attribuut class.
Inline stijl
De inline stijl is erg gemakkelijk in gebruik. Je voegt direct de CSS-code
toe aan het HTML-element. Hiervoor maak je gebruik van het attribuut style
in de HTML-tag:
<p style="text-align: center;">tekst gecentreerd </p>
<p style="text-align: left;">tekst links uitgelijnd </p> Het attribuut class
Als je veel inline stijlen gebruikt, wordt je code snel onoverzichtelijk. Het
is nu net de bedoeling om inhoud en lay-out van elkaar te scheiden. Daarom gaan
we de CSS-codes op een aparte plaats zetten en ernaar verwijzen met het
attribuut class.
<html>
<head>
<title>test</title>
<style type="text/css">
p.centreer { text-align: center; }
.links { text-align: left; }
</style>
</head>
<body>
<p class="centreer">tekst gecentreerd</p>
<p class="links">tekst links uitgelijnd</p>
</body>
</html> In het laatste voorbeeld bij de class links demonstreerde ik dat
het gebruik van een selector (bijvoorbeeld p) niet noodzakelijk is.
Het grote voordeel van het weglaten van een selector is dat je de opmaak ook op
andere elementen kunt laten toepassen. Je bent dus niet beperkt tot de p-tag,
maar je kunt de opmaak van de class links nu ook laten toepassen op
een div, op een td enzovoort.
Ga naar het volgende deel van de CSS basiscursus : Maten in CSS
|
Ontwerp je site