CSS - Cascading Style Sheets, Responsive Design

Lernziele
Ich kann bestimmen welches Schrift-Layout die Seiten haben.
Ich kenne externe CSS-Verlinkung und kann mehrere Seiten mit dem selben Layout ansprechen.
Ich kann einfache CSS-Definitionen über Selektoren sowohl einzelnen, wie auch mehreren HTML-Elementen zuweisen.
Ich kann CSS-Klassen und Pseudoklassen anwenden.

Repetition

Fragen zu Tag 4 - Bilder im Internet

CSS - Cascading Style Sheets

Style-Sheets sind eine unmittelbare Ergänzung zu HTML. Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner HTML-Befehle.

CSS-Theorie

Trennung von Inhalt und Layout durch CSS - Cascading Style Sheets.
Begriffe und Schreibweise CSS - Schreibweise (Syntax)
Kaskade
Vererbung
CSS - inline Stile, interne Stile, extrene Stile.

Anleitung: der im Kurs verwendeten CSS Eigenschaften.

TYPO-Theorie

Welche Schriften, Schriftfamilien und Schriftgrössen können für Websites angewendet werden.
CSS Web Safe Font Kombinationen
Mit CSS Schriften formatieren
Mit Google Webfonts formatieren

Externe CSS Datei

Praktische Kurzbefehle helfen dir ein HTML-Dokument zu erstellen.
Liste der im Kurs verwendeten HTML-Elemente und deren Kurzbefehle.

Übung – Externe CSS-Datei

Öffne deinen Ordner xx im Brackets.
Erstelle in deinen Projektfolder einen neuen Ordner mit dem Namen css.
Erstelle mit Menuleiste > Datei > Neu, eine CSS-Datei.
Speichere die CSS-Datei im Ordner css mit dem Namen style.css.
Öffne alle deine index.html-Dateien und verknüpfe sie mit dem style.css.
Achtung: Die Unter-Seiten haben einen anderen Link ../
Die Anleitung dazu: CSS-Stil extern erstellen mit Brackets
Erstelle für die HTML-Elementen <body>,<h1> bis <h6> CSS-Formatierungen, anhand der Übersicht: der im Kurs verwendeten CSS Eigenschaften.
Gib den Elementen header und footer eine Hintergrundfarbe background-color.
Speichere die Datei und überprüfe sie im Browser.

Lösung | Lösung ZIP

Links und Links mit Pseudoklassen

Pseudoklassen sind Klassifizierungen, die einen Zustand oder eine Eigenschaft eines Elements beschreiben. Sie sprechen ein Element dann an, wenn es eine bestimmte Eigenschaft besitzt. So kann man zum Beispiel das Aussehen von Elementen bestimmen, über denen sich gerade der Mauszeiger befindet.
Der Link (a-Tag) hat 4 verschiedene Zustände.

a
a:hover
a:visited
a:active

Mehreren Elementen dieselben CSS-Eigenschaften zuweisen (Selektorenlisten).

Es ist möglich für mehrere HTML - Elemente die selben CSS-Angaben zu schreiben.
Die einzelnen Selektoren sind dann durch Kommas getrennt.

a, a:visited {
    color:#ff6677;
}
h1, h2, h3 {
    color:#ff6600;
}

Links im Kontext (Nachfahren)

Sind die mehrere Selektoren NICHT durch Kommas getrennt, gilt der Style nur für ein Element (Kind), welches sich innerhalb andere Elemente (Eltern) befindet. Man spricht dann von kontextsensitiven CSS-Elementen

nav a { 
    color: #ff0000; 
}
footer a { 
    color: #ffffff;
}

Übung – Linkfarben für die Navigation in der CSS-Datei direkt schreiben oder reinkopieren.

Öffne deine CSS – Datei.
Passe den h1-Tag im header-Element an. Gib ihm dieselbe Farbe wie die Hintergrundfarbe vom body (kontextsensitiv):
```
header h1 {
    color:#fff;
}
```

Die Linkfarbe im header und footer sollen weiss sein:

header a,
footer a,
header a:visited,
footer a:visited {
    color: #ffffff;
    text-decoration: none;
}

Passe als nächstes die Navigation an.
Zuerst die allegemeine Hintergrundfarbe für den nav Tag:

nav{
    background-color: #5A7247;             
}

Entferne nun die Listenpunkte mit:
```
nav ul{ 
    list-style-type: none;
}
```
Passe nun noch die Linkfarben der Navigation an. (kontextsensitiv)
Zuletzt gibst Du dem Lauftext (p-Tag) ein Zeilendurchschuss, damit die Schrift einfacher zu lesen ist:
```
p {line-height: 180%;}
```

Lösung | Lösung ZIP

PAUSE

CSS Klassen

CSS-Klassen werden mit einem frei wählbaren Namen definiert. Der Name muss mit einem Buchstaben anfangen, nie mit einer Zahl. CSS-Klassen können auf mehrere HTML-Elemente angewendet werden. Eine Klasse kann in einem internen CSS-Element oder in einer externen Datei geschrieben werden.

Übung – CSS-Klassen verwenden

Öffne deine Datei style.css im Brackets.
Erstelle eine Klasse mit dem Namen .selected.
Anleitung: CSS-Klasse erstellen mit Brackets
Die Klasse .selected bekommt nun eine Hintergrundfarbe passend zu den Farben der Navigation:
```
.selected{
background:#3c4b2f;
}
```
Öffne deine Datei kontakt/index.html im Brackets.
Teile die Klasse .selected dem a-Element, welches zur Kontaktseite linkt zu. Die Klasse rufst Du mit dem Attribut class="selected"auf.
Wiederhole diese Zuteilung auf allen Projektseiten.
Du kannst beliebig viele Klassen definieren und zuteilen.

Lösung | Lösung ZIP

Internes CSS

Interne CSS-Stile-Regeln können im head-Bereich einer Seite definiert werden. Diese Regeln gelten ausschliesslich für die Datei, in der sie geschrieben sind.

<style type="text/css">
body {
background-color: #f5f5f5;
color: #999999;
font-size: 1em;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
}
</style>

Responsive Design

Der Begriff Responsive Webdesign bedeutet "reagierendes Webdesign". Inhalts- und Navigationselemente, der gesamte strukturelle Aufbau einer Website passen sich der Bildschirmauflösung an.

Viewport Meta-Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Der Viewport Meta-Tag kann die Darstellungs-Auflösung und die Skalierung festlegen.
Diese Eigenschaften ist wichtig, wenn es um das Ansprechen mobiler Endgeräte geht.
html5-mobile.de

@media - Media Queries

Eine Stärke von CSS liegt darin, dass die Darstellung eines Dokuments für verschiedene Ausgabemedien festgelegt werden kann. Die Zuordnung eines Stylesheets zu einem Medium erfolgt mit Hilfe von Medienabfragen (Media Queries).
Im CSS werden Breakpoints definiert.

@media screen and (min-width : 600px) {
 body { …}
}

@media screen and (min-width : 980px) {
 body { …}
}

Übung - Media Queries kopieren und einfügen

Kontrolliere ob alle HTML Seiten eine Viewport Meta-Tag haben.
Öffne die CSS Datei und ergänze diese ganz unten im Dokument mit Media Queries.
Oft wird beim Schreiben von CSS der Code aus schon bestehenden Seiten kopiert (zB. aus der Lösung: unten). Dazu benutzt Du den Inspektor eines Browsers. Jeder Inspektor zeigt unter "Stilbearbeitung" oder CSS-Styles auf die externe CSS-Datei! Daraus kannst Du den Code kopieren! Wichtig ist dabei, dass Du den kopierten Code verstehst, um ihn allenfalls anpassen zu können:
Der Body-Tag bekommt eine Hintergrundfarbe ab einer min-width : 600px.
Der Body-Tag bekommt eine andere Hintergrundfarbe ab einer min-width : 980px.
Der a-Tag im Header soll seine Farbe gleichzeitig mit der Hintergrundfarbe im Body-Tag ändern. Erweitere das Template für Pad und Screen mit den selben Farbangaben für den a-Tag im Header. (kontextsensitiv)

Lösung | Lösung ZIP

Eigene Homepage ergänzen und neue Version auf den Server spielen.

Aufgaben

Lesen Im HTML & CSS Buch

Seite 231 - 301
Kapitel 10, Einführung in CSS /
Kapitel 11, Farbe /
Kapitel 12, Text
Zusatz: Übungen aus dem Buch!

Nachschauen

Alle Möglichkeiten der Farbangaben werden erklärt auf w3schools.com

CSS - Cascading Style Sheets, Responsive Design

Repetition