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 - 2024 Belastingadvies, het auteursrecht van dit artikel ligt bij de infoteur. Zonder toestemming is vermenigvuldiging verboden. Per 2021 gaat InfoNu verder als archief, artikelen worden nog maar beperkt geactualiseerd.
CSS - 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 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?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 kindBij ongehuwd samenwonen is het ouderlijk gezag voor de vader niet automatisch geregeld, ook niet als de vader het kind h…
Excel Formules - Verticaal ZoekenMicrosoft Excel is een software programma dat binnen bedrijven, scholen en/of privé huishouding gebruikt wordt om dageli…
Gerelateerde artikelen
CSS - 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 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?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 kindBij ongehuwd samenwonen is het ouderlijk gezag voor de vader niet automatisch geregeld, ook niet als de vader het kind h…
Excel 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…
Belastingadvies (39 artikelen)
Gepubliceerd: 21-05-2011
Rubriek: Pc en Internet
Subrubriek: Tutorials
Gepubliceerd: 21-05-2011
Rubriek: Pc en Internet
Subrubriek: Tutorials
Per 2021 gaat InfoNu verder als archief. Het grote aanbod van artikelen blijft beschikbaar maar er worden geen nieuwe artikelen meer gepubliceerd en nog maar beperkt geactualiseerd, daardoor kunnen artikelen op bepaalde punten verouderd zijn. Reacties plaatsen bij artikelen is niet meer mogelijk.