CSS (Cascading Style Sheets) ist eine Sprache, die verwendet wird, um HTML-Elementen auf einer Webseite Stil hinzuzufügen und deren visuelle Attraktivität zu verbessern. Es spielt eine entscheidende Rolle bei der Verbesserung der Ästhetik einer Website, genau wie Dekor, Wandfarbe, Möbel, Material des Sofas und die Form von Fenstern und Türen zum Gesamteindruck eines Hauses beitragen.

# Hinzufügen von CSS zum Stylen von HTML

CSS ermöglicht es uns, die Präsentation und das Layout der HTML-Elemente zu steuern, einschließlich Farben, Schriftarten, Abstände und mehr. So können wir CSS-Stile auf unsere HTML-Elemente anwenden:

## Inline-Stile
Mit dem `style`-Attribut können wir CSS-Stile direkt auf einzelne HTML-Elemente anwenden. Diese Methode ist nützlich, um schnell einmalige Stile hinzuzufügen.

PHAgc3R5bGU9ImNvbG9yOiBibHVlOyBmb250LXNpemU6IDE2cHg7Ij5UaGlzIGlzIGEgcGFyYWdyYXBoIG9mIHRleHQgd2l0aCBpbmxpbmUgc3R5bGVzLjwvcD4=

## Interne Styles
Wir können auch CSS-Stile innerhalb der `<style>`-Tags im `<head>`-Bereich des HTML-Dokuments einfügen. Diese Methode ist nützlich, um Stile auf mehrere Elemente innerhalb desselben Dokuments anzuwenden.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHN0eWxlPgogICAgICBwIHsKICAgICAgICBjb2xvcjogYmx1ZTsKICAgICAgICBmb250LXNpemU6IDE2cHg7CiAgICAgIH0KICAgIDwvc3R5bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHA+VGhpcyBpcyBhIHBhcmFncmFwaCBvZiB0ZXh0IHdpdGggaW50ZXJuYWwgc3R5bGVzLjwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

## Externe Stylesheets
Für größere Projekte oder wenn wir Stile über mehrere Seiten hinweg wiederverwenden möchten, ist es üblich, externe Stylesheets zu verwenden. Erstellen Sie eine separate CSS-Datei (z.B. `index.css`) und verlinken Sie sie mit dem HTML-Dokument über das `<link>`-Tag.

Bitte überprüfen Sie die `index.html` und `index.css` Dateien im Beispiel.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPHA+VGhpcyBpcyBhIHBhcmFncmFwaCBvZiB0ZXh0IHdpdGggZXh0ZXJuYWwgc3R5bGVzLjwvcD4KICA8L2JvZHk+CjwvaHRtbD4=

cCB7CiAgY29sb3I6IGJsdWU7CiAgZm9udC1zaXplOiAxNnB4Owp9

# CSS-Selektoren
CSS-Selektoren zielen auf HTML-Elemente basierend auf Kriterien wie Elementtyp, Klasse oder ID ab. Ein Selektor gibt das genaue Element an, auf das bestimmte Stile angewendet werden sollen.

## Elementselektor
Zielt auf alle Elemente eines bestimmten Typs ab.
```css
p {
  /* styles */
}
```

## Klassenselektor
Zielt auf Elemente mit einem bestimmten Klassenattribut ab.
```css
.highlight {
  /* styles */
}
```

## ID-Selektor
Zielt auf ein bestimmtes Element mit einem eindeutigen ID-Attribut ab.
```css
#header {
  /* styles */
}
```

# CSS-Eigenschaften
CSS-Eigenschaften definieren, wie die ausgewählten Elemente gestylt werden sollen. Hier sind einige gängige CSS-Eigenschaften:
- `color` setzt die Textfarbe;
- `background-color` setzt die Hintergrundfarbe eines Elements;
- `font-size` setzt die Textgröße;
- `margin` fügt den Abstand um ein Element hinzu.

Wir können das Erscheinungsbild der Webseite anpassen, indem wir CSS-Stile auf die HTML-Elemente anwenden, um visuell ansprechende und benutzerfreundliche Erlebnisse zu schaffen.
#### Beispiel:

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPHRpdGxlPkhlbGxvLCBXb3JsZCE8L3RpdGxlPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGgxPldlbGNvbWUgdG8gTXkgV2Vic2l0ZTwvaDE+CiAgICA8YSBocmVmPSJodHRwczovL3d3dy5nb29nbGUuY29tLyIgdGFyZ2V0PSJfYmxhbmsiPlZpc2l0IEdvb2dsZSBob21lIHBhZ2U8L2E+PGJyIC8+CiAgICA8aW1nCiAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy8yZDIxOGMxNS0wMjY0LTRiN2QtYWZiNi1lOTFhZDRhNDJkYWEvc2VjdGlvbi0yL2ltYWdlLWV4YW1wbGUtZG9nLmpwZyIKICAgICAgYWx0PSJQdXBweSBpbiBhIHN1aXQiCiAgICAgIHdpZHRoPSIyNDAiCiAgICAvPgogIDwvYm9keT4KPC9odG1sPg==

aDEgewogIGNvbG9yOiBicm93bjsKICBmb250LXNpemU6IDI0cHg7Cn0KCmEgewogIGJhY2tncm91bmQtY29sb3I6IHJlZDsKICBjb2xvcjogd2hpdGU7CiAgZm9udC1zaXplOiAxOHB4OwogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKICBwYWRkaW5nOiAxMHB4Owp9CgppbWcgewogIGJvcmRlci1yYWRpdXM6IDEycHg7CiAgbWFyZ2luLXRvcDogMjBweDsKfQ==

Beginnen Sie eine spannende Reise durch die Grundlagen der Webtheorie und -technologien. Vertiefen Sie Ihr Verständnis mit den Einblicken von ChatGPT und schließen Sie Ihr Lernen ab, indem Sie Ihre voll funktionsfähige Website mit KI erstellen. Dieser Kurs ist Ihr Tor zur Beherrschung der HTML-, CSS- und JavaScript-Grundlagen, während Sie die Leistungsfähigkeit von ChatGPT nutzen, um Interaktivität und Intelligenz in Ihren Webprojekten zu verbessern.

Lernen Sie die wichtigsten Konzepte und Technologien der Webentwicklung kennen, einschließlich der Rolle der KI im modernen Programmieren. Dieser Abschnitt legt das Fundament für Ihre Lernreise, indem er die Grundlagen der Webentwicklung behandelt und zeigt, wie KI die Produktivität, Kreativität und Effizienz im Programmieren steigert.

Lernen Sie die wesentlichen Webentwicklungstechnologien. Tauchen Sie ein in die Grundlagen von HTML, CSS und JavaScript und enthüllen Sie deren individuelle Funktionen und kollektive Rolle bei der Gestaltung der digitalen Landschaft.

Entdecken Sie die Leistungsfähigkeit von ChatGPT, während Sie seine Fähigkeiten erkunden und lernen, wie Sie es effektiv nutzen können. Erhalten Sie Einblicke in die Erstellung von Eingabeaufforderungen und die Arbeit mit Code durch ChatGPT. Schließen Sie mit praktischen Tipps zur Nutzung von ChatGPT in verschiedenen Anwendungen ab.

Erstellen Sie die Blog-Website! Erstellen Sie eine vollständige und funktionale Blog-Website von Grund auf, indem Sie verschiedene Webentwicklungstechniken mit ChatGPT integrieren.

Webentwicklung Grundlagen mit KI

Einführung in CSS zur Gestaltung von Webseiten

Hinzufügen von CSS zum Stylen von HTML

Inline-Stile

Interne Styles

Externe Stylesheets

CSS-Selektoren

Elementselektor

Klassenselektor

ID-Selektor

CSS-Eigenschaften

Beispiel:

Video Tutorial