Selectors zijn de belangrijkste bouwstenen van css-stylesheets.
Elke selctor bestaat uit drie delen: een naam, gevolgd door een of meerder eigenschappen met bepaalde waarden.
De selector begint met een naam die gelijk is aan het element die het moet beheren. Wil je de css-eigenschappen van de container <p>...</p> instellen dan gebruik je de selector naam p.Selector {
eigenschap1: waarde;
eigenschap2: waarde;
....
}
Na een eigenschap komt : met de waarde erachter. Moeten er meerdere eigenschappen geplaatst worden dan komt na de waarde de ; en de volgende eigenschap. Tussen laatste waarde en } hoeft geen ; meer gebruikt te worden. Merkop dat de waarde niet tussen aanhalingstekens staan en dat alle eigenschappen tussen accolades staan.
Voor sommige eigenschappen zoals font-family kun je meerdere waardes plaatsen. Deze worden door komma's gescheiden.
font-family:Verdana, Arial, Helvetica, sans-serif
De browser interpreteert dit als volgt: Eerste keuze is Verdana en als die niet beschikbaar is dan Arial, Helvetica en een schreefloos schermlettertype.
Bij font-family:"Courier New", Courier, monospace staat een fontnaam met spaties erin, tussen aanhalingstekens.
Maken we gebruik van een style attribuut dan wordt het: style="font-family:'Courier New', Courier, mononspace".
Voor afmetingen en afstanden gebruik je in css een waarde gevolgd door een eenheid. Voor eenheden gebruiken we de onderstaande afkortingen:
| Eenheid | Afkorting |
|---|---|
| centimeter | cm |
| em | em |
| inch | in |
| millimeter | mm |
| percentage | % |
| pica | pc |
| pixel | px |
| punt | pt |
| x-hoogte | ex |
De eenheden worden zonder spatie aan de waarde geplakt zoals in height: 250px.
De klasse van een HTML element wordt aangegeven door de naam van de tag. Het is echter mogelijk om aan een tag een klasse toe te voegen (class="verzonnen_klassenaam"), waardoor het element de stijl van de corresponderende klasse in het stylesheet overneemt. De aspecten van stijl die niet in deze corresponderende klasse worden aangegeven, erft het element echter nog steeds van het parent element of van de tag klasse.
Hieronder de code om de stijl van de htmlcoderegels aan te passen. Ik heb hier de klasse code voor gemaakt in de stylesheet.
<p class="code"><link rel="stylesheet" href="/include/super.css" type="text/css" /></p>
In de stylsheet wordt de klasse als volgt weergegeven:
.code {
font-family:"Courier New", Courier, monospace;
font-size:15px}
CSS kent ook pseudoklassen. Daarmee wordt aangegeven dat de stijl van een element afhankelijk is van een status. Een bekende pseudoklasse is de status van een link, de tekst van een link kan een andere kleur hebben als het betreffende document recent is bekeken. Een andere pseudoklasse is de hover waardoor de stijl van een element anders wordt als de muis in het element staat.
a:link {color:#00f; text-decoration:none}
a:visited {color:#a0a; text-decoration:none}
a:hover {color:#f00; text-decoration:underline}
a:active {color:#f00; text-decoration:none}