Der CSS-Kurs: Styling für deine Webseite

So peppst du das Aussehen deiner Homepage mit Cascading Style Sheets auf

So geht CSS

Das hier ist eine kurze Einführung in die weite Welt der Cascading Style Sheets Sprache, kurz CSS. Mit Hilfe von CSS kannst du das Aussehen deiner Homepage festlegen. Du kannst dir viel Quellcode in deinen einzelnen Seiten sparen, wenn du alle auf das selbe Stylesheet verlinkst. Der Quellcode wird so auch übersichtlicher und du findest dich besser zurecht. Und das Beste ist, dass du so sicher bist, dass die Seiten gleich aussehen und nicht plötzlich die Links auf der Startseite rot und die Links im Gästebuch blau erscheinen.

Um diesen Kurs zu machen, brauchst du Grundkenntnisse in HTML, da CSS ohne HTML nicht funktioniert.

Das lernst du in diesem Kurs:

  • Ein Style-Sheet verwenden und auf ein externes Style Sheet verweisen
  • Grundeigenschaften wie Hintergrundfarbe und Schrift festlegen
  • Eigenschaften der Links gestalten
  • Anpassen der Scrollbar (funktioniert nur mit Internet Explorer)
  • Ausblick

Los gehts

CSS-Datei: intern oder extern?

Es gibt zwei Möglichkeiten, seine Homepage mit CSS zu verschönern. Entweder man baut die Style Elemente direkt oder die Seite ein oder man verlinkt auf eine externe CSS-Datei, wo die ganzen Style-Elemente definiert sind.

Code für ein eingebundenes Stylessheet


<style type="text/css"> </style>~

Zwischen <style> und </style> kommen dann die ganzen Befehle, genannt Style-Rule (Stilregel). Jede Style-Rule beginnt mit einem Tag wie zum Beispiel body und dann kommt eine gescheifte Klammer {} in der dann die gewünschten Eigenschaften, wie Farbe, Schriftgröße,... stehen. Wie diese Style-Rules aussehen können, lernst du nachher noch kennen. Bei eingebundenen Stylessheets wäre noch hinzuzufügen, dass diese den Quellcode nicht kürzer und übersichtlicher gestalten.

So baut man ein externes Stylessheet

Wenn du deine Seiten immer gleich aussehen sollen, empfielt es sich, ein externes Stylessheet zu verwenden, auf das du dann von allen Seiten verlinkst.

<style type="text/css" title="currentStyle" media="screen">
    @import "stylessheet.css";
</style>~

oder

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

Der ganz Block mit dem <style> Befehl kommt immer in den <head> des Dokumentes, egal ob eingebundenes oder externes Styelssheet. Es steht halt nur was anderes im <head>.

So könnte dann dein <head> deiner Seite aussehen:

<head>
<title></title>
  <style type="text/css" title="currentStyle" media="screen">
        @import "stylessheet.css";
  </style>

</head>~

Bei einem externen Stylessheet verlinkst du auf eine css Datei, die du natürlich auch erstellen musst. Bei den Beispiellinks oben heißt sie stylessheet.css. Du kannst sie aber auch anders nennen. In dieser Datei tauchen dann nur Style-Rules und die Eigenschaften aus. Keine html-Tags oder sonstiges.

Weiter gehts mit Grundeigenschaften festlegen

Autorin / Autor: Delfin13 - Stand: 8. August 2006