CSS Opbouw
Veel van de eigenschappen die in CSS worden gebruikt, zijn vergelijkbaar met die van HTML. Dus als je gewend bent om HTML te gebruiken voor een lay-out, zal je waarschijnlijk veel van de codes herkennen. Laten we als voorbeeld nemen dat we een mooie rode kleur willen als achtergrond van een webpagina.
| Met HTML hadden we het als volgt kunnen doen: |
<body bgcolor="#FF0000">
| Met CSS kan hetzelfde resultaat als volgt worden bereikt: |
body {background-color: #FF0000;}
Zoals je hierboven hebt opgemerkt zijn de HTML en CSS codes min of meer identiek.
Declaratieblok
Een CSS-regel bestaat uit een selector en een declaratieblok.
| De selector wijst naar het HTML-element dat je wilt opmaken. | |
| Het declaratieblok bevat een of meer declaraties gescheiden door een puntkomma. | |
| Elke declaratie bevat een CSS-eigenschapsnaam en een waarde, gescheiden door een dubbele punt. | |
| Meerdere CSS-declaraties worden gescheiden door een puntkomma, en declaratieblokken worden begrensd door accolades. |
Voorbeeld:
| p is een selector in CSS en verwijst naar het HTML-element <p> die je wilt stijlen. | |
| color is een eigenschap en de waarde hiervan is red. Tekst wordt in het rood weergegeven. | |
| font-size is een eigenschap en 14px is de waarde hiervan. De fonts worden 14 pixels groot. |
| body is een selector in CSS en verwijst naar het HTML-element <body> die je wilt stijlen. | |
| color is een eigenschap en de waarde hiervan is white. Tekst wordt in het wit weergegeven. | |
| background-color is een eigenschap en #FF0000 (Hexadecimale kleurcode) is de waarde hiervan. |
