CSS-Klassen und das class-Attribut

In diesem Quelltext siehst du, wie du eine CSS-Klasse definierst, um das Aussehen eines HTML-Elements zu gestalten. Dieses Mal schreibst du ein <style>-Tag in den <head> deines HTML-Dokuments. Du legst einen Namen für die neue CSS-Klasse fest und fügst dann alle CSS-Eigenschaften und -Werte hinzu, die du auf ein Element anwenden möchtest. Dann verwendest du im <body> deines HTML-Codes einfach das CSS-Attribut class und setzt seinen Wert auf den Namen der neuen CSS-Klasse.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
  <style>
  .header {
      background-color: blue;
      text-align: center;
      font-size: 18pt;
      width: 100%;
      height: 25%;
   }
   .title {
       font-size: 14pt;
       text-align: center;
       color: green;
    }
    .body {
        margin: 20px;
          } 
   </style>
  <title>Der Mönchsdiamant</title>
</head>
<body>
  <div class="header">
     Der Mönchsdiamant<br/>
     Erstaunliche Entdeckung
  </div>
  <br/>
  <div class="title">
     Diamant bei Expedition in Alaska entdeckt!
  </div class="body">
  <br/>
  <div>
    Prof. Bairstone und Dr. Day suchten in Alaska nach Fossilien.<br/>
    Sie fanden den gestohlenen Diamanten in einer abgelegenen Höhle.
   </div>
</body>
</html>

Beispiel ansehen

Zurück zur Mission