CSS in HTML einbetten

CSS in HTML einbetten

Es gibt 2 arten CSS in HTML einzubetten, einmal kann der CSS Code über ein style Tag in den HTML Code direkt eingefügt werden oder es wird mit einer extra Datei gearbeitet.

Direkt in HTML Einbetten

<html>
  <head>
    <style>
      h1 {font-size:30px;}
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
    <style>
      h2{font-size:20px;}
    </style>
    <h2>Hello World</h2>
  </body>
</html>

Es sollte in den HEAD Bereich erstellt werden, kann aber auch im BODY geschrieben werden.

Über extern Datei einfügen

stylesheet.css:

h1 {font-size:30px;}

index.html:

<html>
  <head>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>