Einführung in CSS

1. Die Entstehung von CSS

Als klar wurde, dass der Browser nicht nur für wissenschaftliche Zwecke genutzt wurde, sondern auch für Unterhaltung, fehlten ihm sofort Multimedia-Features: Videos, Animationen, Farben, Geräusche, Transparenz usw.

Zunächst wollte man dafür mehr Tags hinzufügen, dann wurde jedoch deutlich, dass hunderte neue Tags die Arbeit mit HTML-Dokumenten erheblich erschweren würden. Daraufhin entstand die Idee, die „Dokumenten-Gestaltung“ (Design) vom Inhalt zu trennen. So entstand CSS.

Cascading Style Sheets (CSS), oder auf Deutsch "Kaskadierende Stylesheets", sind eine der Schlüsselkomponenten der Webentwicklung. Sie sind für das visuelle Design von Webseiten verantwortlich.

CSS ist eine Sammlung von Eigenschaften, jede davon hat einen Namen und einen Wert. Der Webentwickler gibt diese Eigenschaften an, und der Browser ist für deren Darstellung zuständig. Diese Eigenschaften können für fast jedes Element definiert werden. Beispiel für CSS-Stile:

Es gibt weniger als hundert solcher CSS-Eigenschaften (auch CSS-Properties genannt). Aber sie können miteinander interagieren und überraschende Effekte erzeugen. Auf CodeGym lernst du, wie du mit ihnen arbeitest und echte Magie auf Webseiten erschaffst 🦄.

2. Stile von Elementen

Für jedes HTML-Element kannst du mit dem Attribut style einen eigenen CSS-Stil definieren.

Beispiel:

      
<p style="color: blue; font-size: 16px;">Das ist ein Beispiel für einen eingebetteten Stil.</p>
      
    

Dieser Stil teilt dem Browser mit, dass der Text im Absatz in blauer Farbe gerendert werden soll und die Schriftgröße 16 Pixel hoch sein soll.

Eigentlich sind das hier zwei „Stile“:

• color = blue
• font-size = 16px

Sie sind einfach in einer Zeile angegeben und durch ein Semikolon getrennt.

Du kannst auch beispielsweise ein schwarzes Rechteck erstellen und darin Text in weißer Farbe schreiben. Der Code dafür sieht so aus:

      
<div style="width:100%; height:200px;color:white;background-color:black"> 
Weißer Text auf schwarzem Hintergrund 
</div>
      
    

3. Farben

Wir werden CSS-Stile ausführlicher besprechen, wenn wir uns mit HTML befassen. Aber um es spannender zu machen, beschäftigen wir uns heute mit Farben. Mit CSS kannst du jede beliebige Farbe definieren, die ein Computer anzeigen kann, und noch mehr.

Farben in CSS sind ein wichtiger Bestandteil der Gestaltung von Webseiten. Sie ermöglichen die Erstellung von visuell ansprechenden und intuitiven Oberflächen. Es gibt mehrere Methoden, um Farben in CSS zu definieren, jede hat ihre Besonderheiten und Anwendungen.

1. Farbnamen (Color Names)

CSS unterstützt über 140 Standard-Farbnamen. Das ist eine einfache und verständliche Methode, Farben zu definieren.

      
<div style="color: lightblue;"> Helle blaue Textfarbe</div>
      
    

Einige gängige Farbnamen:

2. Hexadezimale Werte (Hexadecimal Values)

Es gibt noch eine weitere Methode, mit der du jede Farbe angeben kannst — die hexadezimale Kodierung. Sie ermöglicht die Definition von 16 Millionen Schattierungen — Namen für so viele Farben zu erfinden ist unmöglich, daher verwendet man Zahlen.

Hexadezimale Werte werden mit dem Symbol # angegeben, gefolgt von sechs Ziffern oder Buchstaben, die die Intensität der roten, grünen und blauen Farben darstellen (RRGGBB).

      
<div style="color: #ff0000; background-color: #00ff00;"> Rot auf Grün </div>
      
    

Du wirst diese Methode der Farbangabe oft in Beispielen sehen. Wir kommen auf dieses Thema zurück, wenn wir CSS genauer untersuchen.