css-Lehrgang erster Tag

Was euch bevorsteht:

  • Teil 1:
    • Die Bedeutung von css
    • Notwendiges Handwerkszeug
    • Einbindung von css
  • Teil 2:
    • Wir beginnen zu Stylen
    • Schriftformatierung
    • Rahmen- und Hintergrundeigenschaften
    • Das Box-Modell

Die Bedeutung von css

css (Cascading Style Sheets) sind eine Ergänzung zu html. Mit Hilfe der css-Sprache werden die Formateigenschaften einzelner html-Elemente bestimmt. Diese Eigenschaften gehen weit über die Möglichkeiten hinaus, die die html-Attribute zu bieten haben.

Darüber hinaus kann ich die Eigenschaften von html-Elementen zentral ändern. Das heisst, wenn ich z.B. die Überschrift 1.Grades verändere, so bezieht sich diese Änderung nicht nur auf eine einzelne Überschrift 1.Grades, sondern, wenn ich möchte, auf alle Überschriften 1. Grades der gesamten Seite, ja, sogar der gesamten Homepage. Ich kann also das Layout meiner Hompage vollkommen ändern, ohne jedes einzelne Dokument ändern zu müssen!

Grundlage für die Verwendung von css sind Grundkenntnisse in html. Wer den Lehrgang html bereits absolviert hat, bringt die erforderlichen Kenntnisse mit.

Daher empfehle ich, vor Durcharbeitung dieses Lehrgangs zunächst den Lehrgang html zu besuchen.

Notwendiges Handwerkszeug

Wenn ihr den html-Lehrgang absolviert habt, so habe ich eine gute Nachricht für euch: wir brauchen NICHTS! Alle Handswerkszeuge, die wir für html verwendet haben, können wir nun auch für css verwenden.

Aber folgendes solltet ihr auch jetzt mitbringen: Experimentierfreudigkeit und Geduld. Manchmal klappt eben nicht gleich alles so, wie es soll. Daher muss man auch mal ein bisschen testen.

Die Einbindung von css

Da gibt eine verschiedene Möglichkeiten:

Ich kann z.B. einem einzelnen html-Element eine css-Eigenschaft zuweisen.

css-lehrgang erster style

Mit dem Style "border:1px solid silver;" habe ich angewiesen, dass die Überschrift einen Rahmen in der Stärke 1 Pixel und der der Farbe silver erhalten soll.

Gleich zu Beginn ein paar wichtige Dinge:

  • Nach dem Attribut (hier:border) folgt ein Doppelpunkt, kein Gleichheitszeichen wie beim html.
  • Die Größenangabe (hier:1px) muss zusammengeschrieben werden. Andernfalls werdet ihr euch wundern, warum dieser Rahmen nicht angezeigt wird. Probiert es doch einmal aus und trennt die "1" und "px" im Quelltext durch ein Leerzeichen.

So sollte es in Ihrem Browserfenster aussehen, wenn ihr die css-Anweisung korrekt geschrieben habt:

css-lehrgang erster style im Browser

Die nächste Möglichkeit ist die Einbindung in den Head des html-Dokuments.

css-lehrgang style im head

Nach Eingabe des Quelltextes sollte folgendes entstehen:

css-lehrgang style im head

Jetzt hat das css nicht nur eine Überschrift, sondern auch die nächste im Style geändert. Und das css würde es auch bei einer dritten und vierten tun, wenn wir diese im Quelltext eingeben.

Wir haben jetzt also einen zentralen Ort geschaffen, in dem wir das Style beeinflussen können.

Kurz noch ein paar Hinweise zum Aufbau eines styles:

  • Zunächst das html-Tag, also das Element ohne Klammern.
  • Dann eine geschweifte öffnende Klammer
  • Die Style-Eigenschaft
  • Wollen wir mehrere Style-Eigenschaften definieren, so folgt nach jeder Style-Eigenschaft ein Semikolon.
  • Zum Schluss noch die geschweifte schließende Klammer.

Wenn wir nur eine Eigenschaft definieren, so kann das Semikolon auch weggelassen werden, ebenso bei der letzten Style-Eigenschaft. Ich habe es mir jedoch zur Angewohnheit gemacht, jedes Mal das Semikolon zu setzen.

Übrigens verwende ich diese Variante der Style-Einbindung immer dann ganz gern, wenn ich ein neues Layout entwerfe. Nach Fertigstellung verschiebe ich dann die Styles nach Muster der dritten Variante:

Die Einbindung von Styles durch eine externe Datei. So eine Datei wollen wir nun erstellen. Zunächst erstellen wir eine neue leere Datei. Diese speichern wir unter dem Namen "styles.css" im gleichen Verzeichnis unseren html-Dokuments. Dann kopieren wir den Style für h1 dort hinein. Die Tags <style type="text/css"> und </style> können wir nun entfernen. Zur Einbindung benötigen wir nun noch eine Angabe im head des html-Dokuments:

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

Die beiden Dateien sollten nun folgendermaßen aussehen:

css-lehrgang style in externer Datei

Hier die Datei "styles.css"

css-lehrgang style in externer Datei

Nach Aufrufen unseres html-Dokuments sollte nun wieder Folgendes zu sehen sein:

css-lehrgang style im head

Diese externe css-Datei lässt sich natürlich in allen Dateien des Webprojekts integrieren, sodass alle Seiten das gleiche Aussehen erhalten und Änderungen der Styles sich auch auf alle Seiten auswirken. Also eine sehr effektive Art der Anpassung!

html-Elemente werden in css Selektoren genannt, die über css zugewiesenen Eigenschaften nennt man Deklaration. Beispiel:

  • h1 = Selektor
  • {font-size:10pt;} = Deklaration

Vererbung von Eigenschaften

Die css-Eigenschaften können auf untergeordnete hmtl-Elemente vererbt werden. Wenn man z.B. dem <body>-Tag eine Eigenschaft zuweist, so wird diese auch auf untergeordnete Elemente, z.B. einer Überschrift, zugewiesen.

css-lehrgang Vererbung

Das Ergebnis zeigt eine einheitliche Schrift für alle html-Elemente:

css-lehrgang Vererbung

Der Vorteil ist, dass wir nicht jedem html-Element eine Schrift zuweisen, sondern dies mit einem übergeordneten Element erledigen können.

Das zum ersten Teil des heutigen Tages. Weiter geht es hier mit css-Lehrgang erster Tag Teil 2



« zurück