CSS Tutorial - Kapitel 4: IDn och Klasser

I det senaste kapitlet gick jag igenom hur man applicerar CSS-egenskaper på HTML-element via style-attributet, och då detta är helt OK i test-syfte och för ett antal andra syften så finns det mycket bättre sätt att använda CSS-egenskaper mer generellt - ID'n och Klasser.

ID'n och Klasser är ett sätt att gruppera en hel bunt av CSS-egenskaper så att de blir lättare att hantera. För enkelhetens skull ska vi inte bry oss så mycket om vad de exakta skillnaderna är, utan bara summera dem såhär:

  • Ett ID är en grupp av egenskaper avsedda för en enda HTML-tagg som bara skall användas en gång inom varje dokument / sida.

  • En Klass är en grupp av egenskaper som du däremot kan använda många gånger om inom samma HTML-dokument.

Det var väl inte så svårt? Nu finns det förvisso också andra anledningar för att applicera ett ID på ett element förutom att bara få det att känna sig lite mer speciellt, men det ska vi inte gå in på eftersom det just nu är irrelevant.



Det bästa med att använda ID'n och Klasser är att nu behöver vi helt plötsligt inte lägga några CSS-egenskaper i vår HTML-fil längre. Vi hittar bara på några namn för ID'na och klasserna och skriver in dem istället, såhär:

<html>
  <head>
    <title>Sätter några IDn och Klasser</title>
  </head>
  <body id="bodySettings">
    <h1>En till blå rubrik</h1>
    <p class="redText">
      Åh nej, inte de röda äpplena igen?
    </p>
    <p class="greenText">
      De gröna äpplena återuppstår.
    </p>
  </body>
</html>

Visst blev det fint och prydligt? Om du skulle ha råkat testa exemplet ovan i din webläsare, så kanske du blev lite besviken när du märkte att alla de fina ID'na och klasserna inte gjorde något. Oroa dig inte, det beror helt enkelt bara på att vi inte har definierat dem än.



För att definiera ett ID, sätter man ett fyrkant-tecken ( # ) före namnet. För att definiera en klass sätter man en punkt ( . ). Man kan också definiera om en hel generell HTML-tagg genom att bara skriva dess namn. Namnen följs sedan av de önskade CSS-egenskaperna inom klammor, { och }. Se exemplen nedan för en illustration av alla tre metoderna:



Först ställer vi in bodyns ID och gör bakgrundsfärgen gul:

#bodySettings{
  background-color: yellow;
}

Sedan definierar vi våra äppeltext-klasser med respektive färg:

.redText{
  color: red;
}

.greenText{
  color: green;
}

Det som nu är kvar är då den blå rubriken, som ju inte är blå än. Eftersom rubrik-taggen <h1> inte har något ID eller någon Klass, måste detta betyda att vi ville definiera om hur hela elementet fungerar genom att göra alla <h1>-rubriker på alla våra sidor på hela sajten blå:

h1{
  color: blue;
}



Nu är det bara en sak kvar, som du förmodligen själv står lite undrande inför vid det här laget. Var ska du egentligen skriva in alla dessa definitioner så att HTML-dokumentet kan hitta dem? Svaret på den frågan får du i nästa kapitel som binder samman hela paketet genom att introducera: CSS-filen.





< Tidigare: Style-attributet

robert@eagleowl.se 026-16 13 61 www.eagleowl.se
©2018 EagleOwl