InfoNu.nl > Pc en Internet > Tutorials > CSS - groeperen, class en id

CSS - groeperen, class en id

CSS - groeperen, class en id CSS (Cascading Style Sheets) is een taal waarmee je een internetpagina mooi kan vormgeven. Je kunt aan alle tags in HTML die eigenschappen geven die jij wilt. Om dit in CSS slim te doen, bestaan meerdere mogelijkheden. In dit artikel zullen een aantal mogelijkheden aan bod komen om te spelen met CSS.

Groeperen

Het is mogelijk meerdere Selectors te groeperen in één definitie. Daarmee hoef je maar één keer de definitie van de gewenste stijl op te schrijven.

Voorbeeld:

H1, H2, H3 {
Font-weight: 600;
Font-size: 12px;
Font-family: arial
}

Extra mogelijkheden Selectors

Het kan voorkomen dat je meerdere soorten alinea’s nodig hebt in je tekst. Denk daarbij aan het citeren van iemand waarbij je duidelijk wil maken dat het een ander soort tekst is dan de rest. Door alleen de Selector P te gebruiken, geef je aan alle alinea’s dezelfde vormgeving. Maar de oplossing voor het probleem ligt in het definiëren van een Class.

Voorbeeld

<HTML>
<HEAD>
<TITLE>Citaten</TITLE>
<STYLE TYPE="text/css">
P.citaat { font-size: 10px; font-style: italic;}
</STYLE>
</HEAD>
<BODY>
<p CLASS=”citaat”>I have a dream!!</p>
</BODY>
</HTML>

Door de specifieke alinea een naam toe te kennen, maak je een onderscheidt tussen de gewone P en de P met een citaat. In het vervolg kun je dus heel precies per alinea aangeven hoe je de opmaak wenst te zien.

In het voorbeeld is dit gedaan door eerst P.citaat te definiëren. Vervolgens definieer je de vormgeving van de alinea. Vervolgens kom je in de tekst van de site een alinea tegen waarin je een citaat opneemt. Op dat moment start je de alinea met de <P> tag en voeg je daaraan toe de woorden: class=”citaat”.

Je kunt aan alle Selectors een Class toekennen. In je stijlsheet kun de Class definiëren en in je site kun je verwijzen naar deze Class. Maar je kunt je stijlsheet nog flexibeler maken door zelf een aantal Class te definiëren. Aan elke willekeurige Selector kun je dan de Class toekennen. In het onderstaand voorbeeld kun je zien wat de bedoeling is.

Voorbeeld

<STYLE TYPE="text/css">
.citaat { font-size: 10px; font-style: italic;}
</STYLE>

In je HTML code kun je nu ieder gewenste tag de class citaat toekennen Dit doe je door bijvoorbeeld aan de table tag <td> de woorden class=”citaat” toe te voegen. In een volgend stuk kun je de class weer toekennen aan een andere tag. De flexibiliteit en mogelijkheden van CSS zijn daarmee eindeloos.

ID

In plaats van het definiëren van een Class kun je ook een Id definiëren. Nadeel van een Id is dat je maar één keer per pagina een Id kan aanroepen als Selector. Daar staat tegenover dat je een Class eindeloos kan gebruiken.

Voorbeeld:

#123 { font-weight: bold}

<p id=”123”>Tekst dik gedrukt</p>

Aantekeningen van jezelf

Als je bezig bent met het opzetten van een groot stijlsheet voor je site, kan het handig zijn om daarin aantekeningen te maken voor jezelf. Als je later wijzigingen gaat aanbrengen, dan kunnen deze aantekeningen je helpen om te zien wat je destijds hebt bedoeld met je stijlsheet.

In CSS geef je de aantekening weer door tussen /* en */ je opmerking te plaatsen.

Lees verder

© 2011 - 2019 Belastingadvies, het auteursrecht (tenzij anders vermeld) van dit artikel ligt bij de infoteur. Zonder toestemming van de infoteur is vermenigvuldiging verboden.
Gerelateerde artikelen
CSS - werken met pseudo classCSS - werken met pseudo classNaast de Class mogelijkheden heeft CSS ook de mogelijkheid nog een aantal Pseudo Class te definiëren. Daarmee kun je de…
Vliegen: business class, first class of economy classVliegen: business class, first class of economy classDe meeste mensen vliegen altijd economy class als ze met een vliegtuig reizen. In de meeste gevallen is dat gewoon omdat…
Wanneer wordt een spataderbehandeling nog vergoed?Wanneer wordt een spataderbehandeling nog vergoed?Eigenlijk kan iedereen spataderen krijgen. Een zichtbaar bloedvat op het been is een lelijk gezicht maar het kan ook jeu…
Niet getrouwd maar wel een kindNiet getrouwd maar wel een kindBij ongehuwd samenwonen is het ouderlijk gezag voor de vader niet automatisch geregeld, ook niet als de vader het kind h…

Reageer op het artikel "CSS - groeperen, class en id"

Plaats als eerste een reactie, vraag of opmerking bij dit artikel. Reacties moeten voldoen aan de huisregels van InfoNu.
Meld mij aan voor de tweewekelijkse InfoNu nieuwsbrief
Ik ga akkoord met de privacyverklaring en ben bekend met de inhoud hiervan
Infoteur: Belastingadvies
Gepubliceerd: 21-05-2011
Rubriek: Pc en Internet
Subrubriek: Tutorials
Schrijf mee!