Operation Manual

<!--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>
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:
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
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:
#sidebar {
float: left;
width: 200px;
background: #EBEBEB;
padding: 15px 10px 15px 20px;
}
Volgens de regel #sidebar krijgt de sidebar div-tag een breedte van 200 pixels, een grijze achtergrond, een opvulling boven en onder van 15
pixels, een opvulling rechts van 10 pixels en een opvulling links van 20 pixels. (De standaardvolgorde voor padding is van rechtsboven naar
linksonder.) Daarnaast wordt de sidebar div-tag gepositioneerd met float: left—een eigenschap waardoor de sidebar div-tag naar de linkerkant van
de container div-tag wordt geduwd. Het toepassen van de regel op de sidebar div-tag heeft het volgende resultaat:
263