CSS Tutorial

Använda CSS

CSS (Cascading Style Sheets) är ett språk som används för att styla HTML-element. Här är en enkel guide om hur du använder CSS:

Praktiska steg:

  • Inline-stilar: Lägg till stilar direkt till HTML-element, t.ex. <h1 style="color: red;">Rubrik</h1>.
  • Inbäddade stilmallar: Inkludera en <style>-element i <head>-avsnittet i ditt HTML-dokument. T.ex:
    <head>
      <style>
        h1 {
          color: blue;
        }
      </style>
    </head>
    
  • Externa stilmallar: Skapa en separat CSS-fil och länka den till din HTML-sida med hjälp av <link>-elementet. T.ex:
    <head>
      <link rel="stylesheet" href="stil.css">
    </head>
    

Tillgänglighet och användarvänlighet:

  • Använd semantiska HTML-element (t.ex. <header>, <main>, <footer>) för att ge struktur och mening.
  • Tillhandahåll kontrast mellan text och bakgrund för att förbättra läsbarheten.
  • Använd tydliga och koncisa stilnamn för att göra din CSS-kod mer underhållbar.
  • Validera din CSS regelbundet för att säkerställa att den är giltig.

CSS-exempel:

/* Inline-stil */
h1 {
  color: red;
}

/* Inbäddad stilmall */
<style>
  h2 {
    color: blue;
  }
</style>

/* Extern stilmall */
.huvudtext {
  font-family: Arial;
  font-size: 16px;
}