CSS: Wie style ich meine Seite? // Der Weg zur eigenen Webseite! - Guide. #5

Endlich ist es soweit! Nachdem wir die wichtigsten HTML-TAGs kennen, werden wir diesen TAGs die Eigenschaften geben, die wir möchten. Beispielsweise wo das Element hin soll, wie hoch und breit es sein soll und vieles mehr. Dafür benötigen wir CSS.

Was wir bisher gelernt haben.

^{Das HTML-Grundgerüst ist kein Problem mehr. Wir können Texte auf einer Webseite mit HTML formatieren und strukturieren. Wir können auch DIV- und SPAN-Elemente definieren und verstehen warum wir sie brauchen. Dasselbe gilt für die neuen DIV-ähnlichen Elemente, die es seit HTML5 gibt wie header, nav, section, article, aside und footer.}

In den letzten Beiträgen habe ich schon viel über CSS versprochen, jetzt ist es soweit!

START

Was ist CSS?

Fangen wir mal von vorne an: CSS steht für Cascading Style Sheets. Übersetzt bedeutet dies "gestufte Gestaltungsbogen".

CSS ist im Gegensatz zu HTML eine reine Stilsprache. Mit dieser können wir das Aussehen von HTML-Dokumenten gestalten.

In CSS können wir wie im vorherigen Post erwähnt, Schriftarten, Farben, Abstände, Linien, Größen, Hintergrundbilder und vieles mehr definieren.

CSS wird von allen Browsern unterstützt. Mittlerweile gibt es schon CSS3, also CSS in Version 3. Mit den Änderungen und Vorteilen von CSS3 werden wir uns jedoch erst in späteren Beiträgen beschäftigen.

Einbinden von CSS in die Webseite.

Wo schreibe ich CSS?

Es gibt mehrere Möglichkeiten, dem Browser mitzuteilen, dass wir CSS schreiben.

Variante #1. CSS direkt in die HTML-Datei schreiben.

Grundsätzlich kann man überall in einem HTML-Dokument den style-TAG verwenden. Besser ist es jedoch den head-Bereich ganz oben in einem HTML-Dokument dafür zu verwenden.

Variante #2. Externe style-Dateien.

Für große Projekte bevorzuge ich jedoch diese Möglichkeit.

Man legt sich einfach eine zweite Datei an. Ich nenne sie jetzt style.css. Man könnte jeden Namen vergeben, jedoch sollte die Dateiendung .css sein.

Das Bild hilft hoffentlich bei der Erklärung. Man verlinkt im head-Bereich auf eine "stylesheet"-Datei.
Beachte aber, dass der verlinkte Name im head-Bereich und der Dateiname der style-Datei dieselben sind.

In der CSS-Datei kann es jetzt los gehen!

1. Im Beispielbild oben hab ich den Hintergrund mithilfe von CSS geändert.
   Dafür habe ich den body-TAG verwendet.
2. Dort verwendete ich den Befehl: background-color: um die Hintergrundfarbe zu verändern.
3. Nachdem Befehl background-color: folgte cornsilk. Dies ist eine Farbe die ich recht angenehm empfinde. Da ich diesen Befehl beim body-Element angewendet hab, ist das gesamte sichtbare Feld mit dieser Hintergrundfarbe gefüllt.
4. Jeder Befehl muss mit einem Semikolon ; enden, ansonsten ist der Befehl nicht gültig!

CSS-Befehle.

Was können wir noch alles ändern?

Ich hoffe, dass dir diese beiden Dateien klar waren. Beide sind mit Kommentaren bestückt, die beim Verstehen helfen sollen. Das ganze sieht dann im Browser so aus:

Natürlich ist diese Webseite noch keine Meisterleistung, doch ich glaube für "unsere erste Webseite" können wir das so stehen lassen.

Meine Farbauswahl ist noch nicht die beste. Das hätte ich viel besser auswählen könne, doch darüber machen wir uns jetzt mal keine sorgen. Wir haben unsere erste Webseite designed. Die Navigation ist nun nebeneinander und etwas schöner aufbereitet als vorher.

noch mehr CSS-Befehle.

CSS-Befehle für die Schrift

Die meisten CSS-Befehle werden wir in den nächsten Beiträgen noch sehr intensiv kennen lernen. In der folgenden Auflistung sind die wichtigsten Befehle für das formatieren für die Schriften.

Befehl	Bedeutung	Beispielangaben
font-family	Schriftart	Arial, Times New Roman, usw.
font-size	Schriftgröße	Wert in px oder in %
color	Schriftfarbe	red, green, white oder in hex. Farbcode
font-variant	Schriftvariante	normal, small-caps
font-weight	Schriftgewicht	normal, bold, bolder, lighter
font-style	Schriftstil	normal, oblique, italic

noch mehr CSS-Befehle.

CSS-Befehle für unsere Texte

Hier noch die wichtigsten Befehle für die Textgestaltung. Nicht verzweifeln, wir werden uns später alle nochmal etwas genauer ansehen.

Befehl	Bedeutung	Beispielangaben
text-align	Textausrichtung	left, right, center, justify (Blocksatz)
line-height	Zeilenabstand	numerischer Wert in px oder %
text-decoration	Textgestaltung	underline, overline, line-through, blink
word-spacing	Wortabstand	Wert in px oder %
letter-spacing	Zeichenabstand	Wert in px oder %
text-indent	Texteinrückung	Wert in px oder %
text-transform	Textart	capitalize, uppercase, lowercase, none

noch mehr CSS-Befehle.

CSS-Befehle für Seitenränder

Befehle für Außenabstand. Also wie viel Abstand man zum nächsten Element haben möchte.

Befehl	Bedeutung	Beispielangaben
margin	genereller Abstand (oben, unten, links, rechts)	Wert in px oder in %
margin-left	Abstand von links	Wert in px oder in %
margin-right	Abstand von rechts	Wert in px oder in %
margin-top	Abstand von oben	Wert in px oder in %
margin-bottom	Abstand von unten	Wert in px oder in %

Dasselbe gibt es für den Innenabstand. Hier spricht man aber vom padding. Dies haben wir heute schon für den Abstand der Überschrift im Header verwendet.

Befehl	Bedeutung	Beispielangaben
padding	genereller Abstand (oben, unten, links, rechts)	Wert in px oder in %
padding-left	Abstand von links	Wert in px oder in %
padding-right	Abstand von rechts	Wert in px oder in %
padding-top	Abstand von oben	Wert in px oder in %
padding-bottom	Abstand von unten	Wert in px oder in %

noch mehr CSS-Befehle.

LINKS formatieren

In der folgenden Tabelle geht es nicht um die Befehle sondern um die "TAGs" wie man Links anspricht, um sie mit den obigen Befehlen bearbeiten zu können.

Befehl	Bedeutung	Beispielangaben
a:link	Link	Hier kann fast jeder CSS-Befehl verwendet werden
a:visited	bereits besuchter Link	Hier kann fast jeder CSS-Befehl verwendet werden
a:active	bereits angeklickter Link	Hier kann fast jeder CSS-Befehl verwendet werden
a:hover	Link beim überfahren mit der Maus	Hier kann fast jeder CSS-Befehl verwendet werden

Dich verwirrt das ein bisschen? Kein Problem! Im nächsten Beitrag gehen wir das nochmal ein wenig genauer durch.

Das wars mit der CSS-Einführung! Im nächsten Beitrag gehts hier wieder weiter. Ich hoffe mal, dass ich dir weiterhelfen konnte.

Wenn du nichts verpassen willst folge mir einfach!

Mehr Wissen!

Ich habe schon einige Artikel über das Internet geschrieben. Vielleicht ist etwas interessantes für dich dabei:

• HTML5-Elemente: header, nav, footer uvm. ... - Internet-Basics #9
• HTML: DIV und SPAN-Elemente - Internet-Basics #8
• HTML-TAG: Texte strukturieren und formatieren. - Internet-Basics #7
• Der Weg zur eigenen Webseite! - Guide. Alles von Beginn an. - Internet-Basics #6

^{Meine Schlussworte:Für diesen Beitrag wendete ich besonders viel mühe auf. Ich würde mich riesig über Feedback in einen Kommentar freuen.
Was gibts im nächsten Beitrag? Die Fortsetzung von CSS. Wir werden unsere Webseite ein wenig optimieren. Beispielsweise werden wir lernen, wie wir Farben auswählen, die besser zusammenpassen. Nicht nur das, endlich werden wir unsere Seitenleiste neben unserem Inhalt stehen haben.}

DANKE!