CSS

CSS ist die Abkürzung für Cascading Style Sheets. Anzutreffen in der Webseitenprogrammierung zur Gestalltung von Templates.
Diese deklarative Stylesheet-Sprache wird immer in Verbindung mit HTML oder XML eingesetzt.

Verwendung von CSS

Im Web wird CSS für HTML und XML Dokumente zum strukturieren und designen verwendet. CSS wird seit 1996 als CSS Level 1 im Internet genutzt und von allen Browsern unterstützt. CSS Level 2 ist seit 1998 im Internet verbreitet.
In frühen Zeiten von CSS 2 und CSS 2 haben die Browserhersteller nicht einheitlich die Angaben umgesetzt oder manche CSS Eigenschaften gar ignoriert. Browser wie Mozilla besitzen auch eigene Stylesheet Eigenschaften, was das ganze nochmal etwas komplizierter macht. CSS 3 ist seit 2000 in Aufbau und wird von modernen Browsern fast komplett unterstützt. Leider sind große Marken immer noch etwas hinter her. Das hat sich nun 2017 aber schon sehr gebessert. Problematisch sind z.B. Nutzer (mit frisch aufgesetztem Betriebssystem) ohne Browser-Update.

Aufbau / Syntax von CSS

Der Aufbau ist recht einfach gestalltet und auch für Neueinsteiger schnell erlernbar. Es kann zeitgleich mit HTML lernen begonnen werden. Alle CSS Eigenschaften verfolgen ein gemeinsames Muster der Schreibweise und bietet so Anfängern schnell optische Fortschritte.
Selektor Name{	Eigenschaft : Wert ;	Eigenschaft-A : Wert Wert ;}

Der Selektor gibt an, um was für Element es sich handelt.
Ein Punkt ( . ) steht für eine Klasse ( in HTML: class="optionaler-name" )
Ein Raute ( # ) steht für eine ID ( in HTML: id="optionaler-name" )

Die Tabulator-Einrückungen sind natürlich optional und haben keine Auswirkungen. Ebenfalls sind Zeilenumbrücke optional. Code kannst du auch auf eine einzige Zeile schreiben, wenn du das möchtest. Spart Speicherplatz und Downloadzeit, macht einfache Änderungen aber kaum möglich.

Es brauch auch kein Selektor (Punkt oder Raute) angegeben werden, um direkt alleHTML-Elemente gleichen Typs anzusprechen. Dies sieht dann so aus:
div{	border: 1px solid red;}

Dann gilt der border (Rahmen) für alle DIV-Elemente.
Info: DIV Elemente sind einfach Boxen (Blockelement), in denen Text und weiterer HTML eingefasst werden kann.

Das Ende einer Anweisung wird mittels Simikolon ( ; ) deklariert.
Mehrere Wertangaben werden durch Leerzeichen oder Komma getrennt. Wertangaben die ein Leerzeichen enthalten und CSS hier nicht trennen soll (Bsp: Schriftart nutzen: Times New Roman) werden in Anführungsstriche geschrieben.

Beispiel:
font-family: Tahoma , "Times New Roman" , Verdana ;

Code Erläuterung:
Es wird mit font-family die Schriftart definiert. Tahoma, Times New Roman und Verdana werden definiert. Ist die erste Anweisung (Tahoma) nicht auf dem PC des Webseitenbesuchers installiert, wird zur nächsten Schriftart versucht zu wechseln. Usw. Wird keine der Schriftarten gefunden, ist es Browserabhängig, welche Schrift genutzt wird. Meist ist Arial der Standart.

Aufruf von CSS

  • als externe Datei, aufrufbar über den Kopf der HTML Seite (im HEAD)
  • als interne Anweisung im Kopf der HTML Seite (im HEAD)
  • direkt in einem Element mittels style-Attribut (im BODY)
Es kann eine externe Datei erstellt werden, die eine .css Endung aufweißt.
CSS kann auch direkt im Kopf (Head) einer Seite aufgerufen werden oder mittels style-Attribut im Element selbst erzeugt werden.

Beispiel: externer Aufruf im HEAD
<html><head>	<link rel="stylesheet" type="text/css" href="style.css" />...</head>...


Beispiel: interne Anweisung im Kopf der Seite
<html><head>	<style type="text/css">	div		{		border: 1px solid red;	}</style>...</head>...


Beispiel: direkt im Element mittels style-Anweisung
<html><head>...</head><body>	<div style="border: 1px solid red;">Mein roter Rahmen</div>...</body></html>


Schreibst du CSS Code direkt in den Style eines HTML Elements, solltest du keine Zeilenumbrücke nutzen. Es macht den HTML Code unübersichtlich und längerer CSS Code sollte mit den anderen oberen Möglichkeiten geschrieben werden.

Hier gibts weitere Tutorials zu CSS und HTML.