Cascading Style Sheets

class en id

» CSS / Werking

et de attributen class en id kun je je sytle sheet op maat maken.

• classes
• ID'S

Classes
Je kunt in een style sheet classes toekennen aan een code. Een class wordt altijd voorafgegaan door een punt in je style sheet.

.witgroen  {
   background: green;
   color: white;
}   
p.zwartgeel {
   background: yellow;
   color: black;
}   

In je HTML-bestand gebruik je CLASS als attribuut van je HTML-code:

<p class="witgroen">Wit op groen</p>
<p class="zwartgeel">Zwart op geel</p>

Wit op groen

Zwart op geel

Neem je de classes op in het style sheet, dan kun je de HTML-code ook weglaten. Dit heeft het voordeel dat je een class kunt toekennen aan diverse codes in het eigenlijke bestand.

De <h3> en <pre> zien er normaal gesproken in mijn style sheet zo uit:

Header 3

pre

Nu wordt de class gebruikt:

<h3 class="witgroen">Tada!</h3>
<pre class="zwartgeel">Tada!</pre>

Tada!

Tada!

Pseudo-classes
Naast classes kunnen aan sommige selectors, zoals hyperlinks, pseudo-classes worden toegekend.

• Meer over pseudo-classes

ID'S
Je kunt in een style sheet een id (identity) toekennen aan een code. Een id mag maar één keer in een bestand voorkomen. Een id wordt in het eigenlijke style sheet voorafgegaan door een #.

<style type="text/css">
<!--
#niwo {
   font-size: 140%;
   line-height: 140%;   
   color: #000066;
   text-align: center;
   border: 1px solid #000000;
   padding: 4px;   
}
//-->
</style>

<div id="niwo">NL.INTERNET.WWW.ONTWERP<br>
 Frequently Asked Questions</div>

En dit is het resultaat:

» Plaatsing style sheets