Tipps und Ticks mit CSS

Wenn ich mich im Internet oder speziell auf Facebook in verschiedenen WordPress oder Webdesign Gruppen aufhalte, kommen immer wieder Fragen zu kleineren Problemen bei Gestaltung von Webseiten auf. 

Es sind Fragen wie: „Wie kann ich den Text in meinem Abschnitt zentrieren?“ oder „Ich habe mir ein Theme gekauft und möchte einige Dinge ausblenden, aber ich finde keine Einstellungsmöglichkeiten im Customizer“.

Hört sich für manch einen schon ziemlich komplex an, aber es sind bei genauer Betrachtung ganz simple Probleme. Mit ein paar CSS Befehlen kann man so viele verschiedene Dinge auf seiner Seite verändern und anpassen. Man benötigt dafür keine Programmierkenntnisse. Es reicht, wenn man sich ein paar Grundbefehle anschaut. Natürlich fällt es einem Programmierer leichter, sich in die Thematik einzuarbeiten, aber das sollte niemanden davor abschrecken es einmal selbst zu versuchen.

In diesem Artikel werden wir uns einer Handvoll CSS Befehlen widmen und diese auch gleich auf einer speziellen Seite ausprobieren. Denn nichts ist besser als das gelernte gleich auch umzusetzen. Alles was wir dafür brauchen ist ein Browser (in diesem Beispiel benutze ich Microsoft Edge). 

Für die folgenden Tipps habe ich den Microsoft Edge Browser genommen. Andere Browser können von den Menübezeichnungen etwas abweichen.

Möchten wir Änderungen an unserem CSS vornehmen müssen wir nicht sofort ins Backend gehen und unsere style.css Datei ändern. Für Versuchszwecke können wir Änderungen Live in unserem Browser eingeben und Testen. Unser Vorteil, bei dieser Vorgehensweise ist folgender:

– Wir können die Änderung auf der Homepage direkt anschauen. Sollte uns ein Fehler unterlaufen müssen wir nur die Seite erneut Laden (F5)

Um die folgenden Beispiele direkt Testen zu können habe ich extra eine Seite eingerichtet. Unter folgendem Link kommt man auf die CSS-Testseite zur Testseite

Entwickleransicht im Browser aktivieren

Schritt 1: Rechtsklick auf die zu bearbeitende Stelle auf der Homepage

Schritt 2: Im Kontextmenü den Punkt „Untersuchen“ auswählen (Microsoft Edge/Googel Chrome) 

Schritt 3: Die Entwicklungsumgebung hat sich nun geöffnet

Schriftgröße ändern

Schriftart ändern

Schriftfarbe ändern

Hintergrund ändern

Rahmen hinzfügen

Schriftausrichtung ändern

Schrift mit Schatten versehen

Abschnittbox mit Schatten versehen

Header fixieren

Header mit Schatten versehen

Baustein ausblenden