CSS, HTML & Javascript mit {stil}

CSS Einstieg und Grundlagen

HTML strukturiert Webseiten und zeigt eine sinngemäße Darstellung – nicht mehr und nicht weniger. CSS – Cascading Stylesheets – »impft« HTML mit Regeln für Schrift, Farben und Layout und überschreibt die schlichte Darstellung von HTML.

CSS Grundlagen

CSS-Regeln im head-Element oder in CSS-Datei

CSS ist nicht nur für Webseiten zuständig, sondern wirkt auch in anderen Markup-Sprachen wie XML, SVG und RSS und beschreibt auch Druck- und Sprachausgabe.

CSS-Regeln können in einem style-Tag im head-Tag der HTML-Datei sitzen oder in eine CSS-Datei mit der Endung CSS ausgelagert werden. Die externe CSS-Datei wird mit einem link-Tag in die Seite eingebunden.

<head>
   <link rel="stylesheet" href="style.css">

   <style>
      body { font-family: Helvetica; }
   </style>
<head>

Zusammen gehts auch: Zuerst die CSS-Datei mit den Stilen für alle Seiten, danach in einem style-Tag die CSS-Regeln für eine individuelle Seite. Am Ende darf CSS auch im style-Attribut von HTML-Tags eingesetzt werden.

<body style="font-family: Helvetica;">

Aufbau von CSS-Regeln

Eine CSS-Regel besteht aus

  • der Bezeichnung für das Element, auf das die Regel zielt: dem CSS-Selektor (z.B. ein h1-, ein p- oder div-Tag),
  • aus Eigenschaften wie color und einem Wert wie blue, die dem Element zugewiesen werden.

CSS-Deklarationen (Vereinbarungen von Eigenschaft : Wert) stehen in geschweiften Klammern und sind durch Semikolons voneinander getrennt.

selector { Eigenschaft: Wert; 
           Eigenschaft: Wert; 
           Eigenschaft: Wert }
…
h1 { 
   font-family: Helvetica;
   font-size: 1.4em;
   color: red;
}

Hinter die letzte Regel vor der schließenden geschweiften Klammer muss kein Semikolon gesetzt werden. Schaden kanns aber auch nicht. Also setzt man das Semikolon doch lieber, sonst wird es bei der nächsten Erweiterung vergessen und das CSS verweigert die Mitarbeit.

Aufbau CSS-Regel
Die CSS-Regel weist den Browser an, Text in h1-Tags in der Farbe Rot und mit der Schriftgröße 1.2em zu zeigen.

Der Selector kann der Name eines HTML-Tags wie p oder h1 sein. CSS-Eigenschaften sind Bezeichnungen für Attribute (z.B. color für die Schriftfarbe und font-family für die Schrift).

CSS-Schreibweisen

CSS ist nicht case-sensitiv (nicht empfindlich für Groß- und Kleinschreibung), Selektoren wie p oder h1 könnten auch in Großbuchstaben geschrieben werden.

P { BACKground: Black; Color: Yellow } // Funktioniert
<p>Hinter mir das schwarze Loch</p>

.ORANGE { BACKGROUND: orange }         // Funktioniert nicht
<p class="orange">Feuer gefangen</p>

#foo { Border-Bottom: 4px SOLID blue; } // Funktioniert
<Div id="foo">Unter mir nur die blaue See</div>

Eigenschaften wie background und ihre Werte machen sich nichts aus Klein- oder Großschreibung. Klassen- und ID-Namen hingegen sind case-sensitiv. Die Validatoren – sowohl der HTML-Validator als auch der CSS-Validator – segnen alle drei Varianten ab.

Wenn ein Wert eine Maßangabe enthält wie px in width: 400px, dürften wir px oder pX oder PX schreiben. Wichtig ist nur, dass die Maßeinheit ohne Leerzeichen direkt hinter den Wert gesetzt wird. Da diese Flexibilität schnell zu Schreibfehlern führt, hat es sich eingebürgert, alles klein zu schreiben.

Selektoren – Elemente identifizieren und auswählen

Alle HTML-Elemente innerhalb des body-Tags und auch das body-Tag dienen als CSS-Selector: body, nav, header, p, div, a, …

class- und id-Attribute des HTML-Tags transportieren CSS-Eigenschaften in ausgewählte Elemente des Dokuments. Das ist das gebräuchlichste Vorgehen, wenn CSS nur für spezielle Elemente bestimmt ist.

<div id="headerBox"> … </div>
<ul class="ohneListenpunkte">
 …
</ul>

Die Namen von class- oder id-Attributen werden im Stylesheet durch einen Punkt ».« bzw. durch das »#«-Zeichen (Hash) angeführt. Dabei kann die Bezeichnung des Elements vorangesetzt werden – muss aber nicht.

#headerBox { border: 3px solid silver; }
ul.ohneListenpunkte { list-style-type: none; }

Darüber hinaus können Element-Selektoren genauer angegeben werden – z.B. als Nachfahren-Selektoren:

h1 a
jedes a-Element innerhalb eines h1-Elements
a:hover
jedes a-Element wenn die Maus über das a-Element fährt (hovert)

Eine Klasse kann auf mehrere Elemente der HTML-Seite angewendet werden, während ein id-Attribut nur einmal im Dokument vorkommen darf. So eignet sich id gut dazu, Eigenschaften für das Layout und die Positionierung in HTML-Elemente zu transportieren.

Ein class-Attribut hingegen darf beliebig oft im Dokument vorkommen und formatiert unterschiedliche Elemente.

CSS für alle Webseiten – die CSS-Datei

Die Teilung zwischen HTML und CSS trennt Inhalt und Darstellung. Der Inhalt mit dem HTML-Markup liegt in einer Datei, das CSS für das Design, Schriften und Farben in einer anderen. Das hält das Webdesign über alle Seiten des Internet-Auftritts konsistent und hält die HTML-Struktur überschaubar.

Eine Änderung in der CSS-Datei erreicht alle HTML-Seiten und hält das Design konsistent. Um das Design der Webseite aufzufrischen, reicht ein Eintrag in der CSS-Datei. Die Struktur und der Inhalt der HTML-Dateien müssen nicht angefasst werden.

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

Die CSS-Datei wird mit einem Link-Tag im head-Bereich der HTML-Seite eingebunden. Es gibt zwar auch andere Methoden um CSS-Eigenschaften zu laden, aber eine ausgelagerte CSS-Datei ist die gebräuchlichste. Am besten unternimmt man die ersten Versuche mit einem einfachen HTML-Grundgerüst.

CSS ändern
Änderungen in der CSS-Datei ändern Layout und Stil auf allen Seiten

CSS erreicht alle Elemente:

  • CSS legt die Schriftart und -größe fest,
  • setzt Farben, Hintergrundfarben und Hintergrundbilder,
  • positioniert Header, Sidebar und Footer für das Layout,
  • und bewegt die Webseite mit einfachen Animationen.

Die einfachen Regeln für HTML und CSS sind der Grundstein für den Erfolg des Webs. Die Liste der CSS-Eigenschaften ist zwar lang und wird immer länger, aber der Einstieg in CSS ist einfach:

h1 {
   font-family: Helvetica;
}

Nimm alle h1-Tags und setze sie in der Schrift »Helvetica« …

Aufbau der CSS-Datei

Schon bei einer mäßig komplexen Seite sammeln sich immer mehr und mehr CSS-Regeln. Was am Anfang noch locker von der Hand geht – schnell mal die Schrift für alle Absätze ändern – endet in Zähneknirschen und frustrierenden Suchen, warum sich das li-Tag der Schriftgröße nicht fügen will.

Keine Frage: Da haben wir alle neuen Stile ans Ende der CSS-Datei gesetzt, aber Stile überschreiben einander und in den Breakpoints für das Layout verheddert sich das carousel-CSS.

Ein Vorschlag für den Aufbau der CSS-Datei:

  1. Universelle Basis-Regeln für einfache Selektoren wie body, a, h1, keine Klassen, keine ID-Selektoren.
  2. Regeln für das Layout anhand von id-Selektoren wie id="topmenu" id="header", id="sidebar", id="main"
  3. Module wie Slideshows, Karussells oder Galerien
  4. CSS-Stile für das Theme: Farben und Icons

Nur eine denkbare Organisation von vielen, aber die Leitlinie sollte sein: Je genereller der Selektor, desto weiter oben. Je spezieller ein Selektor ist, desto schwieriger ist es, ihn zu überschreiben.

CSS-Fehler suchen

Aber auch wenn CSS einfach scheint – CSS ist nicht immer intuitiv. CSS-Stile werden in der Reihenfolge angewendet, in der sie vorgefunden werden. Dabei kann ein tiefer liegender Stil eine vorangegangene Regel überschreiben: Das ist die Kaskade. Die Kaskade führt zu langen Suchen nach verantwortlichen CSS-Regeln, wenn eine Regel partout nicht greift oder wenn sich ein Stil tapfer gegen das Entfernen wehrt.

Korrektes HTML ist die beste Grundlage. Fehlende End-Tags und falsches Klammern führen im Handumdrehen zu Fehlern, deren Ursachen auf den ersten Blick (und zweiten und dritten Blick) verborgen bleiben.

Gegen die leichten Inkonsistenzen zwischen den Browsern agieren CSS-Normalize und CSS-Reset, die dem CSS voran gesetzt werden.

Bei Tippfehlern im CSS hilft ein Gang zum CSS Validation Service.

CSS einbinden

Einfache CSS-Eigenschaften können in das style-Attribut direkt in das HTML-Tag geschrieben werden. Das macht aber nur Sinn, wenn es sich bei den CSS-Stilen für ein HTML-Element um eine Ausnahme handelt.

CSS Inline

<p style="color:darkgray; font-family:Arial">
    Hier wirkt der Stil direkt
</p>

Stylesheet-Regeln werden im Kopf des HTML-Dokuments in style-Tags notiert.

style-Tag

<head>
    …
    <style type="text/css" media="all">
        p { color: white; background: green; width: 500px; }
    </style>
</head>

Externe CSS-Datei

<head>
    …
    <style type="text/css">
        @import url("style.css");
    </style>
    </head>
	
oder noch besser
	
<head>
    …
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>

Die externe Stylesheet-Datei ist eine einfache Textdatei, in der die CSS-Regeln des Dokument notiert sind. Die Zeichen /* und */ schließen einen CSS-Kommentar ein, der vom Browser überlesen wird. Das style-Tag wird in einer externen CSS-Datei nicht gesetzt.

/* Styleheet: mediaevent
Theme URI: https://www.mediaevent.de/
Version: 1 */

body { 
   background: gainsboro url(logo.png) repeat-x; 
}

p { 
   margin: 0p; color: rgb(60,60,60);
}

Responsive Webseiten

Für ein responsives Webdesign werden Media-Queries eingesetzt. Das sind im einfachsten Fall Abfragen nach der Breite des Viewports bzw. Browserfensters.

#main { background: white; }
#sidebar { background: gainsboro }

@media (min-width: 600px) { // Ab minimaler Breite von 600px
	#main { width: 390px }
	#sidebar { width: 190px }
}

Was innerhalb von @media {} sitzt, wird vom Browser nur verwendet, wenn das Browserfenster mindestens 600px breit ist. In diesem Beispiel wird alles, was nicht in einer media-Regel sitzt, für kleinere Fenstergrößen angewendet. Mit @media-Regeln setzt das CSS Breakpoints – Bruchstellen, an denen sich das Design an eine andere Geräteklasse anpasst.

Mehr zur @media-Regel für responsive Webseiten und zum Setzen von Breakpoints.

Werte für CSS-Eigenschaften

Obwohl die Werte der Eigenschaft ganz unterschiedlicher Art sein können, gibt es einen Fundus an Werttypen.

color
Farben können als Hexwert (#cfcfcf), als RGB-Wert (rgb(200,200,200)), als Farbname (white, gray, black …) notiert werden
.text { color: #cdcdbb}
header { background-color: rgb(220,230,225)}
Breiten- und Höhenangaben
Können absolut in cm, relativ in px, ems, oder als Prozentangaben oder als Schlüsselwörter angegeben werden: thick, thin, medium. Prozentangaben beziehen sich auf den umfassenden Container.
header { width: 90%; }
p { max-width: 50em; }
URL/URI Adressen von Ressourcen
url( https://wisotop.de/background.png )
header { background-image: url( img/pattern.png ) }
Schriften
Als Schriftart: font-family: Verdana, Arial, Helvetica; oder font-family: Times New Roman, serif;
p { font-family: Arial, sans-serif}
Suchen auf mediaevent.de