Webentwicklung Teil 2 – CSS – Styling für Websites

Medienwerkstatt - Projekt

CSS – Styling für Websites

Die Beiträge der Serie im Überblick:

Im letzten Beitrag der Webdevelopment-Serie haben wir uns HTML genauer angesehen. Dabei haben wir gelernt, dass HTML eine Art grundlegende Struktur für Dokumente ist und das nahezu alle Dokumente im Internet darauf aufbauen. Allerdings sehen Websites aus purem HTML nicht unbedingt besonders schön aus. Genau darum kümmern wir uns jetzt.

CSS steht für Cascading Style Sheets. Es dient dazu die eigentliche Gestaltung einer Website vom Inhalt zu trennen. Solche Techniken werden in der Softwareentwicklung gerne verwendet (Separation of Concerns). Dadurch kann z.B. das Layout eines Blogs unabhängig vom Inhalt geändert werden indem nur das CSS angepasst wird. Ein gutes Beispiel dafür ist csszengarden.com. Hier ist hinter eine Website immer wieder ein anderes CSS gelegt worden und sie sieht jedes Mal komplett anders aus.

In diesem Sinne wird das CSS auch vom HTML getrennt und in eine eigene Datei ausgelagert. Meistens heißt sie styles.css und wird im HTML im Header eingebunden. Es ist aber auch möglich CSS direkt in den Header zu schreiben oder sogar direkt an ein Element.

				
					<html>
    <head>
        <!--- Verlinken einer CSS Datei -->
        <link href="styles.css" rel="stylesheet">

        <!-- Styles direkt im Header definieren -->
        <style>
            // Hier kommen alle Styles hin
        </style>
    </head>
    <body>
        <!-- Styles direkt am ELement definieren -->
        <h1 style="color: red;">Hallo welt</h1>
    </body>
</html>

Was sind Styles

Styles sind die Anweisungen mit denen wir Elemente in ihrem Aussehen und ihrem Verhalten ändern können.

Wenn wir uns an HTML erinnern, war da die Rede von verschachtelten Elementen. Die Struktur mit der diese Elemente ineinander verschachtelt sind nennt man auch DOM. Für CSS spielt es eine wichtige Rolle, wo sich ein Element im DOM befindet.

Hier sollen die wichtigsten Selektoren vorgestellt werden. Das sind natürlich nicht alle und schon gar nicht alle Kombinationen.

Grundsätzlich bestehen Styles immer aus dem Name des Styles und einem Wert. Hier einige Styles als Beispiel.

				
					background: red;
color: black;
font-size: 40px;
width: 50%;
height: 250px;
border: solid 1px #333;

Der vordere Teil ist dabei immer der Name des Styles. Nach dem Doppelpunkt kommt der Wert. Am Ende steht immer ein Semikolon.

Besonders spannend sind die Einheiten der Werte. Farben können z.B. als Text (red, green, blue) oder in verschiedenen technischen Notationen (Hexadezimal, RGB) angegeben werde. Für Höhen, Breiten, Größen und ähnliche Werte gibt es eine Vielzahl an Möglichkeiten. Überwiegend werden Pixel, Prozent oder rem verwendet. Dabei kommt rem eine besondere Bedeutung zu, da es die Größe relativ zur verwendeten Schriftart angibt.

Um jetzt die richtigen Elemente zu beeinflussen und unsere Styles an das richtige Element zu bringen müssen wir dieses Element auswählen. Dazu dienen Selektoren.

Selektoren

Über so genannte Selektoren werden bestimmte HTML Elemente ausgewählt, für die bestimmte Styles gesetzt werden sollen. Eine Liste mit allen Selektoren findet ihr auch in der Self HTML. Diese Selektoren sind notwendig, wenn die Styles nicht direkt als Attribut an das Element geschrieben werden. Wir gehen hier davon aus, dass wir unser CSS in einer extra Datei ausgelagert haben.

Typenselektoren (element)

Ein Typselektor wählt ein Element anhand des HTML Tags. Im Beispiel wird über den Selektor das <parent> Element ausgewählt und das Attribut “background” auf “red” gesetzt.

HTML Code

				
					<parent> <-- Dieses Element
    <child>Hallo Welt</child>
</parent>

CSS Code

				
					parent {
    background: red;
}

child {
    font-weight: bold;
}

Ergebnis

Hallo Welt

Klassenselektoren ( . )

Ein Element im HTML kann mit dem class-Attribut ausgestattet werden. Über dieses Attribut können dann verschiedene Regeln aus dem CSS angewandt werden. Dabei gilt, dass beliebig viele Elemente die selbe Klasse haben können. Das unterscheidet die Klassen von IDs.

HTML Code

				
					<parent>
    <child class="meineKlasse">Hallo Welt</child>
</parent>

CSS Code

				
					meineKlasse {
    background: green;
}

Ergebnis

Hallo Welt

ID-Selektoren ( # )

Eine ID ist ein eindeutiger Wert der einem HTML Element zugewiesen werden kann. Wichtig ist dabei, dass eine ID nur ein einziges Mal vergeben werden darf. Ein Element kann im CSS mit dem Zeichen # selektiert werden.

HTML Code

				
					<parent>
    <child id="meinElement">Hallo Welt</child>
</parent>

CSS Code

				
					#meinElement {
    background: yellow;
}

Ergebnis

Hallo Welt

Attributselektoren ([attribut])

Alle Attribute an einem HTML Element können ebenfalls als Selektor verwendet werden. Um das zu demonstrieren, habe ich als Element ein Textfeld gewählt. Selektiert wird im Beispiel über den Typ des Inputs. Dabei selektiere ich nicht nur über das Attribut, sondern auch über dessen Wert.

HTML Code

				
					<parent>
    <input type="text" />
    <input type="email" />
</parent>

CSS Code

				
					[type="text"] {
   background: orange;
}

Ergebnis

Verschachtelte Selektoren

Bei einer Website sind die Elemente ineinander verschachtelt. Passend dazu kann ich auch Selektoren aneinander reihen um bestimmte Elemente zu selektieren.

Im Beispiel selektieren wir alle DIV-Elemente innerhalb eines DIV-Element mit der Klasse Parent.

HTML Code

				
					<div class="parent">
  <div>Child 1</div>
  <div>Child 2</div>
</div>

CSS Code

				
					.parent {
    background: yellow;
}

.parent div {
    margin: 10px;
    background: red;
}

Ergebnis

Child 1

Child 2

CSS ist allerdings ein sehr komplexes Thema mit unendlich vielen Facetten und Möglichkeiten. Wichtig ist, dass du jetzt weiter damit spielst und verschiende Dinge ausprobierst.

Auch dieser Artikel wird immer mal wieder erweitert und verbessert. Da

Hier noch ein interessantes Beispiel für die Möglichkeiten die CSS bietet. Dieses Spiel wurde (fast) nur mit CSS umgesetzt.

https://minocernota.com/articles/pure_css_game/

Von Joni , April 2020

Medienwerkstatt - Projekt

CSS – Styling für Websites

Was sind Styles

Selektoren

Typenselektoren (element)

HTML Code

CSS Code

Ergebnis

Klassenselektoren ( . )

HTML Code

CSS Code

Ergebnis

ID-Selektoren ( # )

HTML Code

CSS Code

Ergebnis

Attributselektoren ([attribut])

HTML Code

CSS Code

Ergebnis

Verschachtelte Selektoren

HTML Code

CSS Code

Ergebnis

Anerkannter außerschulischer Lernort