CSS für Einsteiger

CSS ist ein grundlegender Bestandteil des Webdesigns. Erfahren Sie alles, was Sie wissen müssen, um bestehende CSS zu optimieren und eigene CSS professionell zu schreiben.

CSS - Einführung

• HTML und CSS
• Dokumente konsistent gestalten
• Browser-Entwickler-Tools
• CSS referenzieren
• Optimieren von Bildern und Retina-Displays
• Relative Pfade
• Absolute Pfade
• Hinzufügen von Bildern und Symbolen
• CSS-Dateien referenzieren
• Erstellen einer CSS-Datei

CSS - Grundlegende Konzepte

• CSS-Spezifikationen und das W3C
• CSS-Syntax und -Terminologie
• CSS-Werte und -Einheiten
• Die Farb- und Eigenschaftswerte
• Typ- und Universalselektoren
• Klassen- und ID-Selektoren
• Klasse und ID
• Nachkommende Selektoren
• Gruppierungs-Selektoren
• Vererbung und Spezifität
• Die Kaskade und die Wichtigkeit
• Hinzufügen von Farben
• Pseudoklassen-Selektoren und Links
• Gestaltung von Links

Das CSS-Box-Modell

• Einführung in das CSS-Box-Modell
• Inline, Block und Anzeige
• Die Eigenschaften des Box-Modells
• Die Syntax und Verwendung der Box-Eigenschaften
• Fehlersuche im Box-Modell
• Padding, Margin und Border
• Ränder und Layouts
• Hinzufügen von Inhaltsumhüllungen
• Rand und Padding
• Aktualisierung von Hintergrundbildern
• Negative Randwerte verwenden
• Mittig ausrichten mit Rand
• Hinzufügen von Inhaltsumhüllungen
• Hinzufügen eines Kopfzeilenbildes

CSS-Typografie

• Typografie für das Web
• Ändern der Font-Familie
• Schriftgewicht und Schriftstil
• Web-Schriften mit @font-face
• Web-Schriften mit Google Fonts
• Google-Schriftarten
• Die Eigenschaft font-size
• Schrift-Kurzschrift
• Textdekoration, Textausrichtung und Zeilenhöhe
• Typografie-Stile

CSS-Layouts mit Float und Position

• Einführung in float
• Die Eigenschaften float und clear
• Float und zusammengeklappter Container
• Layouts und das Box-Modell
• Float und Boxmodell fix
• Position
• Position und z-Index

CSS-Layouts mit Flexbox und Grid

• Einführung in Grid und Flexbox
• Einführung in Flexbox
• Flexbox: Ausrichtung und Anordnung
• Flexible Größenanpassung
• Flexbox-Ausrichtung
• Einführung in das CSS-Grid
• Das explizite Raster
• Das implizite Raster
• Eigenschaften der Grid-Platzierung
• Grid-Spalten und Firefox Grid Inspector

Erweiterte CSS-Selektoren

• Einführung in erweiterte Selektoren
• Relationale Selektoren: Kombinatoren
• Aktualisierungen mit Kombinatoren
• Pseudo-Klassen-Selektoren: Erster und letzter
• Erweiterte Selektoren

Fluid und Responsive CSS-Layouts

• Einführung in das Responsive Design
• Erstellen von flüssigen Layouts
• Flexible Hintergrundbilder
• Flexibles Hintergrundbild
• Einführung in Media-Queries
• Media Queries, Breiten und Haltepunkte
• Testen von responsiven Layouts
• Media Queries und responsives Layout

Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache, mit der Sie das Aussehen Ihrer Webseiten steuern können. Entdecken Sie die Konzepte, die die Grundlage von CSS bilden, und erfahren, was Sie wissen müssen, um bestehende CSS zu optimieren und eigene CSS zu schreiben. Lernen Sie, wie Sie Farben und andere Designelemente hinzufügen können, um Ihre Webseiten nicht nur mit schwarzem Text auf weißem Hintergrund zu gestalten. Verstehen Sie, wie man Selektoren verwendet und wie das Box-Modell den Abstand sowie die Größe von Seitenelementen definiert, und wie man Texte stylt und grundlegende Layouts mit Flexbox und Grid erstellt und organisiert. Sie werden natürlich auch mit erweiterten Selektoren arbeiten sowie fließende Layouts erstellen und Verstehen, wann die Eigenschaften float und position verwendet werden sollten und vieles mehr! CSS ist ein grundlegender Bestandteil des Webdesigns, da es steuert, wie Ihre Webseiten aussehen. Ohne CSS könnten Webseiten nur Text auf weißem Hintergrund anzeigen. Verwenden Sie CSS, um Ihre einfachen HTML-Webseiten auf das nächste Level zu bringen. Das Erlernen der Grundlagen von CSS von Grund auf gibt Ihnen die Möglichkeit, alles zu tun, von der Anpassung bestehender CSS bis zum Schreiben Ihrer eigenen. Sie lernen die Grundlagen von CSS, angefangen von der Struktur von CSS über häufig verwendete CSS-Stile bis hin zu den verschiedenen Möglichkeiten, wie Sie mit CSS eine Seite gestalten können.