HTML Tutorial

HTML-tagg: <style>

Användning av <style>

Taggen <style> används för att definiera CSS-regler som ska användas för att styla ett HTML-dokument. Du kan använda <style>-taggen för att lägga till stilregler på tre olika sätt:

  • Inbäddade stilar: Stilregler som definieras inom en <style>-tagg i dokumentets huvudavsnitt (<head>).
  • Länkade stilar: Stilregler som definieras i en extern CSS-fil (.css) och länkas till HTML-dokumentet med -taggen.
  • Importerade stilar: Stilregler som definieras i en annan CSS-fil, men som importeras till HTML-dokumentet med @import-regeln.

Attribut för <style>

  • type: Anger typen av stilregelspråk som används, vanligtvis "text/css".
  • media: Anger vilken typ av media stilreglerna är avsedda för (t.ex. "screen", "print").
  • scoped: Anger att stilreglerna endast ska tillämpas på element inom det närmaste elementet som innehåller <style>-taggen.

Exempel med <style>

Inbäddade stilar:

<head>
  <style>
    body {
      font-family: Arial;
      font-size: 16px;
      color: #333;
    }
  </style>
</head>
<body>
  <h1>Detta är en rubrik</h1>
  <p>Detta är ett stycke.</p>
</body>

Länkade stilar:

<head>
  <link rel="stylesheet" href="stil.css">
</head>
<body>
  <h1>Detta är en rubrik</h1>
  <p>Detta är ett stycke.</p>
</body>

Utforska <style>-taggen

För att utforska hur <style>-taggen fungerar kan du använda följande enkla HTML-exempel:

<!DOCTYPE html>
<html>
<head>
  <title>Utforska <style>-taggen</title>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: Arial;
      font-size: 16px;
    }

    h1 {
      color: #333;
      font-size: 24px;
    }

    p {
      color: #666;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <h1>Detta är en rubrik</h1>
  <p>Detta är ett stycke.</p>
</body>
</html>

När du öppnar detta HTML-dokument i en webbläsare kommer du att se att texten är stylad i enlighet med de CSS-regler som definieras i <style>-taggen.