Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Einführung in CSS zur Gestaltung von Webseiten | Website-Anatomie
Webentwicklung mit ChatGPT

bookEinführung in CSS zur Gestaltung von Webseiten

CSS (Cascading Style Sheets) verleiht Ihren Webseiten das visuelle Erscheinungsbild. Während HTML die Struktur bereitstellt, steuert CSS Farben, Schriftarten, Abstände und Layout – ähnlich wie Dekoration und Inneneinrichtung das Aussehen eines Hauses bestimmen.

Hinzufügen von CSS zur Gestaltung von HTML

CSS kann auf drei Hauptarten angewendet werden.

Inline-Stile

Verwendung des style-Attributs zur schnellen Gestaltung eines einzelnen Elements.

index.html

index.html

copy

Interne Stile

Einfügen eines <style>-Blocks im <head>, um Elemente auf derselben Seite zu gestalten.

index.html

index.html

copy

Externe Stylesheets

Für größere Projekte sollte das CSS in einer separaten Datei gespeichert und mit dem HTML verknüpft werden.

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

index.html

index.html

index.css

index.css

copy

CSS-Selektoren

Selektoren legen fest, welche Elemente bestimmte Stile erhalten.

Elementselektor

Wendet Stile auf alle Elemente eines bestimmten Typs an.

p {
  /* styles */
}

Klassenselektor

Wendet Stile auf Elemente mit einem bestimmten Klassenattribut an.

.highlight {
  /* styles */
}

ID-Selektor

Zielt auf ein bestimmtes Element mit einem eindeutigen ID-Attribut ab.

#header {
  /* styles */
}

CSS-Eigenschaften

CSS-Eigenschaften definieren, wie die ausgewählten Elemente gestaltet werden sollen. Hier sind einige gängige CSS-Eigenschaften:

  • color legt die Textfarbe fest;
  • background-color legt die Hintergrundfarbe eines Elements fest;
  • font-size legt die Textgröße fest;
  • margin fügt den Abstand um ein Element hinzu.

Das Erscheinungsbild der Webseite kann durch das Anwenden von CSS-Stilen auf die HTML-Elemente angepasst werden, um ansprechende und benutzerfreundliche Erlebnisse zu schaffen.

Beispiel:

index.html

index.html

index.css

index.css

copy

Videoanleitung

question mark

Welche der folgenden Möglichkeiten sind gültige Methoden, um CSS-Stile auf eine HTML-Seite anzuwenden?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 3

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

bookEinführung in CSS zur Gestaltung von Webseiten

Swipe um das Menü anzuzeigen

CSS (Cascading Style Sheets) verleiht Ihren Webseiten das visuelle Erscheinungsbild. Während HTML die Struktur bereitstellt, steuert CSS Farben, Schriftarten, Abstände und Layout – ähnlich wie Dekoration und Inneneinrichtung das Aussehen eines Hauses bestimmen.

Hinzufügen von CSS zur Gestaltung von HTML

CSS kann auf drei Hauptarten angewendet werden.

Inline-Stile

Verwendung des style-Attributs zur schnellen Gestaltung eines einzelnen Elements.

index.html

index.html

copy

Interne Stile

Einfügen eines <style>-Blocks im <head>, um Elemente auf derselben Seite zu gestalten.

index.html

index.html

copy

Externe Stylesheets

Für größere Projekte sollte das CSS in einer separaten Datei gespeichert und mit dem HTML verknüpft werden.

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

index.html

index.html

index.css

index.css

copy

CSS-Selektoren

Selektoren legen fest, welche Elemente bestimmte Stile erhalten.

Elementselektor

Wendet Stile auf alle Elemente eines bestimmten Typs an.

p {
  /* styles */
}

Klassenselektor

Wendet Stile auf Elemente mit einem bestimmten Klassenattribut an.

.highlight {
  /* styles */
}

ID-Selektor

Zielt auf ein bestimmtes Element mit einem eindeutigen ID-Attribut ab.

#header {
  /* styles */
}

CSS-Eigenschaften

CSS-Eigenschaften definieren, wie die ausgewählten Elemente gestaltet werden sollen. Hier sind einige gängige CSS-Eigenschaften:

  • color legt die Textfarbe fest;
  • background-color legt die Hintergrundfarbe eines Elements fest;
  • font-size legt die Textgröße fest;
  • margin fügt den Abstand um ein Element hinzu.

Das Erscheinungsbild der Webseite kann durch das Anwenden von CSS-Stilen auf die HTML-Elemente angepasst werden, um ansprechende und benutzerfreundliche Erlebnisse zu schaffen.

Beispiel:

index.html

index.html

index.css

index.css

copy

Videoanleitung

question mark

Welche der folgenden Möglichkeiten sind gültige Methoden, um CSS-Stile auf eine HTML-Seite anzuwenden?

Select the correct answer

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 2. Kapitel 3
some-alt