JAVASCRIPT Tutorial

Styla Element

Att styla element är att ändra deras utseende och beteende. Det gör du med hjälp av CSS (Cascading Style Sheets).

Praktiska steg:

  1. Öppna din HTML-fil.
  2. Skapa ett <style>-block i <head>-delen.
  3. Inuti <style>-blocket, ange stilreglerna på följande sätt:
element {
  egenskap: värde;
}

Viktiga begrepp:

  • Egenskap: Vad du vill ändra, t.ex. background-color, color, font-size.
  • Värde: Det nya värdet för egenskapen, t.ex. blue, 16px.
  • Element: Elementet som stilen ska tillämpas på, t.ex. p, h1.
  • className: En anpassad klass som kan användas för att styla specifika element.

Exempel:

För att ändra bakgrundsfärgen på alla stycken till blå, skriv:

p {
  background-color: blue;
}

Tillämpning av stilar med JavaScript:

Du kan också använda JavaScript för att tillämpa stilar på element. Till exempel:

document.querySelector("p").style.backgroundColor = "blue";

Anpassad klass:

För att skapa en anpassad klass, lägg till class-attributet till elementet och ange ett klassnamn:

<p class="blå-bakgrund">...</p>

Sedan kan du styla den klassen i CSS:

.blå-bakgrund {
  background-color: blue;
}

Hjälpmedel:

  • display: Kontrollerar huruvida ett element visas eller inte.
  • visibility: Kontrollerar om ett element ska vara synligt eller osynligt.