CSS Einstieg und Grundlagen

CSS gibt dem schlichten HTML Design, Farbe und positioniert für das Layout Zeigt eine stilisierte Figur ohne Kleidung (HTML) und daneben als Superman (CSS)

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 Druck- und Sprachausgabe.

CSS Regeln können in einem style-Tag im head-Element 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),
  • 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 }
…
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 kann's aber auch nicht und besser setzt man das Semikolon doch, sonst vergißt man es bei der nächsten Erweiterung.

Aufbau einer CSS-Regel Zeigt die Regel für p-Tags mit Farbe und font-family und max-width
Die CSS-Regel weist den Browser an, Text in h1-Tags in der Farbe Rot und mit der Schriftgröße 1.4em 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). Eine CSS-Regel oder Vereinbarung weist einer Eigenschaft wie color einen Wert wie red oder #000 zu.

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

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 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 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 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 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 Slideshow und Karussel
  4. CSS-Stile für das Theme: Farben, Bilder

Nur eine denkbare Organisation von vielen.

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.

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

CSS 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>
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(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}
HTMLCSS h1 { color: red; font-size: 1.2em; } Selector Declaration (Vereinbarung) Property (Eigenschaft) Value (Wert) Property (Eigenschaft) Value (Wert) Declaration (Vereinbarung) Eine CSS-Datei für alle HTML-Seiten body { font-family: Roboto, sans-serif; } h1 { font-size: 1.2em; color: blue; } .flexcontainer { flex-wrap:wrap-revers;} Croissant sesame Ice cream Fruitcake Pie lollipop gummi bears pastry Cotton candy tiramisu cupcake Soufflé donut icing ginger marzipan biscuit bonbon oat cake gummi bears tootsie roll sweet fruitcake