# Lektion 12: Layout (CSS)

Wäre es nicht toll, wenn Sie Ihren Seiten das Layout verpassen könnten, was sie verdienen?

## Klar, aber wie?

Um Ihrer Internetseite ein Layout zu geben, benutzen Sie Cascading Style Sheets (CSS). In dieser Lektion bekommen Sie eine kurze Einführung in das Thema CSS. Später können Sie anhand unseres CSS-Tutorials von Grund auf alles über CSS lernen. Bitte sehen Sie diese Lektion hier mehr als ‘Appetitanreger’.

CSS ist der hübschere Partner von HTML. In Sachen Code gibt es nämlich keine Gemeinsamkeiten. HTML kümmert sich um die grobe Struktur, während CSS dem ganzen ein hübsches Aussehen (Layout) verleiht.

Wie bereits in Lektion 7 gezeigt wurde, können CSS-Angaben im `style`-Attribut angegeben werden. Z.B. können Sie Schriftart und Schriftgröße eines Absatzes festlegen:

Beispiel 1:

    	<p style="font-size:20px;">Dieser Text hat Schriftgröße 20</p>
    	<p style="font-family:courier;">Dieser Text hat die Schriftart Courier</p>
    	<p style="font-size:20px; font-family:courier;">Hier Schriftart Courier und Größe 20</p>

sieht im Browser wie folgt aus:

Dieser Text hat Schriftgröße 20

Dieser Text hat die Schriftart Courier

Hier Schriftart Courier und Größe 20

Im obenstehenden Beispiel benutzen wir das `style`-Attribut um die Schriftart (mit `font-family`) und die Schriftgröße (mit `font-size`) anzugeben. Bitte beachten Sie, dass, wie beim letzten Beispielabsatz, beide Angaben von Schriftart und Schriftgröße mit einem Semikolon von einander angegrenzt werden.

## Klingt nach jeder Menge Arbeit?

Eine der cleveren Eigenarten von CSS ist die Möglichkeit, dass man das Layout zentral verwalten kann. Anstatt das `style`-Attribut in jedem Tag zu nutzen, kann man dem Browser einmal mitteilen, wie er den Text auf der Seite formatieren/layouten soll.

Beispiel 2:

    	<html>

    	  <head>
    	  <title>Meine erste CSS-Webseite</title>

    	 <style type="text/css">
    	  h1 {font-size: 30px; font-family: arial;}
    	  h2 {font-size: 15px; font-family: courier;}
    	  p {font-size: 8px; font-family: "times new roman";}
    	  </style>

    	  </head>

    	  <body>
    	  <h1>Meine erste CSS-Webseite</h1>
    	  <h2>Willkommen auf meiner ersten CSS-Webseite!</h2>
    	  <p>Hier können Sie sehen, wie CSS funktioniert. </p>
    	  </body>

    	</html>

- Beispiel anzeigen

Im obigen Beispiel wurde das CSS in den head-Bereich eingefügt und gilt somit für die gesamte Seite. Dies wird mit dem Tag `<style type="text/css">` gemacht, der dem Browser mitteilt, dass dies CSS-Anweisungen sind.

In diesem Beispiel würden alle Überschriften auf der Seite in Arial mit der Größe 30 Pixel formatiert sein. Sub-Überschriften wären in Courier in Größe 15. Text in Absätzen (`<p></p>`) würde in Times New Roman mit Schriftgröße 8 dargestellt.

Eine andere Möglichkeit ist, das CSS in einer eigenständigen Datei zu speichern. Mit einer eigenständigen CSS-Datei können Sie das Layout von vielen Seiten auf einmal steuern. Ziemlich clever, wenn Sie die Schriftart oder -größe eines Internetauftrittes mit hunderten (oder gar tausenden) Seiten ändern möchten. Diese Möglichkeit sparen wir hier aus, aber Sie können sie später in unserem CSS-Tutorial lernen.

## Was kann ich noch mit CSS machen?

CSS kann für viel mehr verwendet werden, als nur Schriftarten und -größen einzustellen. Man kann z.B. auch Farben und Hintergründe festlegen. Hier ein paar Beispiele mit denen Sie herumprobieren können:

    	<p style="color:green;">Grüner text</p>

    	<h1 style="background-color: blue;">Überschrift auf blauem Hintergrund</h1>

    	<body style="background-image: url('http://www.html.net/mylogo.jpg');">

Fügen Sie die Beispiele in Ihre Seiten ein – sowohl die soeben gezeigte Möglichkeit, als auch das CSS im head-Bereich der Seite.

## Geht es bei CSS nur um Farben und Schriftarten?

Neben den Einstellungen für Farben und Schriftarten usw. kann mit CSS auch die Präsentation der Seite gesteuert werden (Ränder, Ausrichtungen, Höhe, Breite usw.). Mit dem Gebrauch von CSS sind Sie in der Lage, Ihre Seiten elegant und präzise zu gestalten.

Beispiel 3:

    	<p style="padding:25px;border:1px solid red;">Ich liebe CSS!</p>

sieht im Browser wie folgt aus:

Ich liebe CSS!

Mit `float` (engl. für Umfluß) kann ein Element links oder rechts ausgerichtet werden. Das nachfolgende Beispiel veranschaulicht das Prinzip:

Beispiel 4:

    	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    	   sed diam nonummy nibh euismod tincidunt ut laoreet dolore
    	   magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
    	   quis nostrud exerci tation ullamcorper suscipit
    	   lobortis nisl ut aliquip ex ea commodo consequat ...</p>

sieht im Browser wie folgt aus:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat …

Im Beispiel wird ein Element (das Bild) links ausgerichtet und ein anderes Element (der Text) rückt auf, füllt die ‘Lücke’ (umfließt das mit `float` ausgerichtete Bild).

Mit der Eigenschaft `position` kann ein Element pixelgenau auf einer Webseite positioniert werden:

Beispiel 5:

- Beispiel anzeigen

In diesem Beispiel ist das Bild 50 Pixel vom unteren und 10 Pixel vom rechten Rand des Browserfensters platziert. Sie können es natürlich auch überall anders hin setzen. Probieren Sie es aus! Ziemlich einfach und ganz schön cool oder?

## Cool ja, aber einfach?

Auch CSS kann man nicht in 10 Minuten erlernen. Und wie oben gesagt, dies soll nur ein kurzer Einblick sein. Später können Sie in unserem CSS-Tutorial noch viel mehr lernen.

Für den Moment konzentrieren wir uns wieder auf HTML und gehen weiter zur nächsten Lektion, wo wir lernen werden, wie man eine Internetseite ins Internet bekommt, so dass die ganze Welt sie sehen kann.