CSS bijlage

Hoofdstuk 01: Inleiding in CSS

CSS staat voor Cascading Style Sheets. Met CSS kan je de opmaak mogenlijkheden van HTML eenvoudig vergroten. Met CSS geef je een bepaade opmaaktag een eigenschap mee. Kennis van HTML is dus hier weer nodig. Heb je enige kennis van HTML is CSS zeker aan te raden! Het is eenvoudig en snel te leren EN wat belangrijker is is dat de opmaak eenvoudiger, korter en dus alles overzichtelijker wordt.

Stel je wilt een koptekst maken in de kleur groen. Hier gaan we eerst volgens HTML en daarna met CSS. Je zult het verschil zien!

voorbeeld:
1: <h1><font color="green"><WELKOM op mijn homepage!!!</font></h1>
2: <h1 style="color:green">WELKOM op mijn homepage!!!</h1>

Je ziet hier 2 verschillen: Voorbeeld 2 is korter en voorbeeld 2 is overzichtelijker. Stel dat we ook lettertype en opmaak (vet; schuin) willen veranderen snap je wel dat voorbeeld 2 veel korter wordt dan voorbeeld 1.
Je kunt CSS in je HTML-pagina plaatsen en met een css-bestand (opmaak.css bijvoorbeeld) Vooral dat laatste scheelt je uren werk wanneer je pagina een standaard opmaak heeft. Je schrijft 1 keer een opmaak en deze kan je dan gebruiken voor alle andere pagina's.

Voor we verder gaan eerst dit: H1 noemen we de selector; color noemen we property en green is de value. In het volgende hoofdstuk gaan we vertellen hoe je CSS in je homepage kan gebruiken. Ook zal het dan meer duidelijk worden wat ik bedoel.

Hoofdstuk 02: Invoeren

Er zijn enkele manieren waarop we CSS kunnen koppelen met HTML.

  • Door een los bestand te koppelen met je HTML-bestand
  • Als een script in een HTML-bestand
  • Direct achter een tag
  • Als een functie



Door een los bestand te koppelen met je HTML-bestand
Dit kan door eerst een css-bestand te maken. Een voorbeeld van een css-bestand klik hier Dit bestand heet opmaak_main.css. Over de gebruikte propertie's gaan we het nog hebben.
Vervolgens gaan we het bestand koppelen aan je pagina. Daarvoor neem je de volgende regel op in de head van je pagina:

Voorbeeld:
<link href="opmaak.css" type="text/css" rel=StyleSheet>

Wanneer je nu ergens een opmaaktag aanspreekt die je in je css-bestand hebt staan zal hij de beschreven eigenschap krijgen.



Als een script in een HTML-bestand

Voorbeeld:
<style type="text/css">
<!--
H1{color:red}
//-->
</style>

Wanneer we dit script in ons HTML-bestand zetten en we plaatsen ergens de koptekst H1 wordt alle tekst wat tussen <h1> en </h1> staat rood. In het voorbeeld "opmaak_main" zag je een andere schrijfwijze. Wanneer je die schrijfwijze gebruikt is het handiger om je css-bestand te bewerken. Hij werkt gewoon hetzelfde.

Voorbeeld:
<h1>De tekst is rood</h1>

De tekst is rood



Direct achter een tag

Deze hebben we in het vorige hoofdstuk gezien.

Voorbeeld
<h1 style="color:green">WELKOM op mijn homepage!!!</h1>



Als een functie

Net als in JavaScript kunnen we in CSS ergens een functie maken en deze aanspreken op de plaats waar jij wil.
Eerst het script

Voorbeeld
<style type="text/css">
<!--
.oranje{color:orange}
b.geel{color:yellow}
//-->
</style>

Nu kunnen we "oranje" en "geel" aanspreken. Het verschil tussen "oranje" en "geel" is dat "oranje" bij elke tag werkt. "Geel" daarintegen werkt alleen bij de b-tag.

Voorbeeld
<u class="oranje">HOI</u>
<b class="geel">HOI</b>
<u class="geel">HOI</u>

Het resultaat is: HOI HOI HOI

We kunnen ook een attribuut een uniek nummer geven. Dit heet ID.

Voorbeeld
<style type="text/css">
<!--
#b65n{color:orange}
b#b65n{color:yellow}
//-->
</style>

Voorbeeld
<u id="b65n>HOI</u>
<b id="b65n">HOI</b>

Het resultaat is: HOI HOI

Hoofdstuk 03: Pseudo

Het zou handig/leuk zijn als we nu wat meer kunnen dan alleen maar kleur veranderen. Een overzicht van alle propertie's vind je in de inhoud van de cursus.

Je hoeft je niet te beperken tot slechts 1 propertie per selector. Je kunt het aantal propertie's vergroten door een ; achter elke value te zetten. In het voorbeeld opmaak.css zie je dit hoe je dat kan doen. Handig is het om een standaard opmaak te houden.

Voorbeeld:
body
{
color:#FFFFDD;
background-color:#000066;
font-family:Times New Roman;
font-size:12pt;
font-weight:normal;
font-style:normal;
text-decoration:none;
}

Hier boven staat exact het zelfde als hieronder.

Voorbeeld:
body{color:#FFFFDD;background-color:#000066;font-family:Times New Roman;font-size:12pt;font-weight:normal;font-style:normal;text-decoration:none;}

Er zijn een aantal tags met extra eigenschappen die we graag dmv CSS willen beïnvloeden door met behulp van CSS. We behandelen links en alinea's.

We weten al dat we drie "soorten" links hebben. Normaal; visited en active. (alink; vlink en link) In CSS kennen we dit ook. We kunnen al de kleuren aanpassen. (cursus HTML) Met CSS kunnen we nu ook de hele opmaak veranderen. Op deze homepage staan al enkele voorbeelden.

Enkele Voorbeelden
<style type="text/css">
<!--
a:link{color:red}
a:visited{color:green}
a:active{color:yellow}
//-->
</style> 		<style type="text/css">
<!--
a:link{font-size:12px}
a:visited{font-size:14px}
a:active{font-size:16px}
//-->
</style> 		<style type="text/css">
<!--
a:link{font-family:arial}
a:visited{font-family:tahoma}
a:active{font-family:sans-serif}
//-->
</style>

Veranderd de kleur

Veranderd letter grootte

Veranderd font

Je ziet nu dat een onbezochte link wordt aangegeven met a:link Een bezochte link is a:visited en een actieve link is a:active.

We kunnen we nu ook alle alenea's een eigen opmaak geven. Een alinea geven we aan met <p> en </p> De tekst daartussen is dus een alinea. Met behulp van een van Class of ID (een naam of nummer geven aan een opmaak) en van wat propertie's kunnen we verschillende soorten alinea's maken.

Ik ga er niet uitgebreid op in, maar ook een eerste regel of zelfs de eerste letter van een alinea kunnen we een opmaak geven. Dit kan voor de eerste regel door first-line en voor de eerste letter first-letter te gebruiken.

Hoofdstuk 04: Volgorde

Echt super ingewikkeld is CSS niet. Daarom is dit al het laatste hoofdstuk. Het eerste extra hoofdstuk gaak over hoe je de scrollbars kan kleuren. Dit na het gedeelte over de volgorde van CSS.

We kunnen zoals je weet kan je op verschillende manieren een StyleSheet aanroepen. Je kan ze ook tegenlijk gebruiken. De StyleSheet met de hoogste prioriteit is de stylesheet die je te zien krijgt.

De laagste prioriteit heeft een gelinkte StyleSheet. <link*(bv. ons css-bestand opmaak_main.css)
Daarboven komen de embedded StyleSheets; alles tussen <style> en </style>
Als top staan de inline StyleSheets. Als voorbeeld <p style="color:red">

De klasse en ID-sectors tellen we bij de inline StyleSheets. (<p id=x97a>)

Voor dit alles geld gewoon even proberen. Als je iets krijgt wat je niet verwacht kijk dan eens wat je gedaan hebt.

Hoofdstuk 05: Extra: Scrollbars

 

Voorbeeld
<style type="text/css">
body
{
scrollbar-3dlight-color:gold;
scrollbar-arrow-color:yellow;
scrollbar-highlight-color:hotpink;
scrollbar-face-color:teal;
scrollbar-shadow-color:magenta;
scrollbar-darkshadow-color:orange;
scrollbar-base-color:tomado;
}
</style>