Regnery.net Internet

HTML CSS PHP MYSQL JQuery SEO – internetoplossingen

CSS groeperen

Het is mogelijk om elementen te gaan groeperen in een definitie. Dit scheelt weer typewerk en komt de overzichtelijkheid ten goede. Hoe werkt CSS groeperen in de praktijk?

CSS groeperen

Het volgende voorbeeld laat zien hoe CSS groeperen werkt:

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

Extra mogelijkheden met elementen

Het kan voorkomen dat je bijvoorbeeld een alinea anders wilt weergeven dan de andere alinea’s, bijvoorbeeld omdat je een citaat wilt weergeven. Dat is niet mogelijk als je p al gedefinieerd hebt. Alle alinea’s worden dan hetzelfde. Voor dit probleem bestaat een oplossing.

<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 een naam toe te kennen aan de alinea kun je onderscheid gaan maken tussen de verschillende elementen. Zo kun je heel precies gaan aangeven hoe je wilt dat de tekst zal worden weergegeven.

Je kunt alle elementen een class gaan toekennen. In het stijlblad kan je dan verwijzen naar deze class. Maar wat ook mogelijk is met class, is algemene stijldefinties gaan maken. Je kunt dan elk willekeurig element die class gaan toekennen.

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

Elk willekeurig element kan de class .citaat krijgen, niet alleen maar p. Als je een tabel hebt gemaakt en je wilt daar deze stijl in gebruiken, dan voeg je aan de table tag class=”citaat” toe. De tekst in de tabel krijgt dan als font-size 10 pixels en font-style italic.

ID

In plaats van class kun je ook id gebruiken om elementen te selecteren.

#123 { font-weight: bold }
 <P ID="123">Tekst van de alinea wordt bold weergegeven.</P>

In dit voorbeeld zie je hoe het werkt. In plaats van class=”" gebruik je nu id=”" om de naam te geven aan een element. Bij het gebruik van id moet je goed opletten dat je een id selector in een stijlblad weergeeft door middel van een #. Achter het hekje komt de naam te staan. Het minpunt van id is dat het per element gaat en niet voor hele lappen tekst. Het gebruik van id als selector van elementen is niet aan te raden. Class is een veel beter alternatief.

Aantekeningen

Het is mogelijk om in een stijlblad aantekeningen te zetten om later snel te zien waar het voor dient. Dit is aan te raden bij het gebruik van groot opgezette stijlbladen.

H1 { color: blue } /* weergave h1 is blauw */