Über mich

Startseite arrow Know How arrow CSS Workshop arrow Eine Website als Beispiel

Eine Website als Beispiel
Hier möchte ich mal ein Beispiel bringen wie man eine kleine und schlichte Internetseite mit CSS erstellen kann. Zuerst der HTML-Code:

<html>
<head>
  <title>Dies ist der Titel der Website</title>
</head>

<body>
  <div id="navigation">
    <ul>
      <li><a href="home.html">Home</a></li>
      <li><a href="produkte.html">Produkte</a></li>
      <li><a href="impressum.html">Impressum</a></li>
    </ul>
  </div>

  <div id="inhalte">
    <h1>Dies ist die Überschrift</h1>
    Hallo Welt, dies ist der Inhalt dieser Internetseite.<br><br>Professor Web ist cool.<br>:)
  </div>
</body>
</html>




Man beachte, dass wir im ganzen HTML-Code nichts über das Aussehen der Internetseite stehen haben. Entsprechend trist sieht diese Seite bisher aus.

Anzeige im Browser - Nur HTML-Code ohne CSS

Aber wenn wir den Code näher betrachten, was für Klassen bzw. IDs haben wir vergeben und welche Elemente können wir jetzt einzeln mit CSS ansteuern?

Da haben wir zum einen #navigation und #inhalte. Bis hierher haben wir nicht mehr zugewiesen. Aber trotzdem können wir jedem einzelnen Element Eigenschaften zuweisen.

Und wie das dann im Stylesheet aussieht, schaun wir jetzt mal an.

body {
  background:#C6D6F1;
  font-family:Arial, Tahoma, Verdana;
  font-size:12px;
  color:#000000;
}

#navigation {
  width:150px;
  float:left;
  margin:10px;
  background:#F1E4C6;
}

#inhalte {
  background:#FFFFFF;
  border:1px solid #000000;
  width:350px;
  margin:10px 0;
  float:left;
}



Durch ein paar kleine Definitionen können wir schon etwas Leben in die Website bringen.

Anzeige im Browser - HTML-Code mit einfachem CSS

Die Überschrift ist zu groß. Jetzt gibt es zwei Wege die Überschrift anzupassen. Entweder wir definieren <h1> oder wir definieren <h1> welches sich im DIV #inhalte befindet.



Der zweite Weg ermöglicht uns ein H1-Tag welches sich in verschiedenen Bereichen der Website befindet, verschieden aussehen zu lassen. Brauchen wir aber momentan nicht, also ergänzen wir das Stylesheet durch folgende Zeilen:

h1 {
  font-size:16px;
  margin:0;
}



H1 Element wurde definiert

Auf diese Art und Weise kann auch die Navigation und jedes weitere, beliebige Element auf der Website geändert werden.

Welche Möglichkeiten sich dort bieten, wird im Glossar der einzelnen Begriffe erklärt.
 
< Zurück