Vorlesung 1: Einführung in CSS

Willkommen zur ersten Vorlesung von „Basic to Brilliance“ – Ihre Reise zur Beherrschung von CSS beginnt hier!

Was ist CSS?

CSS oder Cascading Style Sheets ist die Sprache, die zur Beschreibung der Darstellung einer Webseite verwendet wird. Während HTML die Struktur und den Inhalt bereitstellt, sorgt CSS dafür, dass die Webseiten attraktiv und benutzerfreundlich aussehen. Es steuert das Layout, die Farben, Schriftarten, Abstände und vieles mehr.

Warum ist CSS wichtig?

• Trennung von Belangen: Mit CSS können Sie Inhalte (HTML) von der Präsentation (CSS) trennen, wodurch Ihr Code sauberer und einfacher zu warten ist.
• Konsistenz: Sie können ein einheitliches Design auf mehreren Webseiten anwenden, indem Sie eine einzige CSS-Datei verknüpfen.
• Responsive Design: CSS ist für die Erstellung von Websites unerlässlich, die auf allen Geräten, vom Desktop bis zum Smartphone, gut aussehen.

Grundlegende CSS-Syntax

CSS besteht aus Regeln, die auf HTML-Elemente abzielen. Jede Regel besteht aus einem Selektor und einem Deklarationsblock.

selector {
  property: value;
}

• Selektor: Zielt auf das HTML-Element ab, das Sie formatieren möchten.
• Eigenschaft: Der Aspekt des Elements, das Sie ändern möchten (z. B. Farbe, Schriftgröße).
• Wert: Der spezifische Wert, den Sie auf die Eigenschaft anwenden möchten.

Beispiel:

Angenommen, Sie möchten die Farbe aller

-Elemente in Blau ändern.

HTML:

Hello, World!

CSS:

h1 {
  color: blue;
}

Diese einfache Regel färbt den Text in allen

-Elementen blau.

CSS zu HTML hinzufügen

Es gibt drei Hauptmethoden, CSS zu Ihrem HTML-Dokument hinzuzufügen:

1. Inline-CSS: Direkt im HTML-Element.

   
Hello, World!

1. Internes CSS: Innerhalb eines

1. Externes CSS: Verlinkung zu einer externen CSS-Datei aus Ihrem HTML-Dokument.

styles.css:

   h1 {
     color: blue;
   }

Übungsübung

• Erstellen Sie eine HTML-Datei mit einigen verschiedenen Elementen wie

  ,

  und

  .
• Wenden Sie mit allen drei Methoden unterschiedliche Farben, Schriftgrößen und Hintergrundfarben auf diese Elemente an: Inline-, internes und externes CSS.
• Experimentieren Sie mit verschiedenen Eigenschaften, um zu sehen, wie sie sich auf das Erscheinungsbild Ihrer Elemente auswirken.

---

Nächstes Thema: In der nächsten Lektion befassen wir uns mit Selektoren und Eigenschaften und lernen, wie Sie verschiedene Elemente auf Ihrer Webseite gezielt ansprechen und gestalten. Bleiben Sie dran!

---

Diese erste Vorlesung führt in die Grundlagen von CSS ein und erklärt, was es ist, warum es wichtig ist und wie man einfache CSS-Regeln schreibt. Das bereitgestellte Beispiel ist leicht zu befolgen und die Übung regt die Schüler zum selbstständigen Üben und Erkunden an.

Folgen Sie mir auf LinkedIn

Ridoy Hasan