Grundlagen Info über CSS

In diesem Kapitel finden Sie allgemeine Grundlagen, die Sie bei Ihrer Arbeit mit CSS immer wieder gebrauchen können. Anstatt im Verlauf fünfmal zu erklären, wie Sie beispielsweise ein Element mit einem Rahmen versehen können (Tipp: mit der Eigenschaft border), zeigen wir Ihnen die wichtigsten Grundlagen in diesem Kapitel. Es geht um die Definition von Abständen...

Längeneinheiten verstehen in CSS

Sie wollen wissen, welche Längeneinheiten Sie in CSS verwenden können. Die CSS-Spezifikationen beschreiben eine Vielzahl von Möglichkeiten, Breiten, Höhen und Abstände zu definieren. Prinzipiell unterscheidet man zwischen absoluten und relativen Längeneinheiten. Relative Längeneinheiten bestimmen die Länge einer Eigenschaft basierend auf dem Wert einer anderen...

Höhen und Breiten mit CSS definieren

Sie wollen für bestimmte Elemente (siehe Diskussion) eine Höhe und eine Breite festlegen. Verwenden Sie die Eigenschaften height und width, um dem Element eine ausdrückliche Breite und/oder Höhe zuzuweisen. Der folgende Code sorgt dafür, dass das Element mit der ID #seitenleiste die gesamte Höhe und 20% der Breite des umgebenden Elements einnimmt...

Farben definieren mit color und background-color

Sie wollen wissen, auf welche Weise Sie Farbwerte (für Eigenschaften wie color und background-color) angeben können. CSS kennt eine Vielzahl von Möglichkeiten, Farbwerte zu definieren. Hierbei ist die Eigenschaft color hauptsächlich für die Textfarbe zuständig, während background-color die Hintergrundfarbe verschiedener Elemente definiert. Hier einige der gängigsten...

Externe Ressourcen in CSS einbinden

Sie möchten externe Ressourcen wie zusätzliche Stylesheets, Webfonts oder Bilder einbinden. Geben Sie den Pfad zur externen Datei mithilfe der url()-Schreibweise an. Um externe Ressourcen (z.B. per background-image, @import, @font-face oder auch content) in Ihr Stylesheet einzubinden, müssen Sie dem Browser mitteilen, wo die Datei zu finden ist. Das geschieht in CSS...

Außenabstände definieren mit margin

Sie wollen den Abstand eines Elements von den Rändern des Darstellungsbereichs (oder des umgebenden Elements) selbst festlegen. Verwenden Sie die Kurzschrifteigenschaft margin. Hierdurch erhält der Absatz rundherum einen Außenabstand von 1em. Dieser Wert wird für die linke Seite übeschrieben. Die Außenabstände (margin) legen fest, wie groß der Leerraum zwischen dem...

Innenabstände definieren mit padding

Sie wollen festlegen, wie groß der Leerraum zwischen dem Inhalt eines Elements und dessen Rahmen sein soll. Verwenden Sie die Kurzschrifteigenschaft padding. Um den Abstand nur für bestimmte Seiten einzustellen, gibt es die Einzeleigenschaften padding-top, padding-right, padding-bottom und padding-left. Es können alle in CSS gültigen Längeneinheiten sowie...

Elemente mit einem Rahmen versehen mit border

Sie wollen einem Element einen Rahmen geben. Verwenden Sie die Eigenschaft border bzw. die verschiedenen border-Einzeleigenschaften, um Dicke, Gestaltung und Farbe des Rahmens zu steuern, wie hier gezeigt: Diese Regel umgibt ungeordnete Listen mit durchgehenden schwarzen Rahmen (siehe Abbildung) von 1 Pixel Breite. Wir verwenden hier die Kurzschrifteigenschaft...

Hintergrundbilder verwenden mit CSS

Sie möchten Elemente mit Hintergrundbildern versehen. Verwenden Sie die CSS-Eigenschaft background-image. Für den Fall, dass das Hintergrundbild unter dem angegebenen Dateipfad nicht gefunden werden kann, geben wir in der zweiten Deklaration eine Hintergrundfarbe an...

Die Wiederholung von Hintergrundbildern steuern

Sie wollen selbst steuern, auf welche Weise die von Ihnen definierten Hintergrundbilder wiederholt werden. Um ein Hintergrundbild horizontal, also entlang der x-Achse, zu wiederholen, können Sie die folgende CSS-Regel verwenden. Mit der Eigenschaft background-repeat können Sie steuern, ob und wie das Bild wiederholt wird. Mögliche Werte sind:..