CSS Tutorial

Grundläggande CSS-syntax

CSS använder regler för att definiera hur element ska utformas. En CSS-regel består av tre delar:

  • Selektor: Anger vilket element som regeln gäller för
  • Egenskap: Anger vilken egenskap som ska ändras
  • Värde: Anger vilket värde egenskapen ska ha

Praktiska steg:

  • Välj ett element: Börja med att välja det element som du vill styla. Du kan använda HTML-taggar för att välja element, t.ex. p för stycken eller h1 för rubriker.
  • Ange en egenskap: Välj den egenskap som du vill ändra, t.ex. color för att ändra textfärgen eller font-size för att ändra textstorleken.
  • Ange ett värde: Välj ett värde för egenskapen, t.ex. red för röd text eller 24px för en textstorlek på 24 pixlar.
  • Lägg till semikolon: Avsluta varje regel med ett semikolon (;).
  • Placera inom klammerparenteser: Placera flera regler inom klammerparenteser ({ }).

Exempel:

p {
  color: red;
  font-size: 24px;
}

Denna regel anger att alla stycken (p) ska ha röd text (color: red) och en textstorlek på 24 pixlar (font-size: 24px).

Tips för tillgänglighet:

  • Använd kontrastfärger för att göra texten lätt att läsa.
  • Använd tillräckligt stor textstorlek för att göra texten tydlig.
  • Undvik blinkande eller föränderliga effekter som kan orsaka anfall.