HackerSchool

Bisher ist bei der Seite kaum eine Struktur zu erkennen, wir nähern uns den Grundlagen der Gestaltung in dem wir für ein paar Farbtupfer sorgen.

Die erste eigene CSS Datei

CSS Dateien folgen einer immer gleichen Struktur, die auf den ersten Blick sehr viel einfacher ist als die von HTML oder YAML.

body {
   background-color: lightgray;
}

div.post {
    margin: 30px;
    padding: 30px;
    box-shadow: 0 0 30px 10px #000000;
}

Den Bereich vor den geschweiften Klammern nennt man “Selektor”, hier werden eine oder mehrere Regeln definiert. In den geschweiften Klammern definieren wir dann Schlüssel-Wert Paare (wie bei YAML) um bestimmte CSS Eigenschaften zu verändern. In diesem Fall verändern wir die folgenden Aspekte:

Zunächst einmal die Hintergrundfarbe für die gesamte Seite. Der Selektor body ist das erste sichtbare HTML Element.
Für den Bereich eines einzelnen Beitrages spielen wir zunächst ein bisschen an den Innen- und Außenabständen (engl. padding und margin) und setzen danach einen Schatteneffekt.

CSS Regeln werden normalerweise in spezielle Dateien geschrieben, die dann vom HTML Code aus geladen werden müssen. Zum Glück nutzen wir Jekyll und können auf das Templating-System zurückgreifen, so müssen wir den Ausschnitt von Zeile Nummer 6 nur einmal angeben.

 1 <!DOCTYPE html>
 2 <html>
 3   <head>
 4     <title>Test</title>
 5     <meta charset="utf-8"/>
 6     <link href="https://hackerschool.marcusriemer.de/css/style.css" type="text/css" rel="stylesheet" />
 7   </head>
 8   <body>
 9     <h1>HackerSchool</h1>
10     {{ content }}
11   </body>
12 </html>

Erzeugt einen Ordner css im obersten Ordner eurer Webseite. Legt in diesem Ordner eine Datei namens style.css an und kopiert die CSS Regeln von oben.
Fügt die Referenz auf die neue CSS Datei in euer Standardlayout ein.

CSS Selektoren

CSS Selektoren wandern den Baum eures HTML Dokumentes ab um herauszufinden welche Regeln für welche Teile des Dokumentes berücksichtigt werden sollen. Die technischen Regeln dafür sind relativ simpel, sofern man sich die Baumstruktur eines HTML Dokumentes vor Augen führt. Wir werfen dazu mal einen genaueren Blick auf die Layout Datei, welche die einzelnen Beiträge anzeigt:

    
<div class="post">
  <header class="post-header">
    <h2 class="post-title">{{ page.title }}</h2>
    <p class="post-meta">
      {{ page.date | date: "%b %-d, %Y" }} •
      {{ page.author }}
    </p>
  </header>
  <article class="post-content">
    {{ content }}
  </article>
</div>

body
├── ...
└── div.post
    ├── header.post-header
    │   ├── h2.post-title
    │   └── p.post-meta
    └── article.post-content

Selektor	Beispiel	Wirkung
E	`body`	Alle Elemente vom Typ E
E F	`div h2`	Alle Elemente vom Typ F unterhalb des Typs E
E > F	`div > h2`	Alle Elemente vom Typ F unmittelbar unterhalb des Typs E (im Beispiel leer!)
E:first-child	`p:first-child`	Das Erste Element unterhalb des Typs E
E:hover	`div:hover`	Alle Elemente vom Typ E die unterhalb des Mauszeigers sind
E.class	`div.post`	Alle Elemente vom Typ E mit Klasse class

Einige wichtige CSS Eigenschaften

color: Farbe des Vordergrundes, typischerweise Schriftfarbe (HTML Farbcode)
background-color: Farbe des Hintergrundes (HTML Farbcode)
text-align: Ausrichtung des Textes (left, right, center)
text-decoration: Striche unter, über oder durch den Text (underline, overline, line-through, underline overline)
font-weight: Dicke des Texts (normal, bold, lighter, bolder)
border: Breite, Struktur und Farbe der Umrandung (1px solid red)
box-shadow: Schatten sind ein schon relativ kompliziertes Konstrukt. Wir definieren zunächst Horizontale und Vertikale Verschiebung um die “Richtung” des Schattens zu bestimmen. Dann folgen zwei Werte für Unschärfe und Breite des Schattens, zuletzt wird die Farbe definiert (10px 10px 15px 15px red).
margin und padding: Innerer bzw. äußerer Abstand vom Rand, weiteres dazu im nächsten Kapitel

Färbt den Hintergrund eurer gesamten Seite schwarz, die Schrift hingegen schwarz.
Umrandet den gesamten Header eines Beitrages in einer beliebigen Farbe oder mit einem beliebigen Schatten. Wenn Ihr einen Schatten verwendet müsst Ihr ggfs. auch den äußeren Abstand (`margin-bottom`) anpassen.
Hebt den Absatz, über dem sich der Zeiger des Besuchers befindet, irgendwie hervor.
Hebt den ersten Absatz eines Beitrages hervor.
Erzeug einen Selektor der alle Bilder mit der Klasse `preview` auf eine Größe von 64px * 64px festlegt. Verwendet statt der Eigenschaften `width` und `height` die Eigenschaften `max-width` und `max-height` und schaut was sich dadurch verändert.