Beste one2xers, ik sprak met jesse op msn. En die kon maar geen goede tutorial vinden voor css. Nou zei ik, zal ik er een schrijven? Ja dat vond hij een goed idee. Dus hier komt hij:
we beginnen met het bovenste gedeelte van het document. De body:
We gaan verder met de style van de link.
a Deze komt uit de
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:
we beginnen met het bovenste gedeelte van het document. De body:
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 Deze komt uit de
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 afIk 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:
class in geheel dus:
.
een #stylenaam { maken.
Als je een ruitje (#) voor je stylenaam hebt staan. Dan roep je deze op met in dit geval als:
<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:
id in geheel dus:
Nu we de stylenaam zo,n beetje hebben behandeld, gaan we verder met wat je allemaal kan maken:
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:
Veel succes!
<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:
margin: // de ruimte die je om de style heen laat die je hebt opgeroepen met in dit geval als div.
je kunt variren 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:
<style type="tekst/css">
<!--
hier de style
-->
</style>Veel succes!
Maar kunnen het niet
