Webdesign mit CSS und Stylesheets

CSS Webdesign mit Stylesheets

Füher wurden Webseiten mit Tabellen erstellt, um die jeweiligen Elemente wie Bilder, Texte und Navigation zu positionieren. Mittlerweile ist jedoch XHTML  Standard, der von den aktuellen Browsern auch unterstützt wird. Ein großer Vorteil liegt bei der Entwicklung von Webseiten, so können mit nur einer Stylesheet-Datei z.B. alle Farben, Shriften oder Positionen besagte Elemente alle Seite einer Domain geändert werden. Früher musste man jede einzelne Datei öffnen und bearbeiten. Ein weiterer Vorteil liegt in der Geschwindigkeit und Größe der Webseiten. Die Internetseiten welche mit CSS Cascading Style Sheets entwickelt wurden, sind kleiner und laden somit schneller in den Browser des Benutzers. Unsere Webagentur in Fürth Design-Magics zeichnet sich verantwortlich dafür, Kunden keine veraltete Technik bei der Webprogrammierung anzubieten, sondern Webseiten, welche von den Suchmaschinen gut gefunden und gelistet werden und die zudem barrierefrei sind. Gerne beraten ich Sie, wenn Sie planen eine  neue Webseite zu erstellen, oder eine bestehende zu modernisieren.

Zur Technik von Stylesheets ist zusagen, dass in ihnen alle Anweisungen eingebracht werden, die letztlich über das Aussehen, das Design der Internetseite entscheiden. Das wäre also z.B. die Schriftart, die Schriftgröße, die Farben, Hintergrundfarben, Hintergrundbilder, Rahmen, Abstände, wie die Navigation gestaltet wird und die Positionierung der jeweiligen Elemente. Zudem lassen sich mit Stylesheets Internetseiten auch druckfreundlich gestalten. 

CSS Styles in direkt in der Webseite

CSS Anweisungen lassen sich entweder direkt in eine Webseite einbinden 

<head>
  <title>CSS in HTML</title>
<style type="text/css">
<!--
In diesem Bereich definieren Sie die Styles für die gewünschten Elemente z.B.
-->
body {
font-family: arial;
font-size: .8em;
color: black;
background-color: white;
margin: 0;
padding: 0;
}
</style>
</head>

Externes CSS Stylesheet mit Webseite verlinken

Oder Sie können in Ihre Webseite CSS in Form einer externen Stylesheet-Datei einbinden, wobei letzteres sinnvoller ist, weil Sie mittels dieser das Design aller Webseiten auf einmal ändern können:
<link rel="stylesheet" type="text/css" href="beispiel.css" />
Mit:
<style type="text/css">
@import url(url_des_stylesheets);
</style>
besteht die Möglichkeit der Einbindung weiterer externer Stylesheets.
Eingefügt werden die im Quellcode der Webseite im Head-Bereich.

Auf der folgenden Seite lernen Sie:
Hindtergrundfarben und Schriftfarben in einer Stylesheet-Datei zu definieren. 

Die Anleitung orientiert sich an dem Buch little boxes Webseiten gestalten mit CSS Grundlagen.
Von dem Autor sind die nachfolgenden Titel verfügbar:

Nach oben