CSS-Crashkurs

Crashkurs in CSS – CSS-Crashkurs völlig kostenlos!

Was ist CSS?

CSS (Cascading Style Sheets) ist eine bekannte Stylesheet-Sprache zur effizienten Gestaltung von Webseiten. Die Sprache wird meist in Kombination mit Auszeichnungssprachen wie HTML eingesetzt und ermöglicht es, das Aussehen unterschiedlicher Elemente einer Webseite zu definieren.

Gleichzeitig erfolgt eine Trennung zwischen Design und Inhalt. Die Trennung der Komponenten macht es möglich, einen einheitlichen Webauftritt zu erschaffen und die Aufwände für die Wartung deutlich zu reduzieren.

Der Standard CSS ist jedoch nicht starr definiert, sondern wird als sogenannter Living Standard konstant weiterentwickelt.

PHP Programmierer buchen!

Die Grundlagen von CSS

Die einzelnen Dateien lassen sich in beliebigen Editoren erstellen. Die Ergänzungssprache selbst ist erfreulicherweise überaus einfach gestaltet. Möchte man beispielsweise einen Absatz blau einfärben, muss lediglich nachstehender Codeblock deklariert werden:

Wichtig ist hierbei, dass die Datei mit der Endung .css abgespeichert wird.

Damit CSS für einen Webauftritt funktioniert, muss die Datei zudem im Verzeichnis styles hinterlegt werden. Um die CSS-Datei in ein Webprojekt zu integrieren, wird die Datei im Anschluss mit dem HTML-Dokument verknüpft. Dies geschieht in der Datei INDEX der HTML-Datei.

Trägt die Datei beispielsweise den Namen myFirstCSS, so muss die Datei im Header – zwischen head & head, der Webeseite wie folgt implementiert werden:

CSS-Regeln

Die Struktur der Sprache wird durch Regeln bestimmt, wobei die Kombinationsmöglichkeiten bestimmten Standards entsprechen müssen. Die wichtigsten Elemente einer CSS-Datei sind:

  • Selektoren
  • Deklarationen
  • Properties
  • Values

Selektoren

Selektoren stehen am Anfang einer jeden Regel und bestimmen die Elemente, die verändert werden sollen. Dabei ist es möglich, mehrere Elemente gleichzeitig auszuwählen. So verändert nachstehender Codeblock beispielsweise die Farbe sowie die Schriftgröße aller Elemente des Typs h1 und h2.

Deklarationen

Die Regelsätze, die nach einem Selektor beginnen, werden von geschwungenen Klammern ({}) begrenzt. In diesem Bereich befinden sich die Deklarationen, denen unterschiedliche Properties und Values zugewiesen sind. Der Deklarationsbereich bestimmt somit, wie die einzelnen Elemente modifiziert werden.

Nachstehendes Beispiel verändert die Darstellung der Elemente des Typs Body:

Properties und Values

Properties definieren unterschiedliche CSS-Eigenschaften. Dabei ist es möglich, benutzerdefinierte Properties anzulegen oder auf bestehende Eigenschaften zurückzugreifen.

Häufig verwendet Properties sind beispielsweise:

  • background-color
  • border
  • border-width
  • border-style
  • border-color
  • color
  • font
  • font-style
  • margin
  • padding
  • text-align
  • width

Die einzelnen Properties werden mit Values kombiniert, die das Aussehen der HTML-Elemente beeinflussen. Die Werte stehen immer rechts neben den Properties und werden von diesen mithilfe eines Doppelpunkts (:) getrennt. Jede Deklaration muss zudem mit einem Semikolon (;) abgeschlossen werden. Durch dieses Vorgehen lassen sich mehrere Properties und Values innerhalb einer Deklaration festlegen.

Schriftformatierung

Für die Schriftformatierung gibt es zahlreiche Properties, die insbesondere durch das Schlüsselwort fontgekennzeichnet sind. Dabei ist es möglich, sowohl die Schriftart als auch die Schriftgröße und Schriftfarbe anzupassen. Die wichtigsten Eigenschaften werden nachstehend kurz erklärt.

font-size

Die font-size bestimmt die Schriftgröße und lässt sich sowohl durch absolute als auch durch relative Werte festlegen. Relative Werte sind beispielsweise smaller, larger oder inherit. Zudem gibt es vordefinierte Werte wie x-small, small, medium, larger oder x-large.

Die Schriftgröße kann jedoch auch über eine fixe Pixelgröße (px) bestimmt werden, wie nachstehendes Beispiel zeigt:

font-family

Das Property font-family bestimmt die gewünschte Schriftart. Hierbei besteht die Möglichkeit, unterschiedliche Schriftarten zu deklarieren. Ist eine Schriftart nicht verfügbar, wird durch die alternative Deklaration die nächste Schriftart gewählt. Die Schriftarten werden der Reihenfolge nach abgearbeitet, wobei die einzelnen Schriftarten durch Kommata getrennt werden.

Positionierungen und Hintergrundfarben

Mithilfe von CSS lassen sich Texte und Bilder exakt auf dem Bildschirm positionieren. Die wichtigsten Elemente für die Positionierung sind:

  • Padding
  • Margin
  • Border

Padding

Das sogenannte Padding bezieht sich auf den Innenabstand eines Elements. Je größer das Padding ist, desto weiter entfernt sich das Element von der Elementgrenze.

Margin

Im Gegensatz zum Padding bezieht sich Margin auf den Außenabstand des Elements. Dadurch ist es möglich, den Abstand zu Seitenrändern oder zu anderen Elementen zu verkleinern oder zu vergrößern.

Border

Unter Border versteht man die Umrandung eines Elements. Die Umrandung kann sowohl unsichtbar sein als auch aus Linien unterschiedlicher Stärke bestehen.

Hintergrundfarbe

Um die Hintergrundfarbe zu ändern, wird das Property background-color benötigt. Die Hintergrundfarbe lässt sich sowohl für einen bestimmten Bereich als auch für unterschiedliche Teilbereiche nutzen. Möchte man beispielsweise den gesamten Bereich einer Webseite in einer Farbe darstellen, kann nachstehende Deklaration genutzt werden.

Möchte man wiederum unterschiedliche Bereiche mit verschiedenen Farben gestalten, können die einzelnen Deklarationen miteinander kombiniert werden.

Fazit zum CSS-Crashkurs

In CSS-Crashkurs haben Sie gelernt, was CSS ist und wie man Stylesheets mit HTML-Dokumenten verknüpft. Zudem kennen Sie nun die Regeln, nach denen eine CSS-Datei aufgebaut ist und Sie sind überdies mit den wichtigsten Properties und Values vertraut, um Stiländerungen an Ihrer Webseite selbst vorzunehmen.

Wohlgemerkt: Dieser CSS-Crashkurs dient nur zur kurzen Einleitung, damit Sie lernen dynamische Webseiten mit PHP zu programmieren.