Webentwicklung 101 - Teil 3: Erste Schritte mit CSS und Style Sheets

Im letzten Teil unserer Tutorialreihe haben Sie gesehen, wie man mithilfe von WebMatrix eine einfache Webseite erstellen kann und wie diese Seite in verschiedenen Browsern dargestellt wird. In dieser Folge wird Ihnen gezeigt, wie Sie dank der Cascading Style Sheets (CSS) das Aussehen Ihrer Webseite anpassen bzw. verändern können. Hierzu nutzen wir die Webseite mit den Lieblingsfilmen aus dem vorangegangenen Tutorial.

Eine Webseite für den Einsatz von CSS vorbereiten

In den folgenden Abschnitten lernen Sie weitere HTML-Befehle kennen, zum Beispiel zum Setzen von Links oder um bestimmte Abschnitte einer Seite zu markieren. Außerdem wird gezeigt, wie Sie Cascading Style Sheets einsetzen können, um Ihren Webseiten ein neues Layout zu geben.

Bereiche der Webseite markieren

In HTML haben Sie die Möglichkeit, Ihre Seite in verschiedene Blöcke einzuteilen – hierfür können Sie das <div>-Tag nutzen. Dadurch haben Sie zum Beispiel die Möglichkeit, verschiedenen Teilen einer Webseite oder eines Artikels unterschiedliche Layouts zu verpassen. Starten wir mit dem Quellcode Ihrer Seite aus dem letzten Teil der Tutorialreihe:

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Lieblingsfilme von mir</title>
</head>
<body>
<h1>Meine Lieblingsfilme</h1>
<ol>
<li>Waynes World</li>
<li>Sonnenallee</li>
<li>Last Boy Scout</li>
<li>Tron</li>
<li>Sissi die junge Kaiserin</li>
</ol>
</body>
</html>

Im ersten Schritt rahmen Sie nun die Filmliste mit einem <div>-Tag ein:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Lieblingsfilme von mir</title>
</head>
<body>
<h1>Meine Lieblingsfilme</h1>
<div>
<ol>
<li>Waynes World</li>
<li>Sonnenallee</li>
<li>Last Boy Scout</li>
<li>Tron</li>
<li>Sissi die junge Kaiserin</li>
</ol>
</div>
</body>
</html>

Nach dem Einfügen des <div>-Tags ändert sich erst einmal nichts auf der Webseite. Das <div>-Tag dient der logischen Einteilung einer Webseite und hat an sich keine sichtbaren Auswirkungen auf eine Webseite.

Hyperlinks einfügen

Wahrscheinlich sind Ihnen und Funktion und Einsatzweise von Hyperlinks bereits bekannt, anklickbare Bereiche auf Webseiten, die Sie zu einer anderen Seite bringen. Ursprünglich wurden diese in HTML als Anker (Anchor) bezeichnet, daher benötigen Sie auch das <a>-Tag, um einen Link zu erstellen.

Der Bereich innerhalb eines <a>-Tags wird auf der Webseite anklickbar. Wenn ein User diesen Bereich anklickt wird er zu einer so genannten Hyper Reference (HREF) weitergeleitet, die in der href-Eigenschaft des <a>-Tags genauer spezifiziert wird.

Eine Eigenschaft (Attribut) wird im dazugehörigen Tag definiert:

<tag eigenschaft=“inhalt der eigenschaft“>Content</tag>

Im Falle eines Hyperlinks könnte der vollständige Befehl dann zum Beispiel folgenderweise aussehen:

<a href=“http://www.microsoft.com“>Klicken Sie hier</a>

Die Eigenschaft href muss nicht zwangsläufig eine Webseite beinhalten, sie könnte zum Beispiel auch zu einer JavaScript-Funktion oder einem weiteren Teil derselben Webseite führen. Wenn Sie während der Entwicklungsphase noch nicht genau wissen, wie die href-Eigenschaft letztendlich gefüllt werden muss, können Sie einen Platzhalter verwenden. Füllen Sie die Eigenschaft mit dem Nummernzeichen #, dadurch wird der gewünschte Bereich bereits als anklickbar angezeigt. Sie können das Nummernzeichen dann einfach ersetzen, sobald Sie die richtige URL für diesen Bereich haben.

Verlinken Sie jeden einzelnen Ihrer Lieblingsfilme, der Einfachheit halber benutzen wir hier den Platzhalter #:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Lieblingsfilme von mir</title>
</head>
<body>
<h1>Meine Lieblingsfilme</h1>
<div>
<ol>
<li><a href="#">Waynes World</a></li>
<li><a href="#">Sonnenallee</a></li>
<li><a href="#">Last Boy Scout</a></li>
<li><a href="#">Tron</a></li>
<li><a href="#">Sissi die junge Kaiserin</a></li>
</ol>
</div>
</body>
</html>

Wenn Sie die Webseite nun starten, werden die einzelnen Filme in blauer Schrift und unterstrichen angezeigt. Außerdem können Sie ab sofort angeklickt werden:

webmatrix_101_p3_02

Header und Footer zur Seite hinzufügen

Als Nächstes soll ein Header und ein Footer zur Seite hinzugefügt werden. Hierfür bietet das kommende HTML5 zwei neue Tags: <header> und <footer>. Weitere Informationen rund um die kommende Version von HTML finden Sie unter anderem bei MSDN Online. Das <header>-Tag bekommt als Inhalt die bisherige Überschrift der Seite. Für das <footer>-Tag wird ein kleiner Hinweis auf WebMatrix eingebaut.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Lieblingsfilme von mir</title>
</head>
<body>
<header><h1>Meine Lieblingsfilme</h1></header>
<div>
<ol>
<li><a href="#">Waynes World</a></li>
<li><a href="#">Sonnenallee</a></li>
<li><a href="#">Last Boy Scout</a></li>
<li><a href="#">Tron</a></li>
<li><a href="#">Sissi die junge Kaiserin</a></li>
</ol>
</div>
<footer>
Diese Seite wurde mit Microsoft WebMatrix erstellt.<br />
<a href="http://web.ms/webmatrix ">Jetzt herunterladen!</a>
</footer>
</body>
</html>

Nachdem Einbau dieser beiden Tags sollte Ihre Seite ungefähr so aussehen, bis auf den neuen Footer ist alles beim Alten geblieben:

webmatrix_101_p3_03

Das Aussehen der Seite definieren

Im vorherigen Abschnitt haben Sie anhand des <a>-Tags die Möglichkeiten von Attributen kennen gelernt. Wie Sie richtig vermuten, können Sie Attribute dazu verwenden, das Aussehen eines Elementes anzupassen. So können Sie zum Beispiel die Schriftfarbe und -größe der Überschrift durch spezielle Attribute im <h1>-Tag verändern:

<h1 style="color:blue; font-size:32; font-family:Verdana; text-decoration:underline">Meine Lieblingsfilme</h1>

Die Eigenschaft style des <h1>-Tags enthält eine Reihe von Angaben, in diesem Fall wird eine neue Schriftart, Schriftgröße und Schriftfarbe festgelegt; außerdem wird die Überschrift unterstrichen angezeigt.

webmatrix_101_p3_04

Dies funktioniert zwar ganz gut, ist aber nicht der beste Weg, um das Aussehen einer kompletten Webseite anzupassen. Stellen Sie sich den Aufwand vor, wenn Sie jedes Element der Webseite in dieser Art anpassen müssten. Außerdem würden Sie den Quelltext Ihrer Seite deutlich verlängern, was unweigerlich zu längeren Ladezeiten der Seite führt.

Eine bessere Lösung ist die Nutzung eines so genannten Stylesheets. Stylesheets nutzen das Konzept der „Cascading Style Sheets“ (CSS), bei dem ein „Style“ eines Elements auf ein untergeordnetes Element vererbt werden kann. Wenn Sie zum Beispiel das <div>-Tag mit einem Style versehen (eine bestimmten Schriftart oder Schriftfarbe) und innerhalb dieses Tags eine Liste (<ol>) ist, dann wird der Style auch auf die Liste angewendet (es sei denn, die Liste wird mit einem eigenen Style versehen). Mehr über CSS können Sie unter anderem bei w3cschools nachlesen.

Als kleines Beispiel passen wir das <h1>-Tag über ein Stylesheet an. Als erster Schritt muss dem <h1>-Tag über das Attribut <class> eine bestimmte Klasse zugewiesen werden. In diesem Fall nennen wir die Klasse Title:

<h1 class="Title">Meine Lieblingsfilme</h1>

Da nun das Tag mit einer Klasse versehen ist, kann dem Browser mitgeteilt werden, welche “Styles” mit dieser Klasse verwendet werden sollen. Der CSS-Code dazu könnte zum Beispiel folgend aussehen:

.Title {
font-size: xx-large;
font-weight: normal;
padding: 0px;
margin: 0px;
}

Diesen Code fügt man dann innerhalb eines <style>-Tags im Header der Seite ein:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Lieblingsfilme von mir</title>
  <style type="text/css">
  .Title {
  font-size: xx-large;
  font-weight: normal;
  padding: 0px;
  margin: 0px;
  </style>
</head>
<body>
<header><h1>Meine Lieblingsfilme</h1></header>
<div>
<ol>
<li><a href="#">Waynes World</a></li>
<li><a href="#">Sonnenallee</a></li>
<li><a href="#">Last Boy Scout</a></li>
<li><a href="#">Tron</a></li>
<li><a href="#">Sissi die junge Kaiserin</a></li>
</ol>
</div>
<footer>
Diese Seite wurde mit Microsoft WebMatrix erstellt.<br />
<a href="http://web.ms/webmatrix ">Jetzt herunterladen!</a>
</footer>
</body>
</html>

Und schon ändert sich in der Vorschau die Überschrift auf die gewünschten Eigenschaften:

webmatrix_101_p3_05

Die Klasse title können Sie auf jedes Element anwenden, das das dort definierte Aussehen haben soll.

Wenn Sie ein bestimmtes HTML-Element mit einem Style versehen wollen, können Sie dies entweder, wie eben demonstriert, direkt mit einer Klasse machen oder Sie können das Element über eine ID benennen und dann eine Klasse für die ID nutzen. Wenn Sie einen Blick auf den HTML-Code werfen, werden Sie ID „filmliste“ bemerken, die dem <div>-Tag zugeordnet wurde. Eine solchen Style legt man in seinem Stylesheet an, indem das #-Zeichen vor den gewünschten Style-Namen setzt:

#filmliste {
font-family: Geneva, Tahoma, sans-serif;
}

Der definierte Style legt nun das Aussehen (in diesem Fall die Schriftart) aller Inhalte innerhalb des <div>-Tags fest, also die Auflistung der Filmtitel.

In unserem Beispielcode wird für die Filmliste das HTML-Tag <ol> genutzt, dies bewirkt, dass die einzelnen Objekte der Liste durchnummeriert werden. Über das Stylesheet kann auch dieses Verhalten geändert werden:

#filmliste ol {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

Dieser CSS-Code legt fest, dass jede Aufzählung (<ol>, ordered List) innerhalb von #filmliste nicht in Form einer typischen Aufzählung angezeigt wird (keine Durchnummerierung, kein Aufzählungspunkt und keine Einrückung).

webmatrix_101_p3_06

Auch das <a>-Tag innerhalb der Aufzählung kann beliebig angepasst werden. Mit dem folgenden Code können Aussehen oder Ausrichtung der Links zum Beispiel angepasst werden. Die definierten Styles werden dann auf alles <a>-Tags innerhalb von #filmliste angewendet:

#filmliste li a {
font-size: large;
color: #000000;
display: block;
padding: 5px;
}

Um einen Text deutlicher als Link sichtbar zu machen, kann man für das <a>-Tag auch einen so genannten Mouse Over-Effekt definieren, Das heißt, dass der gewünschte Link sich ändert, wenn man mit der Maus über ihn fährt. Dies lässt sich mit folgendem Befehl realisieren:

#filmliste li a:hover {}

Nun muss nur noch definiert werden, was passieren soll, wenn die Maus auf einen Link kommt:

#filmliste li a:hover {
border-left: 10px solid #94c9d4;
padding-left: 10px;
background-color: #e7f5f8;
text-decoration: none;
}

Mit diesem Code erreichen Sie, dass ein Link mit einem farbigen Hintergrund und einem Rahmen angezeigt wird, sobald Sie mit der Maus über ihn fahren:

webmatrix_101_p3_07

Es macht viel Spaß mit CSS zu experimentieren, da man sehr viele verschiedene Möglichkeiten hat und seine Webseite so einfach und schnell layouten kann. Aber was ist, wenn ein Webauftritt mehr als eine Seite hat? Das ist eine gute Frage, denn bisher haben wir ja die einzelnen Styles im Header der Seite untergebracht. Man kann seine „Styles“ aber auch in eine extra Datei auslagern und diese mit einem kurzen Befehl in beliebig viele Seiten integrieren, sodass alle Seiten eines Webauftritts von denselben Styles profitieren können. Mit WebMatrix lässt sich diese CSS-Datei einfach anlegen, einfach unter dem Button „Neu“ den Befehl „Neue Datei“ wählen:

webmatrix_101_p3_08

In der Dialogbox wählen Sie “CSS” und geben der anzulegenden Datei einen Namen, zum Beispiel filme.css.

webmatrix_101_p3_09

Nach dem Klicken auf OK wird die Datei erstellt. Zu Beginn enthält sie lediglich einen leeren <body>-Tag:

body {
}

Ersetzen Sie das leere <body>-Tag mit dem folgenden CSS:

body {
font-family: Tahoma, Verdana, Geneva, sans-serif;
width: 85%;
margin: 20px auto;
}
 
header {
padding: 10px;
border-bottom: 1px solid #e5e5e5;
}
 
header h1 {
font-size: xx-large;
font-weight: normal;
padding: 0px;
margin: 0px;
}
 
#movieslist{
margin: 20px 0;
}
 
#movieslist ul {
list-style: none;
margin: 0;
padding: 0;
}
 
#movieslist li a {
font-size: large;
color: #000000;
display: block;
padding: 5px;
}
 
#movieslist li a:hover {
border-left: 10px solid #94c9d4;
padding-left: 10px;
background-color: #e7f5f8;
text-decoration: none;
}

Gehen Sie dann zurück auf Ihre Seite und löschen im Header das komplette <style>-Tag. Stattdessen fügen Sie den folgenden Befehl in den Header Ihrer Seite ein:

<link rel="stylesheet" type="text/css" href="filme.css" />

Das teilt dem Browser mit, dass er das eben angelegte Stylesheet laden soll. Ihr HTML-Code sollte nun folgenderweise aussehen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Lieblingsfilme von mir</title>
  <link rel="stylesheet" type="text/css" href="filme.css"/>
</head>
<body>
<header><h1>Meine Lieblingsfilme</h1></header>
<div>
<ol>
<li><a href="#">Waynes World</a></li>
<li><a href="#">Sonnenallee</a></li>
<li><a href="#">Last Boy Scout</a></li>
<li><a href="#">Tron</a></li>
<li><a href="#">Sissi die junge Kaiserin</a></li>
</ol>
</div>
<footer>
Diese Seite wurde mit Microsoft WebMatrix erstellt.<br />
<a href="http://web.ms/webmatrix ">Jetzt herunterladen!</a>
</footer>
</body>
</html>

Als letztes sollten wir nun noch den Footer der Seite anpassen, der ein wenig unsauber aussieht. Hiefür fügen Sie diesen CSS-Code in Ihr Stylesheet ein:

footer {
font-size: smaller;
color: #ccc;
text-align: center;
padding: 20px 10px 10px 10px;
border-top: 1px solid #e5e5e5;
{

webmatrix_101_p3_09

Zusammenfassung

Dieser Artikel sollte einen ersten Einblick in die Verwendung von CSS mit WebMatrix geben und zeigen, wie Sie CSS-Informationen in eine Seite einbinden können. Dabei haben Sie kennen gelernt, auf welche Art und Weise Sie CSS innerhalb einer Seite nutzen können oder die CSS-Informationen in eine extra Datei auslagern können.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!