CSS

Was ist und was kann CSS ?

Cascading Style sheets (Mehrstufige Formatvorlageen) kurz auch CSS genannt ist eine Formatierungssprache und Gestaltungssprache für Webseiten, wie z. B. HTML-, SVG- und XML-Dokumente. Mit Hilfe von CSS kann also das Aussehen (Farbe, Größe, Position> von Elementen (Texten, Überschriften, Listen, Tabellen, ...) beeinflusst werden.
Ein großer Vorteil von CSS ist die Trennung von Inhalt (.html) und Formatierung/Gestaltung (.css). So wird es möglich für ein ganzes Webprojekt zentral das Aussehen zu definieren und ggf. auch ganz einfach zu ändern. Gleichzeitig kann damit der gleiche Inhalt auf verschiedenen Devices unterschiedlich dargestellt werden.
Durch die Abtrennung der Gestaltung vom Inhalt werden die Webseiten schneller geladen, können von Suchmaschinen besser und schneller durchsucht werden und erlangen dadurch eine bessere Platzierung in den Suchergebnissen. Gleichzeitig wird die .html-Datei schlanker und besser les- und editierbar.

  Code-Beispiel Ansicht

CSS Grundstruktur:
Jedem html-Element kann ein spezielles Aussehen zugeordnet werden, z. B. einem Absatz eine Schriftfarbe, eine Hintergrundfarbe. Es ist möglich mehrere Formatanweisungen durch Semikolon getrennt hintereinader anzugeben.

  • p - ist das html-Element für einen Absatz, welches eine style-Anweisung erhält
  • background-color = und color = sind die Formatanweisungen
  • #0000ff bzw. white sind dann die zugehörigen Werte
 

<p style="background-color: #0000ff; color: white;">
 Beispiel-Text<br />mit einer 2. Zeile
</p>

Beispiel-Text
mit einer 2. Zeile
CSS im html-Element:
Die style-Anweisung steht dirkt im Tag des jeweiligen Elements und wirkt auch nur auf dieses. 

<p style="background-color: #00ff00; color: black;">
 Absatz 1
</p>
<p style="background-color: #ff0000; color: blue;">
 Absatz 2
</p>

Absatz 1

Absatz 2
CSS zentral im Header:
Innerhalb des Headers einer Webseite wird ein <style type="text/css">...</style> eingefügt. In diesem können Formatanweisungen für html-Elemente vorgenommen werden. Diese gelten dann für alle html-Elemente innerhalb dieser Webseite, bzw. dieser html-Datei. Es können dabei Elemente direkt formatiert werden, als auch Unterlelemente formatiert werden (Klassen). 

<!DOCTYPE html>
<html lang=de>
 <head><title>Page-Title</title>
  <style type="text/css">
   div { 
	padding: 10px; 
	margin: 10px; 
	border: 3px solid #ffffff; 
	box-shadow: 4px 4px 8px #ff0000;
	background-color: #00ff00; 
	color: #blue;
	font-size: 12px;
	}
   div.beispiel {
	border-bottom: 2px dashed gray;
	border-right: 2px dotted gray;
	}
  </style>
 </head>
<body>
 <div class="beispiel">
  Beispieltext
 </div>
</body>
</html>
Beispieltext
CSS und HTML in getrennten Dateien:
Hierbei werden die Format-Anweisungen in einer separaten Datei (z. B. meinFormat.css) notiert. Diese .css-Datei kann dann im header-Bereich einer html-Datei eingebunden werden und gilt dann für die gesamte Datei. Der Vorteil ist, das die .css-Datei in weitere html-Dateien z. B. eines ganzen Webprojektes eingebunden werden kann und bei Formatänderungen diese nur in der .css-Datei vorgenommen werden müssen und für alle die diese Formatdatei nutzen gelten. 

# .css-Datei (meinFormat.css)
   div { 
	padding: 10px; 
	margin: 10px; 
	border: 3px solid #ffffff; 
	box-shadow: 4px 4px 8px #ff0000;
	background-color: #00ff00; 
	color: #blue;
	font-size: 12px;
	}
   div.beispiel {
	border-bottom: 2px dashed gray;
	border-right: 2px dotted gray;
	}
	
# bsp_1.html-Datei
<!DOCTYPE html>
<html lang=de>
 <head><title>Page-Title</title>
  <link rel="stylesheet" 
           type="text/css" 
           href="meinFormat.css">
 </head>
<body>
 <div class="beispiel">
  Beispieltext
 </div>
</body>
</html>

# bsp_2.html-Datei
<!DOCTYPE html>
<html lang=de>
 <head><title>Page-Title</title>
  <link rel="stylesheet" 
           type="text/css" 
           href="meinFormat.css">
 </head>
<body>
 <div class="beispiel">
  sample text
 </div>
</body>
</html>
[bsp_1.html]
Beispieltext

[bsp_2.html]
sample text

Eine gute Webseite zu den CSS-Formatanweisungen ist www.css4you.de:

Link auf CSS 4 You