Inhoud 1 Inleiding: Waarom CSS? 2 CSS Basispagina 3 1. De pagina uitbreiden 4 2. De restaurant pagina 5 Met ID 6 Validator 7 Meer Opdrachten 8 Werken met id

Inleiding: Waarom CSS?

Je hebt gezien dat je elke keer dezelfde code loopt in te tikken. Kijk maar eens naar dit stukje code: hoe vaak wordt er aangegeven wat de kleur is van de naam van de restaurants?

HTML Code

Origineel

Wil je weten hoe deze code eruit ziet in de browser, bezoek dan de site van tx.nl (texel) Als je de code nog niet begrijpt, moet je terug naar de opdrachten HTML

CSS Basispagina

Neem de volgende code over en sla deze op als 'cssbasis.html:

Je krijgt een zwarte pagina met een witte tekst : Type hier je pagina.

1. De pagina uitbreiden

Type de volgende regels tekst onder de regel met de tekst Type hier je pagina :

Deze regel is rood. <p>Deze regel zit binnen een p en dus is die wit</p>

Test de pagina.

De truuk van CSS is dus: op 1 plek de opmaak regelen en overal waar dat tag voorkomt heb je er lol van.

2. De restaurant pagina

Met het font tag gaan we nu de restaurant pagina maken zoals die hoort: Type in het style gedeelte:

  
  font.rest {  color: #0066cc; }
 

Type in de body

   
  <b>Den Burg</b><br />
   Naam - Telefoon<br />
   <font class="rest">Chin.Ind. Azië </font> - 0222-313833<br />
   <font class="rest">Brasserie Den Burg </font> - 0222-312106<br />
   <font class="rest">Freya </font> - 0222-321686<br />

Sla deze pagina op als rest.html. Test de pagina. Verander nu de kleur van het font.rest (in de style) in green. Dat gaat snel he!

Met ID

 
  #rechterkant {
     background-color:orange;
     float:left;
     top:210px;
     height:600;
     left:500px;
     width:250px;
    position:absolute;
   }

 <div id="rechterkant">
   
   Meer Pizza's<br/>
   Meer Pizza's<br/>
   Meer Pizza's<br/>
   Meer Pizza's<br/>
</div>

Validator

Validator W3C

Meer Opdrachten

Maak nu de volgende opdrachten op Internet:

• W3.org Beginnen met Css Lees niet alles, maar genoeg om alles na te apen.
• CSS Zen Garden En probeer een aantal voorbeelden uit. Het is telkens dezelfde site met alleen een ander CSS!

Werken met id

In een class zet je opmaakregels van dingen die vaker voorkomen dan 1x. ID kan je gebruiken als iets maar 1x voorkomt en het op de goede plek moet komen te staan.

Probeer eens