CSS Grundlagen

Kursbeschreibung ​

Du hast bereits gelernt, wie man Webseiten mit HTML strukturiert, aber jetzt möchtest du ihnen Leben einhauchen und sie visuell ansprechend gestalten? Dann ist dieser Kurs dein nächster logischer Schritt! Cascading Style Sheets (CSS) ist die Sprache, die das Aussehen deiner Webseiten definiert – von Farben und Schriftarten bis hin zu Abständen und der Anordnung von Elementen.

In diesem praxisorientierten Kurs tauchst du in die Welt von CSS ein. Du lernst die grundlegende Syntax von CSS kennen und verstehst, wie du HTML-Elemente gezielt ansprichst, um ihnen einen individuellen Stil zu verleihen. Wir zeigen dir, wie das CSS Box-Modell funktioniert, das für jedes Element auf einer Webseite entscheidend ist, und wie du damit Abstände, Rahmen und Grössen präzise steuerst. Du wirst lernen, wie du Farben und Hintergründe einsetzt, Schriftarten definierst und deine Inhalte ansprechend formatierst.

Nach diesem Kurs bist du in der Lage, das Design deiner Webprojekte selbst in die Hand zu nehmen.

Zielgruppe ​

Dieser Kurs richtet sich an alle, die bereits über grundlegende HTML-Kenntnisse verfügen (idealerweise durch den Kurs "HTML 5 Grundlagen") und nun lernen möchten, wie sie Webseiten professionell gestalten und stylen können. Ideal für zukünftige Webdesigner, Frontend-Entwickler oder Content Manager, die das visuelle Erscheinungsbild von Webseiten beeinflussen wollen.

Lernziele ​

Nach diesem Kurs kannst du:

• Die grundlegende Syntax von CSS verstehen und anwenden.
• HTML-Elemente gezielt mit verschiedenen Selektoren ansprechen und stylen.
• Das CSS Box-Modell verstehen und für die Gestaltung von Abständen, Rahmen und Grössen nutzen.
• Farben, Schriftarten und Hintergründe mit CSS definieren und anwenden.
• Texte, Listen und Tabellen mit CSS formatieren.
• CSS in HTML-Dokumente einbinden und die Kaskade sowie Spezifität verstehen.
• Grundlegende Layout-Eigenschaften anwenden.
• Einfache CSS-Fehler erkennen und beheben.
• Eigene HTML-Seiten mit CSS visuell ansprechend gestalten.

Kursinhalte (Stichworte) ​

• Einführung in CSS:
  • Was ist CSS? Die Trennung von Inhalt (HTML) und Design (CSS).
  • Vorteile von CSS für Webdesign.
  • Grundlagen der CSS-Syntax: Regelsätze, Selektoren, Deklarationen, Eigenschaften, Werte.
• CSS in HTML einbinden:
  • Inline-Styles, interne Stylesheets.
  • Externe Stylesheets – Best Practice.
• Selektoren.
• Das CSS Box-Modell.
• Farben und Hintergründe:
  • Farbdefinitionen (Namen, Hex-Codes, RGB, RGBA).
  • Hintergrundfarben und Hintergrundbilder.
• Typografie und Textformatierung:
  • Schriftfamilie, Schriftgrösse.
  • Schriftfarbe, Textausrichtung.
  • Zeilenhöhe, Textdekoration.
• Listen und Tabellen stylen:
  • Listenpunkte anpassen.
  • Tabellenränder, -hintergründe und -zellen stylen.
• Grundlagen des Layouts:
  • display-Eigenschaft.
  • Einführung in position.
  • Einfache Layouts.
  • Grundlagen von Flexbox.
• Kaskade, Spezifität und Vererbung:
  • Wie CSS-Regeln angewendet werden.
  • Konfliktlösung bei widersprüchlichen Regeln.
• Debugging von CSS:
  • Nutzung der Browser-Entwicklertools zur Fehleranalyse.

Vorkenntnisse / Anforderungen ​

• Erfolgreicher Abschluss des Kurses "HTML 5 Grundlagen" oder vergleichbare solide Kenntnisse in HTML.
• Sicherer Umgang mit einem Code-Editor (z.B. Visual Studio Code).
• Ein eigener Laptop (Windows, macOS oder Linux) ist für die praktischen Übungen zwingend erforderlich.
• Technisches Interesse und die Bereitschaft, sich mit neuen Systemen auseinanderzusetzen.

Methodik ​

Unsere erfahrenen Dozenten, die ihr Wissen direkt aus der Praxis von Agenturen mitbringen, führen dich im persönlichen Präsenzunterricht in Grabs SG durch die Materie. Der Kurs ist stark interaktiv gestaltet, mit vielen praktischen "Hands-on"-Übungen, die dir helfen, das Gelernte sofort anzuwenden und zu festigen.

Besonderheiten ​

• Persönliche Betreuung: Direkter Kontakt zu unseren Dozenten und Tutoren vor Ort in Grabs SG für individuelle Fragen und Hilfestellung.
• Praxisnaher Einstieg: Fokus auf verständliche Erklärungen und reale Anwendungsbeispiele, die du sofort umsetzen kannst.
• Kleine Gruppen: Ermöglicht eine intensive Lernatmosphäre und massgeschneiderte Unterstützung.
• Expertise aus der Praxis: Profitiere vom Wissen unserer Dozenten, die selbst in Agenturen wie the-stack.dev tätig sind und dir aktuelle Einblicke und Best Practices vermitteln.
• Inklusive Kursmaterialien: Du erhältst umfassende Unterlagen und Code-Beispiele zum Nachschlagen.

Abschluss ​

Teilnahmebestätigung von Web Professionals