In CSS (Cascading Stylesheets) stehen Anweisungen, die deiner Website sagen, wie die Dinge auszusehen haben. Mit „die Dinge“ meine ich beispielsweise die Farbe von Text oder die Grösse von Überschriften.
CSS ist so ähnlich wie Wohnung einrichten. Du pinselst eine Wand an, hängst ein Bild auf, stellst eine Blume daneben und schiebst die Blume solange hin und her, bis es dir gefällt.
Mit CSS kannst du alle Dinge zu jedem Zeitpunkt verändern.
Dir gefällt die Wandfarbe nicht, kein Problem.
Anstelle der Blume soll ein interaktives Kunstwerk erscheinen, kein Problem 🙂
Ein Beispiel
Weil das ja doch alles sehr abstrakt ist, hier ein sehr einfaches Beispiel:
Das ist das HTML Markup:
<p>Ich bin ein Absatz, der ein <em>betontes</em> Wort enthält.</p>
das sind die CSS Anweisungen:
p {size: 16px;}
em {color: red;}
Im Editor jsfiddle.net kannst du das sofort online ausprobieren.
Du musst dich nicht registrieren.
Es macht Spass in dieser Umgebung zu probieren und im Ergebnis versteht man die Zusammenhänge vermutlich viel besser.
Wo gebe ich die CSS Anweisungen auf meiner Website ein?
Nach dem Ausprobieren auf jsfiddle möchtest du natürlich sofort auf der eigenen Website deine Idee umsetzen. Aber wo werden die CSS Befehle eingetippt?
HTML Site
Wenn du eine HTML/CSS Site ohne Datenbank betreibst, kannst du die CSS Anweisungen in der entsprechenden Datei per FTP auf den Server laden und/oder online verändern. Bei unseren Web Hostings geht das in der Dateiverwaltung im cPanel.
Content Management Systeme
Bei den klassischen Content Management Systemen WordPress, Joomla und Drupal kannst du auf unterschiedliche Weise zusätzliche CSS Anweisungen eingeben.
Joomla
Joomla besitzt einen vollwertigen Online Template Editor. Lege einfach im CSS Verzeichnis eine neue Datei mit dem Namen user.css an und füge die gewünschten Befehle ein.
Joomla lädt diese Datei nach dem Speichern automatisch.
Im Quellcode der Website taucht die neue Datei user.css auf.
WordPress
In WordPress gibt es im Bereich Design den Customizer. Hier kannst du deine CSS Befehle eintragen.
Im Quellcode der Site werden deine Anpassungen „inline“ eingebunden.
Die englische WordPress Dokumentation enthält eine Übersicht über gebräuchliche WordPress CSS-Klassen (WordPress and CSS).
Drupal
In Core Drupal kannst du das CSS nicht so einfach über den Browser anpassen. Es gibt aber natürlich ein Modul für Drupal 7 und Drupal 8, das dir einen CSS Editor mit Seitenvorschau zur Verfügung stellt (CSS Editor).
Auch hier wieder ein kurzer Blick in den Seitenquellcode. Wie bei WordPress wird das CSS Inline in die Seite eingefügt.
Wir finde ich die passende CSS Klasse?
Wer schon mal gesucht hat, an welcher Stelle diese oder jene Änderungen eingefügt werden muss, weiß die aktuellen Browser zu schätzen. Einfach die Stelle markieren und im Browser Inspektor anzeigen, hier ein Beispiel in Google Chrome.
Hinweis: Wie beim Einrichten deiner Wohnung kannst du mit der Verwendung von individuellem CSS sehr schnell übers Ziel hinaus schießen, daher ein paar ganz einfache Dinge, die du beachten solltest:
- Keine Mischung von Schriftarten
- Benutze aufeinander abgestimmte Farben
- Trenne Inhaltselemente wie Seitenleisten, Kopf- und Fußzeilen klar voneinander
- Benutze nicht all zu viele Fotos und Grafiken
- Achte auf einen hohen Kontrast zwischen Schrift und Hintergrund
Design lernt man nicht in ein paar Stunden. Es ist ein Prozess, der sich über Jahre erstreckt und nie zu Ende ist. Gerade deswegen bereitet er vielen Menschen auch soviel Freude.
Links
- http://wiki.selfhtml.org/wiki/CSS
- Beispiel Fiddles
http://jsfiddle.net/chriscoyier/Hyg3C/20/
http://jsfiddle.net/HdfaT/630/
tl;dr: Mit CSS kannst du deine Website „verschönern“.
Schreibe einen Kommentar