Syntaxis

Als je goed CSS wilt schrijven zul je op de Syntaxisregels van CSS moeten letten.
Syntaxis: Leer van de zinsopbouw/codeopbouw, opmaak van de pagina.
Een misschien wel betere definitie van Syntaxis: Grammaticale opbouw van een programmeerinstructie in een bepaalde markup/programmeertaal.
De CSS syntaxis bestaat uit 3 gedeeltes: een aangever, een eigenschap en een waarde.

De aangever geeft aan wat je wilt veranderen en is meestal de code die je wilt veranderen, bijvoorbeeld: <p> of h1.
De eigenschap is het element dat je met behulp van de aangever wilt veranderen, bijvoorbeeld: kleur, weergave, lettertype.
De waarde is de verandering, bijvoorbeeld: Zwart, Verdana, 13.
Gezamelijk krijg je dit:
aangever {eigenschap: waarde}
De eigenschap en de waarde altijd scheiden met een dubbele punt en tussen de gekrulde haakjes ({})
Bijvoorbeeld bij het volgende voorbeeld:
p {font-family: verdana}
Alle <p> elementen krijgen het lettertype: Verdana
Als je meer waardes aan een elemen wilt geven dan moet je de verschillende waarden scheiden door een puntkomma (;) Zoals hier:
p {font-family: verdana;text-align:center;color:gray}
Om dit voorbeeld duiderlijker te maken schrijven de meeste mensen zo
p
{
font-family: verdana;
text-align:center;
color:gray
}
Er staat exact hetzelfde alleen beter weergegeven zodat het makkelijker leesbaar is. Hoe je het ook plaatst, het heeft geen tot weinig effect op de laadtijd van je pagina.
In deze lessen zul je de codes ook zo aantreffen. Dit ziet er veel overzichterlijker en herkenbaarder uit. Als je in plaats van alleen de <p> ook alle heading dezelfde waardes wilt geven schrijf je de heading ook achter de p wel gescheiden door een komma zoals hier:
p,h1,h2,h3,h4,h5,h6
{
font-family: verdana;
text-align:center;
color:gray
}
De aangever kan op nog op twee verschillende manieren worden verdeeld, namelijk door classes en door de aangevers een eigen id/nummer te geven.
Bij classes kun je bijvoorbeeld twee dezelfde elementen een andere waarde geven, bijvoorbeeld een paragraaf.
p.rechts {text-align: right}
p.links {text-align: left}
De <p class="right"> wordt rechts weergegeven en de <p class="left"> juist weer links. Er kan maar één waarde gegeven worden aan een element via class. Dus dit is fout <p class="right" class="left"> maar dat lijkt me duidelijk.
Je kunt met via de classes ook alle elementen op dezelfde manier weergeven, bijvoorbeeld links zie voorbeeld:
.links {text-align: left;font-family: verdana}
Nu worden alle elementen met: <X class="links"> links weergegeven, of het nu <p class="links"> of <h1 class="links"> is.

De id/nummer aangever:
De id en class aangever verschillen van elkaar. Bij id moet je elk element een letter of een nummer geven en dat geld dan alleen voor dat ene element. Bij de classes kunnen wel 100 dezelfde elementen dezelfde eigenschappen overnemen. Als je dus twee dezelfde tags hetzelfde idnummer geeft gebeurd er bij de tweede niets!
Bijvoorbeeld deze: h1#id303 {color: gray}
Het eerste h1 element met het idnummer: id303 zal grijs getoond worden. Een tweede h1 element met het dezelfde idnummer wordt niet grijs gekleurd. Bij deze gaat het alleen om de eerste h1 met dat idnummer, vul je een asterix (*) in dan wordt de eerste code met het idnummer gekleurd zoals hier:
*#id303 {color: gray}
Het eerste element met het idnummer: id303 wordt grijs gekleurd. Of dat nou <p id="id303"> is of het is <h1 id="id303"> maakt niets uit. Het heeft weer geen zin als je meerdere codes hetzelfde idnummer geeft want dan slaat hij de anderen over en geeft alleen het eerst id de aangegeven waarden.
Zorg dus dat je het verschil tussen een id en een class weet zodat je deze gemakkelijk kunt gebruiken.
Commentaar in CSS geef je zo aan:
/* Dit wordt niet op de pagina weergegeven maar staat alleen in de broncode*/