6.3. CSS: Cascading Style Sheets#
Fig. 6.5 Überblick: HTML, CSS und JS. Quelle: Frank Dopatka (2021)#
6.3.1. CSS#
“Cascading Style Sheets (CSS) ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML eine der Kernsprachen des World Wide Webs. Mit CSS werden Gestaltungsanweisungen erstellt, die zusammen mit HTML […] eingesetzt werden. CSS wurde entworfen, um Darstellungsvorgaben von den Inhalten zu trennen. Wenn diese Trennung konsequent vollzogen wird, werden nur noch die inhaltliche Gliederung eines Dokumentes und die Bedeutung seiner Teile in HTML […] beschrieben. Mit CSS werden dann die Definitionen zur Darstellung der Inhalte gesondert festgelegt, insbesondere Layout, Farben und Typografie.”
Quelle: Frank Dopatka (2021)
Die Funktion von CSS könnt ihr selbst nachvollziehen, indem ihr die Entwickler Tools zu der Webseite https://quotes.toscrape.com im Chrome-Browser öffnet. Wenn ihr das Fenster etwas vergrößert, seht ihr unter dem Tab “Style” einige CSS-Formatierungen mit einem Häkchen daneben. Wenn ihr das Häkchen entfernt, könnt ihr beobachten, wie sich das Aussehen der Webseite verändert. Wenn ihr die Seite neu ladet, wird das ursprüngliche Aussehen wieder hergestellt.
Ein Cascading Style Sheet wird in Webseiten auf drei verschiedene Arten eingebunden:
…intern für ein einziges HTML-Element mithilfe des HTML-Attributs style im body:
Fig. 6.6 Beispiel: Interne Einbindung von CSS mithilfe des HTML-Attributs style im body:#
…intern für eine Webseite und alle HTML-Elemente eines bestimmten Typs mithilfe des HTML style-Elements im head:
Fig. 6.7 Beispiel: Interne Einbindung von CSS mithilfe des style-Elements im head.#
…extern für alle Webseiten einer Website, in die die CSS-Datei eingebunden wird:
Fig. 6.8 Beispiel: Externe Einbindung von CSS.#
Wie wird CSS auf der Webseite https://quotes.toscrape.com eingebunden?
HTML-Elemente werden also mithilfe von CSS irgendwie formatiert und positioniert. Für uns ist im Grunde nicht so wichtig, welche Gestaltungsmöglichkeiten CSS bereitstellt. Was für uns interessant ist, sind eigentlich die beiden HTML-Attribute class und id, die dazu verwendet werden, um im CSS-Stylesheet verschiedene HTML-Elemente separat zu addressieren. Dadurch können verschiedene Elemente der Webseite mithilfe von CSS unterschiedlich formatiert werden. Beim WebScraping machen wir uns diesen Umstand zu Nutze und verwenden die beiden Attribute id und class, um speziell nach HTML-Elementen zu suchen, die ein Attribut id oder class mit einem bestimmten Wert haben. Da auf Webseiten Elemente, die einen ähnlichen Inhalt haben, oft gleich formatiert sind, sind HTML-Elemente, deren Attribut class denselben Wert hat, oft nicht nur gleich formatiert, sie enthalten auch diselbe Art von Inhalt. Das klingt noch etwas abstrakt, aber wird an einem Beispiel direkt deutlicher.
id: Mit dem HTML-Attribut id kann einem einzelnen Elemente eine einzigartige Zeichenkette zugeteilt werden, über die das Element später addressiert werden kann.
Fig. 6.9 Addressierung eines HTML-Elements über das Attribut id.#
class: Mit einem class-Attribut kann dagegen mehreren gleichartigen Elemente eine Zeichenkette zugeteilt werden, über diese Elemente später addressiert werden können.
Fig. 6.10 Addressierung mehrere HTML-Elemente über das Attribut class.#
Untersucht den HTML-body der Webseite https://quotes.toscrape.com. Welche Klassen gibt es?
6.3.1.1. Quellen#
Frank Dopatka. Vorlesung "Webbasierte Systeme". CSS: Grundlagen, ID vs. Class. 2021. URL: https://www.youtube.com/watch?v=6cqQUofSp-8.
Frank Dopatka. Vorlesung "Webbasierte Systeme". CSS. 2021. URL: https://www.youtube.com/watch?v=AVQRppa4434.
MDN Contributors. CSS: Cascading Style Sheets. 2023. URL: https://developer.mozilla.org/en-US/docs/Web/CSS.