⬆
Youtube Video

Allgemeine Infos zu CSS

Um einen kleinen Einblick zu bekommen, was alles mit CSS möglich ist, findet auf https://enjoycss.com/ viele Beispiele und einen CSS Online Generator.

CSS kann man auf verschiedene Arten integrieren:

  1. Externe CSS-Datei (globales Stylesheet)
    Gilt für viele Seiten. Die Formatierungen werden zentral verwaltet
  2. Dokumentweit Style-Block im Kopf der HTML-Datei
    Gilt für eine einzelne HTML-Seite.
  3. ein Style-Attribut eines HTML-Elements
    Gilt für ein einzelnes HTML-Element
1. Externe CSS Datei

Man lagert die Style Sheets in einem externen Dokument an zentraler Stelle aus und verbindet diese Datei mit allen HTML Dateien. So hat man ein einheitliches Design für die gesamte Website (Corporate Design). Das CSS wird im Klartextformat in UTF-8 mit der Endung .css gespeichert. Die CSS Anweisungen werden direkt in die CSS Datei eingefügt. so sieht's aus

In den HTML Seiten muss eine Verknüpfung zu dieser Datei angelegt werden. Hier gibt 2 Arten die externe CSS Datei einzubinden.

HTML

<link rel="stylesheet" href="website.css">

a.)Einbinden einer CSS Datei in HTML in einem <link > Element.

CSS

<style>
@import "formate.css";
@import url("special/ie-hacks.css");
</style>

b.) Einbinden einer CSS Datein in CSS. Innerhalb des Gültigkeitsbereichs eines <style> Elements wird eine @import Anweisung eingefügt. Mit url() oder ohne, beides ist möglich.

 
So eine @import Anweisung kann man auch benutzen, wenn man mehrere Stylesheetdateien angelegt hat und innerhalb einer Stylesheetdatei eine andere Stylesheetdatei einbinden will. Auch Schriftarten werden so eingebunden. so sieht's aus
2. Dokumentweit
Hat man nur wenige Style Anweisungen, so lohnt es sich nicht eine extra Datei dafür anzulegen. Stattdessen schreibt man die Style Anweisungen direkt in die HTML-Datei. Auch wenn man eine externe Stylesheet Datei eingebunden hat, kann es nützlich sein, zusätzlich ein paar dokumentweite Style Anweisungen hinzuzufügen, die nur für dieses Dokument Gültigkeit haben. Man notiert ein style- Element das Attribut type="text/css" muss ab HTML5 nicht eingefügt werden. Innerhalb des Gültigkeitsbereichs des style Elements wird CSS notiert. 
<style>
body {color: #FFAFFF}
</style>

Dokumentweite Einbindung der Styles werden standardmäßig im Kopfbereich der Seite definiert. Wenn diese dokumentweite Deklaration nach einer externen Einbindung eingefügt wird, hat die dokumentweite Vorrang.
3. Innerhalb von Elementen
Die dritte Möglichkeit, ein einzelenes HTML Element wird mit einer CSS Anweisung versehen. 
<h1 style="color:red;   font-size:26px;">HTML5</h1>

Innerhalb von HTML Elementen hat man die Möglichkeit, für das einzelne Element eine Style-Anweisung zu notieren. Diese hat Vorrang vor der externen und vor der dokumentweiten Anweisung. Das Attribut style bekommt die CSS Eigenschaften und Werte zugewiesen.

Aufbau und Regeln einer CSS Datei

Eine Regel oder ein Regelset legt fest wie bestimmte Elemente einer HTML-Seite dargestellt werden sollen. Eine Regel besteht aus einem Selektor gefolgt von einem Deklarationsblock. Darin befinden sich eine oder mehrere Deklarationen auch Anwweisungen genannt. Eine Anweisung besteht aus einer Eigenschaft gefolgt von einem Doppelpunkt und ein oder mehreren Wertzuweisungen. Die Anweisungen (Deklartionen) werden mit Semikolon getrennt aufgeführt.
Selektor { Eigenschaft: Wert; Eigenschaft: Wert; }

CSS Regel

 

 

Anwendung von Stylesheets auf Dokumente

siehe dazu Selfhtml

Auch ein Html Dokument ohne CSS Anweisung wird mit dem Browser Style-Sheet dargestellt. Es ist außerdem möglich ein Benutzerstylesheet für den Browser festzulegen. Wenn ein Browser eine HTML Seite darstellt. Sucht er für jedes Element nach einer Stylesheet Definition, wenn es nur eine gibt. Stellt er es entsprechend dar. Gibt es mehrere unterschiedlicher Herkunft werden sie folgendermaßen mit absteigender Gewichtung sortiert.

Reset oder normalize.css

Um ein einheitliches CSS in allen Browsern zu erlangen, kann man alle Styleanweisungen zurücksetzen. Anschließend erstellt man eigene CSS Anweisungen für die wichtigsten Elemente. Siehe reset alles zurücksetzen. oder man bindet die normalize.css von Nicolas Gallagher ein.

Eine regelmäßig aktualisierte reset.css findet man unter: http://meyerweb.com/eric/tools/css

Spezifität & Rangfolge

Man kann mehrere CSS Dateien einbinden und zusätzlich auf der einzelnen Seite definieren. Generell gilt die vom Browser zuletzt aufgerufene Style Anweisung überschreibt frühere Formatvorgaben. Das ist das Prinzip der Kaskadierung. Von dieser Rangfolge unabhängig überschreiben genauere Angaben ungenauere Angaben. Was das im einzelnen zu bedeuten hat, kann man an dem Punktesystem der Spezifität ermitteln.
mehr dazu siehe hier

Ausgabemedien

Man kann für unterschiedliche Ausgabegeräte einzelne Style Sheet Dateien definieren. Mehr dazu unter Media Queries Das macht in erster Linie Sinn für Druck und Bildschirmausgaben. Dazu folgendes Beispiel:

<link type="text/css" rel="stylesheet" href="printStyle.css" media="print">
<link type="text/css" rel="stylesheet" href="screenStyle.css" media="screen">

Werte, Zahlen & Einheiten

Es gibt verschiedenen Möglichkeiten der Wertzuweisung, absolute und relative Werte, Werte die sich auf die Basisischriftgröße beziehen, Werte die sich am Viewport orientieren. mehr dazu hier

Mit der calc() Funktion kann man relative und absolute Werte addieren oder andere mathematische Operationen auführen. mehr dazu hier

Unter Schriftformatierung habe ich genauere Angaben zu den einzelnen Einheiten aufgeführt. mehr dazu hier

Kommentare in CSS

Kommentare erscheinen nur in der Quellcode Ansicht. In CSS wird ein Kommtar folgenermaßen erzeugt:

/* Kommentartext */

Kommentare in HTML

Im HTML Bereich erzeugt man einen Kommentar folgendermaßen:

<!-- Kommentartext -->

Prefix Free

Das Thema Prefix ist mittlerweile 2020 veraltet.

CSS Eigenschaften, die noch nicht offizieller Standard sind, müssen vorerst noch mit Hersteller Präfixen versehen werden (vendor prefix) Nach einer Weile wird die Unterstützung für die gepräfixten Bereiche eingestellt und der offizielle Standard wird verwendet. Um auf alle Browserversionen Rücksicht zu nehmen müssen die Eigenschaftn mehrmals aufgeführt werden. Im folgenden ein Beispiel.

background: -webkit-linear-gradient(90deg, #fec, white, #fec); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(90deg, #fec, white, #fec);/* For Opera 11.1 to 12.0 */
background: linear-gradient(0deg, #fec, white, #fec); /* Standard syntax */

Es gibt eine Lösung mit Javascript, so dass man lediglich die offizelle Schreibweise notieren muss, den Rest erledigt das Script von Lea Verou. Laden Sie die Datei herunter und binden Sie diese im Head Bereich ein.

Prefix Free only 2kb Javascript Datei http://leaverou.github.io/prefixfree/