CSS Tutorial - Kapitel 5: CSS-filen

I förra kapitlet tittade vi på hur man sätter upp CSS-definitioner för några olika HTML-element med hjälp av ID'n och klasser, samt ändrade ett "default-värde" för elementet <h1>. Nu ska vi lägga vår CSS-kod i en fil och vår HTML-kod i en annan, och presentera de två för varandra.

Skapa först en tom text-fil döpt till exempel.css. Klistra sedan in följande CSS-kod där, hämtad från förra kapitlet, och spara filen:

h1{
  color: blue;
}

#bodySettings{
  background-color: yellow;
}

.redText{
  color: red;
}

.greenText{
  color: green;
}



Nu ska vi skapa vår HTML-fil. Samma procedur igen, skapa en tom text-fil, döp till exempel.html och klistra sedan in koden från förra kapitlet där, men med en liten modifikation - tre nya rader i <head>-området som talar om för vårt dokument att det ska hämta in style-data från CSS-filen:

<html>
  <head>
    <title>Sätter några IDn och Klasser</title>
    <style type="text/css" media="all">
      @import "exempel.css";
    </style>
  </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>



Se till att dessa två filer är sparade i samma mapp på datorn, och öppna sedan HTML-filen i din webbläsare. Om du gjorde allting rätt borde du kunna se något sådant här på din bildskärm:



Detta bör ge dig en uppfattning om hur CSS fungerar. Man definierar CSS'en i .css-filen och lägger referenser till ID'na och klasserna i .html-filen på de taggar som du vill ska använda dem, och sedan inkluderar man bara CSS-filen med de tre raderna under <title> i <head>.



Du bör också känna till att det faktiskt finns två sätt att inkludera sin CSS-fil i HTML-dokumentet. Dels kan man importera den med @import i en <style>-tagg som jag gjorde ovan, och dels kan man länka till den med en <link>-tagg. Länk-metoden skulle istället ha sett ut såhär i <head>-området:

  <head>
    <title>Sätter några IDn och Klasser</title>
    <link href="exempel.css" rel="stylesheet" type="text/css" media="all">
  </head>

Varför man väljer den ena eller andra metoden är även det lite överkurs och för diffust för att gå in på i detta kapitel, jag rekommenderar att du googlar på dessa två metoder om du vill lära dig mer. Så länge du bara håller på att lära dig grunderna spelar det ingen roll vilken av dem du väljer.





< Tidigare: IDn och Klasser

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