CSS, HTML und Javascript mit {stil}

CSS Einstieg und Grundlagen

CSS bringt Stil, Design und Farbe in HTML

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 ist nicht nur für Webseiten zuständig, sondern wirkt auch in anderen Markup-Sprachen wie XML, SVG und RSS und beschreibt auch den Druck und die Sprachausgabe.

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 in einer anderen. Das hält das Webdesign über alle Seiten des Internet-Auftritts konsistent.

Eine Änderung in der CSS-Datei erreicht alle HTML-Seiten. 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.

Eine CSS-Datei für alle HTML-Seitenbody { font-family: Roboto, sans-serif}h1 { font-size: 1.2em }p { font-size:1.1em }.col { width:300px }#accordion div {background-color: #b2ce8f;height:50px;transition: height 1s ease-in-out }@media only screen and (min-width: 50em) {}
  • 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 von CSS-Regeln

Eine CSS-Regel besteht aus

  • der Bezeichnung für das Element, auf das die Regel zielt (dem CSS-Selektor),
  • aus Eigenschaften (Properties), die dem Element zugewiesen werden.

CSS-Eigenschaften stehen in geschweiften Klammern und sind durch Semikolons voneinander getrennt.

selector { Eigenschaft: Wert; 
           Eigenschaft: Wert; 
           Eigenschaft: Wert }

Hinter die letzte Regel vor der schließenden geschweiften Klammer muss kein Semikolon gesetzt werden.

Aufbau von CSS-Regelnp { colordarkgrayfont-familyArialmax-width400px }RegelnEigenschaft (property)Wert (value)selector
Die CSS-Regel weist den Browser an, Text in p-Tags dunkelgrau in der Schrift »Arial« und über eine maximale Breite von 400 Pixeln zu zeigen.

In diesem Beispiel ist der Selector der Name eines HTML-Tags wie p oder h1. CSS-Eigenschaften sind Bezeichnungen für Attribute (z.B. color für die Schriftfarbe und font-family für die Schrift). Eine CSS-Regel ist die Zuweisung eines Werts an eine Eigenschaft.

Klein- und Großschreibung

CSS ist nicht case-sensitiv, Selektoren wie p oder h1 könnten auch in Großbuchstaben geschrieben werden, denn HTML ist ist nicht case-sensitiv (XML aber sehr wohl).

P { BACKground: Black; Color: Yellow } // Funktioniert
<p>Hinter mit 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.

CSS in HTML-Seiten einbinden

CSS Inline

Einfache CSS-Eigenschaften können in das style-Attribut direkt in das HTML-Tag geschrieben werden.

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

Das macht nur Sinn, wenn es sich bei den CSS-Stilen für das p-Tag um eine Ausnahme handelt.

style-Tag

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

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

Mit HTML5 ist ein style-Tag im Body der HTML-Datei erlaubt, wenn das style-Tag das scoped-Attribut enthält – nur innerhalb des Blocks gilt.

style-Tag scoped

Stylesheet-Eigenschaften für einen HTML-Block.

<header>
   <style scoped>
      h2 { background: salmon; color: white}
   </style>
   <h2>CSS für einen HTML-Block</h2>
   <div>
      <img src="logo.png" alt="logo">
   </div>
</header>

Das style-Tag muss gleich zu Beginn des Blocks vereinbart werden und muss das Attribut scoped enthalten.

Eigentlich sollte das CSS nur innerhalb des Block – hier innerhalb des header-Elements – gelten, aber die meisten Browser setzen die Stile dennoch auf der gesamten Seite um. Nur Firefox interpretiert das Attribut scoped richtig und wendet die Stile nur innerhalb des umfassenden HTML-Blocks an.

Besser ist es allerdings, die CSS-Regeln in eine externe Datei auszulagern. So bleibt das Dokument übersichtlich und Änderungen wirken direkt auf allen Seiten, die durch das Stylesheet formatiert werden.

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 notiert.

/* 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);
}

Selektoren

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

class- und id-Attribute transportieren CSS-Eigenschaften in ausgewählte Elemente des Dokuments. Dieses Vorgehen ist das gebräuchlichste, 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 angeführt. Dabei kann die Bezeichnung des Elemets 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)

CSS selector class- und id

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 und die Positionierung in HTML-Elemente zu transportieren.

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

Fehlersuche in CSS

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.

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

Und noch ein Helfer, wenn es mit dem CSS nicht wie gewünscht funktioniert: CSS Lint.

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: 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 Resourcen
url(http://www.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}