CSS

HTML och CSS: hierarki och kaskad

Hierarki i HTML

HTML kan beskrivas som ett träd, mer exakt ett släktträd som har att göra med var olika element befinner sig i strukturen. Till exempel är både <head> och <body> barn (child) till föräldern (parent) <html>. De båda barnen som har samma förälder är syskon (siblings) och så vidare.

Element som härstammar från ett annat element är alla ättlingar (descendants) till sin förfader (ancestor). Element som är syskon har också en plats före (preceding) eller efter (following) varandra i syskonskaran.

Ett HTML-dokument, som

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Min hemsida</title>
  </head>
  <body>
    <h1>Min hemsida</h1>
    <p>Nu ska jag berätta om mina favoritdjur.</p>
    <ol>
      <li>Älg</li>
      <li>Iller</li>
      <li>Dammkvalster</li>
    </ol>
  </body>
</html>
kan sägas motsvara ett släktträd, eller mer korrekt, dokumentträd som skulle se ut ungefär som följer:

Detta påverkar CSS så att egenskaper ärvs, förfaderns egenskap ärvs till ättlingen om inte ättlingen har getts en annan, motsvarande egenskap, som då gäller i stället.

Om man känner till detta blir det enklare att förstå hur alla reglerna i din stilmall hänger ihop med varandra.

Kaskaden

CSS betyder ju Cascading Style Sheets. Style sheet kan vi begripa vad det är, men vad är det för kaskad namnet syftar på?

Du kan ju ha flera stilmallar som tillämpas på din HTML-sida. Webbläsaren själv innehåller stilmallar, det är dessa du ser när du inte har lagt till någon själv. Användaren kan ha egna stilmallar kopplade till webbläsaren av olika skäl. Och sedan har vi också de stilmallar du som skapare av sajten lägger till (du kan ha flera).

Kaskaden är själva beskrivningen av vilken prioritet dessa har och ser ut som följer:

  1. Webbläsarens inbyggda regler
  2. Användarens egna regler
  3. Upphovsmannens regler
  4. Användarens regler som är utmärkta som viktiga (important)
  5. Upphovsmannens regler som är utmärkta som viktiga (important)

Om regler försöker styra samma sak gäller alltså att fem i denna lista har företräde före fyra, som har företräde före tre… och så vidare. Kaskaden rinner alltså neråt i hierarkin.

Vidare gäller att en mer specifik väljare har företräde före en mer allmän:

h1.minklass {}
har alltså företräde före
h1 {}
gällande elementet
<h1 class="minklass">

Om en regel skall få extra företräde, kan man märka den som viktig, detta görs genom att du lägger till en egenskap som heter !important.

h1 {!important}
får alltså företräde före
h1 {}

Var sparsam med detta. Om en användare använder sig av !important för att konkurrera ut dina regler kan man tänka sig att denna har gjort detta av en anledning, som att han eller hon behöver större bokstäver eller högre kontrast om han eller hon till exempel har ett synfel.