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 heist 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>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 angiebt.
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.
Ü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.
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.
<parent> <-- Dieses Element
<child>Hallo welt</child>
</parent>parent {
background: red;
}
child {
font-weight: bold;
}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.
<parent>
<child class="meineKlasse">Hallo welt</child>
</parent>meineKlasse {
background: green;
}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.
<parent>
<child id="meinElement">Hallo welt</child>
</parent>#meinElement {
background: yellow;
}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.
<parent>
<input type="text" />
<input type="email" />
</parent>[type="text"] {
background: orange;
}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.
<div class="parent">
<div>Child 1</div>
<div>Child 2</div>
</div>.parent {
background: yellow;
}
.parent div {
margin: 10px;
background: red;
}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.
Ich bin joni - Festangestellt im Maker Space - kümmere mich um alle Fragen, vor allem aber Programmierung, Technik, 3D Druck, Rapid Prototyping - außerdem noch gerne in der Holzwerkstatt unterwegs. Im Maker Space findest du mich überall und nirgends. Wenn ich privat da bin sitze ich meistens an einem der Projekttische am Laptop.
© experimenta gGmbH – Das Science Center. Alle Rechte vorbehalten.
Experimenta-Platz, 74072 Heilbronn, Tel.: +49 (0) 7131 88795 - 0,
info@experimenta.science