Formge hela sektioner

Sektioner kan formges med samma egenskaper som vanliga blockelement, t.ex. bredd, höjd, kantlinjer, utfyllnad, marginaler, bakgrundsfärg och olika textegenskaper.

Formulera väljare för sektionerna

Den övergripande väljaren div påverkar med sina genskaper samtliga områden markerade med <div>. Detta gäller oavsett ID-namn eller klassindelning. För att komma åt en specifik sektion, använder man tecknet [#] och sektionens ID-namn (samt/eller eventuellt klassbeteckning).

div        {text-align:left}
#nav       {width:600px; height:40px} /*ID-märkt sektion*/
#nav.start {width:700px}              /*ID-märkt, klassindelad sektion*/

Tänk på att egenskapen height bara passar till sektioner som har ett begränsat innehåll, t.ex. liggande navigeringsfält.

Formge element i sektioner

Man ger ofta samma element olika utseenden beroende på i vilken sektion det ligger. Det kan t.ex. vara aktuellt att länkarna i navigeringsfältet ska se annorlunda ut än länkar i löpande text i innehållssektionen.

Genom att beskriva vilken sektion som är förälder, begränsas egenskaperna till att gälla i en bestämd sektion. Detta är samma princip som beskrevs på sidan Ange hierarki.

h1      {margin:1em 0 2em 0; font-size:1.4em}
a       {color:#f00}                             /*Alla länkar*/

#nav    {height:30px; border-bottom:0}           /*Sektionen i sig*/
#nav a  {color:#000; text-decoration:none}       /*Länkar i setionen*/

OBS! Tänk alltid efter vilken väljare som ska ha egenskaperna. Vilken effekt är du ute efter och hur påverkar den det aktuella elementet, barnelement och elementen intill?