Tweet

Opbouw van CSS De opbouw van CSS bestaat uit drie onderdelen: een selector, een eigenschap en een waarde.

voorbeeld:

selector {eigenschap: waarde}

De selector is normaal gesproken een HTML element/tag die je wilt definiëren, de eigenschap is het attribuut welke je wilt wijzigen, en elke eigenschap geef je een waarde. De eigenschap en waarde worden gescheiden door een dubbele punt en worden ingesloten door accolades:
voorbeeld:

body {color: black}

N.b.: Als de waarde uit meerdere woorden bestaat zet je aanhalings tekens om de waarde:
voorbeeld:

p {font-family: "sans serif"}

N.b.: Als je meerdere eigenschappen wilt specificeren moet je de eigenschappen van elkaar scheiden met een puntkomma. Het voorbeeld hieronder laat zien hoe een paragraaf in het midden wordt uitgelijnd en een rode tekstkleur heeft:
voorbeeld:

p {text-align:center; color:red}

Om de style definities beter leesbaar te maken, kan je elke eigenschap op een aparte regel weergeven, zoals hieronder:
voorbeeld:

p
{
text-align: center;
color: black;
font-family: arial
}

Groeperen

Je kan selectors groeperen. Scheidt elke selector met een komma. In het onderstaande voorbeeld zijn alle kop elementen gegroepeerd. Alle koppen worden met groene tekst weergegeven:
voorbeeld:

h1,h2,h3,h4,h5,h6 
{
color: green
}

De class Selector

Met de class selector kan je verschillende stijlen definiëren voor hetzelfde type HTML element.

Stel je wilt met twee typen paragrafen werken in je document: een rechts uitgelijnde paragraaf en een in het midden uitgelijnde paragraaf. Hieronder zie je hoe je dat kan doen met stijlen:
voorbeeld:

p.right {text-align: right}
p.center {text-align: center}

Je moet in het HTML document het class attribuut gebruiken om deze aan te roepen:
voorbeeld:

<p class="right">
 Deze paragraaf is rechts uitgelijnd.
</p>
<p class="center">
 en deze paragraaf in het midden.
</p>

Om meerdere classes in een enkel element te zetten:
voorbeeld:

<p class="center bold">
Dit is een paragraaf.
</p>

N.b.: De bovenstaande paragraaf zal ge-styled worden met de class "center" EN de class "bold".

Je kan ook de tag naam weglaten in de selector om een style te definiëren welke door alle HTML elementen gebruikt kan worden. In het onderstaande voorbeeld zal elk HTML element met de class="center" , in het midden worden uitgelijnd:
voorbeeld:

.center {text-align: center}

In het onderstaande voorbeeld hebben, èn het h1 element, èn het p element de class="center". Dit betekend dat beide elementen de regels zullen volgen van de ".center" selector:
voorbeeld:

<h1 class="center">
Deze koptekst wordt in het midden uitgelijnd
</h1>
<p class="center">
Deze paragraaf wordt in het midden uitgelijnd.
</p>

N.b.: Begin een class naam NIET met een getal! Dit werkt niet in Mozilla/Firefox.

Stijlen Toevoegen aan Elementen met Bepaalde Attributen.

De stijlregel hieronder zal invloed hebben op alle input elementen welke het attribuut en waarde type="text" hebben:
voorbeeld:

input[type="text"] {background-color: blue}

De id Selector

Je kan ook stijlen definiëren voor HTML elementen met de id selector. De id selector wordt gedefiniëerd als een #.

De stijl regel hieronder zal werken bij een element welke een id attibuut heeft met de waarde "groen":
voorbeeld:

#groen{color: green}

De volgende stijl regel zal toegepast worden op een p element, als deze een id="para1" attibuut heeft:
voorbeeld:

p#para1
{
text-align: center;
color: red
}

N.b.: Begin een ID naam NIET met een getal! Dit zal niet werken in Mozilla/Firefox.

CSS commentaar

Commentaar (comments) worden gebruikt om code te verklaren, en zal later helpen om de code aan te passen. Een comment wordt genegeerd door browsers. Een CSS comment begint met "/*", en eindigd met "*/", zoals:
voorbeeld:

/* Dit is commentaar*/
p
{
text-align: center;
/* Dit is nog een comment */
color: black;
font-family: arial
}