CSS - hoofdstuk 2

-

CSS als apart bestand

Tot nu toe hebben we de css-code opgenomen tussen de headtags van de pagina.

Het biedt voordelen om de css op te slaan als apart bestand en het vervolgens aan je webpagina te koppelen. Als je een website bouwt met een aantal pagina's met dezelfde opmaak dan gaat dit koppelen een stuk sneller.

De manier is als volgt:

1. open een nieuw bestand maar kies in dit geval voor css

2. dit nieuwe bestand sla je op, het krijgt dan de toevoeging .css

bijvoorbeeld hb.css

3. in het CSS-paneel kies je voor stijlpagina koppelen.

vb

4. Je krijgt dan het volgende menu

vb

5. Vervolgens is je stijlblad gekoppeld

6. Tussen de head-tags ziet het er zo uit:

vb

7. Je kunt nu gewoon css aanmaken en bewerken zoals je gewend was.

8. Denk er om het stijlblad en de veranderingen daarin ook up te loaden naar de externe server.


Gegeven is de volgende code:



<html>
<head>
<title>Het CSS panel</title>
<style type="text/css">
<!--
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 100%;
background-color: #FF9;
}
#div2 {
color: #F30;
}
#div3 {
font-size: 125%;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
}
-->
</style>
</head>

<body>
<div id="div1">
<h3>Welkom op deze site!
</h3>
<div id="div1a">Deze site gaat over CSS</div>
</div>
<div id="div2">
<p>Kenmerken van CSS zijn</p>
<ol>
<li>Overzichtelijk</li>
<li>Veel mogelijkheden</li>
<li>Soms wel lastig vanwege overerving</li>
<li>Soms lastig omdat niet alle browser hetzelfde reageren</li>
</ol>
</div>
<div id="div3">In deze handleiding gaan we dat allemaal bekijken</div>
</body>
</html>


Opdracht

Maak onderstaande met een aparte CSS-stijlsheet.


  1. Open een nieuw html-bestand en sla dat op als css2
  2. plak bovenstaande code in het document (Let op, dat doe je in het code scherm)
  3. Knip de css code uit het html-bestand en zet het in een apart css-bestand, sla dat op onder je naam. Let er op dat er geen html in de CSS mag zitten. Verwijder <style> enz.
  4. Koppel de bestanden aan elkaar en controleer of de opmaak hetzelfde is gebleven.
  5. Geef de stijlregel waarmee je de achtergrond van div1a wit maakt.
  6. Geef de stijlregel waarmee je de achtergrond van div2 blauwmaakt.
  7. Geef de stijlregel waarmee je de achtergrond van div3 grijs maakt.
  8. Geef de stijlregel waarmee je alle lettertypes scheef (italic) maakt.
  9. Geef de stijlregel waarmee je de het lettertype van div3 3 cm maakt.
  10. Maak in html onderaan een nieuwe div en noem die div4.
  11. Geef de stijlregel waarmee je van de achtergrond div4 een smurf maakt.
  12. Geef de stijlregel waarmee je de tekst van div2 onderstreept.
  13. Zet de tekst "Een heel smurf 2017" in div4 en geef de stijlregel waarmee je deze tekst blauw en lettergrootte 10 em en vet maakt.
  14. Zorg er voor dat al deze stijlregels netjes in het css bestand staan. Sla het bestand op

Verbind CSS2 vervolgens door middel van een hyperlink aan je indexpagina.

Vergeet niet beide pagina's up te loaden!!

 

 

 

 

 

 

 

 

©jw webdesign