CSS

CSS: Cascading Style Sheets, das Werkzeug Nr. 1 des Webdesigners

Cascading Style Sheets, kurz CSS, ist salopp gesagt die professionelle Art der Gestaltung und Formatierung von HTML-Inhalten. Vor einigen Jahren wurde HTML-Styling verwendet, um HTML zu gestalten. Purer HTML-Code ist ohne Gestaltung bereits mit Standardeigenschaften versehen. Eine Liste enthält automatisch Listenpunkte, eine Überschrift ist grundsätzlich größer und/oder fetter. Prinzipien, die jedem Element sozusagen einen semantischen Wert geben. Jedes Element ist aufgrund des Elements an sich gestaltet und nicht wegen Regeln der Designer. Das bedeutet, dass HTML als Auszeichnungssprache bereits beschreibt, wie etwas auszusehen hat. Ein Formularsende-Button ist ein erkennbarer Knopf und kein anklickbarer Text, ein Paragraf erzeugt automatisch einen Zeilenumbruch etc.

CSS sorgt an dieser Stelle für den nötigen Grad der Individualisierung, den jedes noch so minimalistische Unternehmen anstrebt. Während HTML beschreibt, was ein Element ist, ist CSS rein für die optische Anmutung dieser Elemente zuständig.

 

 

CSS ersetzt heute aus gutem Grund HTML als Gestaltungssprache.

HTML-Tags sind die Basis, das Objekt/Element, das gestaltet werden möchte:

<p>Ich bin ein Paragraf</p>

Das <p> bezeichnet in HTML einen Paragrafen. Der Paragraf hat die Eigenschaft, einen automatischen Zeilenumbruch zu erzeugen. Weitere Eigenschaften wären Farbe, Größe, Schriftart, Schriftgröße Schriftschnitt, Rahmen etc. Ohne Angabe von Eigenschaften gibt dieser HTML-Code einen Paragrafen ohne besondere Formatierung aus. Standardmäßig ist die Farbe in allen Browsern Schwarz, die Breite richtet sich nach dem umschließenden Element, die Größe ist die Standardgröße.

 

 

HTML-Styling vs. CSS

Um per HTML nun dem Paragrafen eine Farbe zu geben, muss ein Tag hinzugefügt werden, der Font-Tag.

<p><font color="red">Ich bin ein Paragraf</font></p>

Dadurch wird der Font (= Schriftart) rot gefärbt bzw. alle Inhalte innerhalb des -Tags. Das Äquivalent in CSS wäre:

<p style="color:red;">Ich bin ein Paragraf</p>

Der Effekt wäre identisch, beide Texte sind rot. Jedoch können mit CSS einige erhebliche Vorteile genutzt werden. CSS muss nicht zwingend im Element ansich stehen. Der Vorteil: Es müssen bei 20 Paragrafen pro Seite nicht 20 Tags geändert werden, sobald man nicht mehr Rot, sondern Blau wünscht. Der zweite Vorteil: Die Gestaltungsrichtlinie steht nicht 20-mal im Tag, sondern nur einmal in einer externen CSS-Datei, das spart Traffic und Wartungsaufwand.

 

 

CSS-Selektoren

Um per externem CSS einen HTML-Code zu gestalten, gibt es eine Fülle von Selektoren. Am Beispiel unseres Paragrafen würde die externe CSS-Angabe wie folgt aussehen:

HTML-Code:

<p>Ich bin ein Paragraf</p>

CSS-Code:

p { color:red; }

Der sogenannte Type-Selektor gestaltet jetzt jeden p-Tag rot. Das Ergebnis:

 

 

Der ID- und Class-Selektor

Da der CSS-Code jeden Paragrafen rot stylt und es auf einer HTML-Seite ggf. viele Paragrafen gibt, ist es notwendig, mit einem Class- oder ID-Selektor nur bestimmte Paragrafen anzusprechen.

HTML-Code:

<p>Ich bin ein Paragraf</p>

<p class="blau" id="klein">Ich bin ein weiterer Paragraf</p>

<p class="blau">Mehr Inhalt</p>

<p class="rahmen blau">Weitere Informationen</p>

CSS-Code:

p {

color:red;

}

.blau {

color:blue;

}

.rahmen {

border:3px solid red;

}

#klein {

font-size:70%;

}

Der Class-Selektor wird mit einem "." eingeleitet, er darf im HTML Code mehrmals vorkommen und hat eine höhere Relevanz als Type-Selektoren. Der ID-Selektor wird mit einem "#" eingeleitet, er hat eine höhere Relevanz als Type- oder Class-Selektoren. So können Eigenschaften global festgelegt werden und wiederum überschrieben werden.

Das Ergebnis:

Die Angabe für ?p? gestaltet alle Paragrafen rot, die Class-Selektoren überschreiben die Farbe und fügen einen Rahmen hinzu, der ID-Selektor verkleinert die Schriftgröße auf 70 %. So lassen sich beliebig viele CSS-Angaben notieren. Die Zeilenumbrüche im CSS-Code dienen nur der Ordnung und könnten auch weggelassen werden zwecks Ladezeitoptimierung.

 

 

CSS-Code auslagern

Um diese CSS-Angaben zu verwenden gibt es 3 Möglichkeiten der Einbindung. Die erste Möglichkeit ist die Einbindung in einer externen Datei.

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

Die 2. Möglichkeit ist der -Bereich einer HTML-Seite. Die hier notierten CSS-Angaben überschreiben Angaben aus der externen CSS-Datei.

<style type="text/css">

p {

color:red;

}

</style>

Die 3. und unvernünftigste Möglichkeit ist das Style-Attribut direkt im HTML-Code. Die direkte Notierung überschreibt sowohl CSS im -Bereich als auch die externe CSS-Datei. Jedoch bläht sich der HTML-Code unnötig auf und der Verwaltungsaufwand steigt.

<p style="color:red;">Ich bin ein Paragraph</p>

Vielen Dank für Ihr Interesse!
Sollten Sie auf der Suche nach einer Stelle als Entwickler sein, können Sie sich gerne auf unserer Karriereseite bewerben.