Operation Manual
In het bovenstaande voorbeeld is er geen “stijl” verbonden aan de div-tags. Als er geen CSS-regels zijn opgegeven, worden alle div-tags met hun
informatie op de standaard plaats op de pagina aangebracht. Als echter elke div-tag van een unieke id is voorzien (zoals in het bovenstaand
voorbeeld), kunt u de id's gebruiken om CSS-regels te maken zodat deze (als ze worden toegepast) de stijl en de positionering van de div-tags
kunnen wijzigen.
De volgende CSS-regel, die zich in de kop van een document of in een extern CSS-bestand kan bevinden, geeft de stijlregels voor de eerste div-
tag (het “containerelement”) op de pagina:
De #containerregel past een stijl toe op de container-div-tag waardoor het een breedte krijgt van 780 pixels, een witte achtergrond, geen marge
(vanaf de linkerkant van de pagina), een vast en zwart kader van 1-pixel en tekst die links is uitgelijnd. Het resultaat van toepassing van de regel
op de container-div-tag is als volgt:
Container div-label, 780 pixels, geen marge
A. Tekst links uitgelijnd B. Witte achtergrond C. Ononderbroken zwarte rand van 1 pixel
Met de volgende CSS-regel worden stijlregels gemaakt voor de sidebar div-label:
Volgens de regel #sidebar krijgt de sidebar div-tag een breedte van 200 pixels, een grijze achtergrond, een opvulling boven en onder van 15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--container div tag-->
<div id="container">
<!--sidebar div tag-->
<div id="sidebar">
<h3>Sidebar Content</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p>
</div>
<!--mainContent div tag-->
<div id="mainContent">
<h1> Main Content </h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
rutrum.</p>
<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus
venenatis, tristique in, vulputate at, odio.</p>
<h2>H2 level heading </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus
rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p>
</div>
</div>
1
2
3
4
5
6
7
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
1
2
3
4
5
6
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
205