Mark en ik, even gek doen haha!Dunc en ik, een gekke bui hihiCelina en ik, gek gezicht trekkenOnze doggies <3
Tekst, Font effecten

Met CSS kun je ook de kleur van je tekst aanpassen, andere lettertype instellen, textdecoratie zoals underline, strikethrough etc. Ik gebruik voor deze tutorial alleen even de body en de links, maar je kunt deze stukjes code vrijwel overal in je stylesheet aan toevoegen.

Tekstkleur
1. Wanneer jij de kleur van je tekst wilt veranderen doe je dit door de kleurcode achter color aan te passen naar de kleur die jij wilt.

body {
font: 11px Verdana, Arial;
color: #000000;* verander dit naar de kleur die jij wilt*/
}

Lettergrootte en -type
2. Wil je de lettergrootte aanpassen dan verander je het aantal px achter font. Wat je op diezelfde regel kunt aanpassen is de lettertype zelf, dus wil jij inplaats van Verdana de lettertype Tahoma op jouw site dan vul je die daar in.

body {
font: 15px Tahoma;
color: #000000; /* Deze vetgedrukte code verander je dus naar de kleur die jij wilt*/
}

Text-decoration
3. Wat je ook bijvoorbeeld kunt toevoegen aan de links is een underline, srtikethrough of juist niets. Dit is een deel van een basis stylesheet.

a {
color: #ff9999;/* De kleur van de links*/
}
a:visited {
color: #ff99ff;/* De kleur van de links nadat men erop geklikt heeft (dus bezocht heeft)*/
}
a:hover {
color: #ff6699;/* De kleur van de links wanneer men eroverheen gaat met de muis*/
}

4. Wanneer jij dit zo laat dan zal er automatisch een streepje onder jouw link (underline) staan, maar wil jij dit niet dan kun je een stukje code aan je stylesheet toevoegen zodat de underline wegblijft. Wat je daar dan ook aan kunt toevoegen is dat wanneer je bezoeker over een link hovered er juist wel een underline weer wordt gegeven of bijvoorbeeld een line-through. Hieronder zie je een voorbeeld.

Je voegt het vetgedrukte deel text-decoration:underline; toe aan a zodat er geen standaard underline bij je links wordt weergegeven en bij a:hover voeg je text-decoration:underline; toe. Wil je juist een line-through dan verander je underline naar line-through.

Underline weergeven wanneer men een link hovered:
a {
color: #ff9999;
text-decoration:none;
}
a:visited {
color: #ff99ff;
}
a:hover {
color: #ff6699;
text-decoration:underline;}

Text-transform
4. Maar er is nog meer! Je kunt ook al je links bijvoorbeeld met HOOFDLETTERS weergeven. Ik zal het even toevoegen aan de bovenstaande code die ik heb gemaakt. In de stylesheet hieronder heb ik aangegeven dat ik alle links in HOOFDLETTERS wil weergeven. Ookal schrijf jij ze dus in kleine letters, ze zullen toch automatisch worden getransformeerd naar hoofdletters. Wil je juist kleine letters dan verander je uppercase naar lowercase.

a {
color: #ff9999;
text-decoration:none;
text-transform:uppercase;
}
a:visited {
color: #ff99ff;
}
a:hover {
color: #ff6699;
text-decoration:underline;}

Font-weight
5. Je kunt echt zoveel met css en zo ook het volgende. Wil jij jouw tekst of links weergeven als vergedrukte letters dan kan dat middels onderstaande code:

font-weight: bold;
Dit voeg je dan gewoon toe aan waar jij wilt dat het vetgedrukt wordt, dus stel dat ik mijn links vetgedrukt wil hebben dan ziet mijn stylesheet er op de volgende manier uit.

a {
color: #ff9999;
text-decoration:none;
text-transform:uppercase;
font-weight: bold;
}
a:visited {
color: #ff99ff;
}
a:hover {
color: #ff6699;
text-decoration:underline;}