HTML und CSS

💡

Dauer: 30 Minuten

Themen:

HTML-Elemente und inline-Styles (quick and dirty)
Stylesheets in HTML-Dokumente einbinden

Ziele: HTML-Dokumente mit einfachem CSS gestalten

Live Coding: Wetter-App

Nun können wir unsere Wetter-App schrittweise mit CSS stylen. Dadurch vertiefen wir HTML-Elemente und lernen CSS durch das Zusammenspiel mit HTML kennen.

Am Whiteboard oder online mit Excalidraw die Darstellung eines Ortes mit seinen Wetterdaten als eine Box mit runden Ecken und unterschiedlichen Schriften skizzieren.

Abstände und Layout lernen wir erst in CSS Teil 2 kennen.

Ausgangscode vom letzten Mal vorgeben oder zur Übung neues 
Projekt in VS Code mit HTML anfangen?

Tipps für neues Projekt und VS Code mit Live Server:

Rechtsklick auf HTML-Datei falls “Go Live” nicht erscheint
html/head/body werden für live reload benötigt

Inline-Styles

👨🏻‍💻

Live Coding
Erster Schritt: Überführung der Elemente in div-Elemente mit inline-Styles.

Jedes HTML-Element kann mit dem style-Attribut eigene CSS-Regeln erhalten:

<div style="border-width: 2px; border-style: solid; border-color: silver;border-radius: 4px;">
  Berlin 19 sonnig
</div>

Dadurch erhält das Element einen silbernen Rahmen mit runden Ecken.

⚠️

Inline-Styles mit style="..." direkt im HTML-Element sind nur für schnelles Ausprobieren gedacht. Empfohlen wird das Einbinden von separaten Stylesheet-Dateien in HTML-Dokumente (siehe unten im folgenden Abschnitt).

Stylesheets einbinden

Stylesheet-Dateien werden mit der Endung .css gespeichert und können durch link-Elemente mit Attributen rel="stylesheet" und href="DATEIPFAD" im head des HTML-Dokuments eingebunden werden:

<!DOCTYPE html>
<html lang="de">
  <head>
    <!-- hier stehen mehr Elemente im head wie meta, title, usw.  -->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <!-- hier folgt der body -->
</html>

👨🏻‍💻

Live Coding später
Wir überführen in unserem Projekt die inline-Styles in eine neue Stylesheet-Datei styles.css, nachdem wir in der folgenden Lektion ein paar Selektoren kennengelernt haben.

Für unser kleines Projekt genügt wahrscheinlich ein Stylesheet. Komplexere Webanwendungen setzen häufig mehrere Stylesheets ein.

Mehr dazu bei Prog Content

CSS-Regeln Selektoren