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 - 2020 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…
Meet de populariteit van een website!Wil je weten hoeveel links er naar jouw website gaan? Of naar iedere willekeurige andere website? Lees hier hoe je daar…
Hoe controleer je de betrouwbaarheid van een website?Hoe controleer je de betrouwbaarheid van een website?De informatie die je op het internet tegenkomt is lang niet altijd zo veilig en betrouwbaar als je denkt en zou willen.…
Draaitabel opmakenDraaitabel opmakenEen draaitabel in Excel 2000 kan jou veel eenvoudig rekenwerk, zoals cumulatieve totalen, aantallen, gemiddelden en perc…

Excel Formules - Verticaal ZoekenExcel Formules - Verticaal ZoekenMicrosoft Excel is een software programma dat binnen bedrijven, scholen en/of privé huishouding gebruikt wordt om dageli…
Netwerk UTP-kabel zelf makenHet zelf maken van een netwerkkabel is een eenvoudige klus. Er zijn slechts een paar simpele stappen nodig om een dergel…

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: Mei 2011
Rubriek: Pc en Internet
Subrubriek: Tutorials
Schrijf mee!