CSS - hoofdstuk 1

-

CSS

Scheiding tussen structuur, inhoud en opmaak.

Theorie

De structuur (en de inhoud) van een document regel je met HTML. Het is dus de bedoeling dat je met HTML eigenlijk alleen vastlegt wat waar moet komen.

Alle opmaak leg je dan vervolgens vast met CSS. Die opmaakbeschrijving, de CSS, leg je vast in een style sheet. De mogelijkheden met CSS zijn zeer groot, vele malen groter dan wat er met HTML mogelijk is. Vandaar de volgende uitspraak: “Alles wat mogelijk was met HTML kan met CSS, maar alles wat je met CSS kunt, was lang niet mogelijk in HTML.”

CSS moet volgens bepaalde regels worden vastgelegd. Het is te vergelijken met de grammatica oftewel de syntaxis van een taal. De regels zijn als volgt:

  • Eerst wordt een selector genoemd.
  • Vervolgens staat er een accolade.
  • Dan komt er een attribuut.
  • Na de attribuutnaam volgt een dubbele punt.
  • Daarna volgt de waarde van het attribuut.
  • Elke declaratie wordt afgesloten met een puntkomma.
  • Het blok met declaraties wordt afgesloten met een accolade.


Wil je bijvoorbeeld iets vastleggen over de achtergrondkleur van <body>, dan gaat dat als volgt:

body {
background-color: #FFFF66;
}

De achtergrond is een kenmerk van <body> (de selector) dus de background-color is het attribuut dat als waarde een kleur heeft (#FFFF66).

Let er op dat elke declaratie wordt afgesloten met een puntkomma!

We zullen zien hoe Dreamweaver de meeste CSS-code vrijwel automatisch genereert.

In de volgende pagina’s wordt uitgebreid uitgelegd hoe je met CSS je webpagina’s kunt opmaken.

Overerving

In principe worden de stijlkenmerken die je in de CSS aangeeft doorgegeven aan de onderliggende elementen, tenzij je in de CSS aangeeft dat dit gewijzigd moet worden.

CSS kan op drie manieren aan HTML worden toegevoegd:

  • Inline - door gebruik te maken van de <style> toevoeging in HTML elementen

<h3 style="color:blue;">Wat willen we eigenlijk precies van een leraar?</h3>

Wat willen we eigenlijk precies van een leraar?

  • Intern  - door gebruik te maken van het <style> element in het <head> gedeelte van je website

 

  • Extern - door gebruik te maken van een extern CSS bestand

De laatste mogelijkheid wordt het meest gebruikt.

 

Praktijk

Wat moet je er nu concreet bij voorstellen? Onderstaande code is een voorbeeld van een interne style sheet:

<style type="text/css">
body {
font-family: Arial, Helvetica, sans-serif;
}
h1 { font-family: Verdana; }
</style>

In dit style sheet hebben we opgenomen wat het lettertype voor de body is en wat het lettertype voor de h1 is. Vooralsnog zetten we deze code in de head van de webpagina.

 

DIVS

Een html tag waar we nog niet mee hebben kennisgemaakt is de <div> oftewel een division.

Met een div wordt een deel van je webpagina gedefinieerd, je verdeelt je pagina in feite onder. In een div kun je vervolgens allerlei dingen doen die geen invloed hebben op de rest van de pagina, zoals daar bijvoorbeeld zijn: lettertype, grootte, plaatjes, achtergronden, kleuren enz.

Een div werkt in principe hetzelfde als een tabel, maar dan gemakkelijker en uitgebreider.

In het vervolg zullen we leren om uitgebreid gebruik te maken van divs. Het gebruik van tabellen zullen we voortaan zo veel mogelijk beperken.

voorbeeld:

voorbeeld

 

 

<div id="vb">
<p>voorbeeld</p>
</div>

De opmaak is verder gemaakt met CSS

#vb {
font-family: "Comic Sans MS", cursive;
font-size: 18px;
font-weight: bold;
background-image: url(webdesign/hartjes3.gif);
background-repeat: repeat-x;
background-position: center top;
height: 3cm;
}


Opdrachten

Een stukje HTML:

<div1></div1>

<div2></div2>

<p></p>

  1. Open een nieuw document en sla dat op als CSS1.
  2. Zet een stukje Lorem Ipsum in de body
  3. Geef de stijlregel om de body te voorzien van font-family Verdana, Geneva, sans-serif met grootte 1em en kleur geel
  4. Vul div1 en div2 op met een stukje uit het evangelie van Lucas
  5. Geef de stijlregel om het font in div1 rood te maken, dus #FF0000. Stel de grootte in op 10 px.
  6. Voor div2 is er de volgende stijlregel:
    div2 { font-family: Verdana, Geneva, sans-serif; font-size: 1em; color: #993300;}
  7. Geef de stijlregel om de tekst in div1 vet (bold) te maken
  8. Geef de tekst in div1 de kleur geel en in div2 de kleur blauw
  9. Zet een stukje tekst uit Lucas in de <p> geef die de kleur wit grootte 24 px en de achtergrond zwart .
  10. Geef de pagina deze achtergrond
  11. Maak op je indexpagina een hyperlink naar document CSS1

 

 

 

 

 

 


 


 

©jw webdesign