De body:
- Code: Alles selecteren
body {
background: #777777; // de achtergrond kleur van je hele site
font-family: arial; // het standaard font van je pagina. Kan je ook per style veranderen natuurlijk
font-size: 11px; //de standaard grootte van het font op je pagina
}
We gaan verder met de style van de link.
a
- Code: Alles selecteren
a { // Je begint met efectnaam a Hier mee geef je aan waar het over gaat. { Hier mee begin je de style
text-decoration: none; // Hier mee geef je aan dat de tekst moet blijven zo als hij is. Dus geen onderstreepte teksten bij linkjes
color: #000000; // Hier mee de kleur, in dit geval gewoon zwart.
font-weight: bold; // Hier mee maak je de tekst dikker.
} // Je sluit de style van de link hier af
Ik vond de style van een link noodzakelijk omdat ik (waarschijnlijk als enige) altijd de vraag had hoe ik de link
kon veranderen van kleur enzovoorts. Maar nu gaan we verder met de basis van css.
een .stylenaam { maken.
Als je een punt (.) voor de naam van de style hebt staan. Dan roep je deze op met in dit geval als div class in het geheel dus:
- Code: Alles selecteren
<div class="stylenaam">inhoud van style</div>
een #stylenaam { maken.
Als je een ruitje (#) voor je stylenaam hebt staan. Dan roep je deze op met in dit geval als div id in geheel dus:
- Code: Alles selecteren
<div id="stylenaam">ìnhoud van style</div>
Nu we de stylenaam zo'n beetje hebben behandeld, gaan we verder met wat je allemaal kan maken:
- Code: Alles selecteren
margin: // de ruimte die je om de style heen laat die je hebt opgeroepen met in dit geval als div.
je kunt variëren met deze style. Je kan: margin-top: de ruimte er boven, margin-left, margin-right,
margin-bottom: voor de personen die een beetje engels kunnen snappen het wel.
background: #ffffff; // De background van je style. In dit geval wit. Ook kan je daarin een
afbeelding verwerken. Dan wordt het background: url(image-url);
padding: // de inhoud wordt van de zeikant weggedrukt. Dit varriert van: paddig-right, left, top, bottom.
width: 10px; // de breedte in pixels van de style. Je kan deze ook over de hele pagina verwerken. Dan wordt het
width: 100%; Natuurlijk kan je hier ook 50% enzovoort van maken. Je kan er dus alles van maken maar
dan in verhouding van procent op beeldscherm.
height: 10px; // De hoogte van de style. In dit geval ook zo,n 10 pixels.
font-size: 11px; // net zo als in een word document kan je ook in een style de groote van het font
veranderen. Hier boven zie je font-size: Nederlands vertaald: Grootte van het font. 11 pixels. Hier kan je
natuurlijk ook altijd meer van maken.
font-family: verdana; // Hiermee bepaal je het font van de tekst op je site. In dit geval is dat verdana. Hierin
kun je natuurlijk andere fonts zoals arial enzovoort gebruiken.
Sla je css document altijd op als .css! of je verwerkt hem in de head van je index. dat is te doen met de
volgende tags:
- Code: Alles selecteren
<style type="tekst/css">
<!--
hier de style
-->
</style>
Veel succes!
Geschreven door : http://www.paulvanbeek.net
