Wie Sie CSS verwenden können – Webdesign-Tipps und Tricks für Anfänger

Mit diesen CSS-Tipps für Anfänger können Sie sogar lernen, wie Sie CSS verwenden, um Ihre Webseiten zu gestalten.

Sie müssen nichts über Computercode wissen. Alles, was Sie wissen müssen, ist, wie man kopiert und einfügt.

Aber zuerst, was ist CSS?

Cascading Style Sheets (CSS) ist ein Stylesheet-Sprachcode, den Designentwickler verwenden, um die Präsentation oder das Aussehen eines HTML-Dokuments zu beschreiben und zu ändern.

Was macht CSS?

Einfach ausgedrückt: Die CSS-Datei sorgt dafür, dass HTML-Seiten gut aussehen.

Unabhängig davon, welche Blogging-Plattform Sie verwenden, können Sie Ihre CSS-Eigenschaften ändern, um Ihr Blog noch besser aussehen zu lassen.

Es spielt keine Rolle, welche Blogging-Plattform Sie verwenden.

Sie haben in Ihren Designeinstellungen eine Option für benutzerdefiniertes CSS oder zusätzliches CSS .

Sie haben sich diese Option vielleicht noch nie angesehen.

Oder Sie denken vielleicht, dass es zu schwierig ist, das Programmieren zu lernen.

Aber es ist supereinfach.

Ich weiß nichts über Webentwicklung oder CSS-Syntax, aber ich kann ein Stilattribut in Sekundenschnelle ändern.

Alles, was Sie tun müssen, ist, die Entwicklertools Ihres Chrome- oder Firefox-Webbrowsers zu verwenden und ein paar einfache CSS-Tricks und Tipps zu lernen.

Schauen wir uns an, wie einfach es ist.

Warum möchten Sie lernen, wie Sie das CSS Ihres Blogs bearbeiten?

Sie haben wahrscheinlich viele Einstellungen im Design Ihres Blogs.

Aber es gibt viele kleinere Elemente, die fehlen könnten.

Selbst in Premium-Themes für WordPress sind einige Optionen in den Standardoptionen nicht verfügbar.

Aus diesem Grund können Sie dazu beitragen, dass Ihr CSS besser funktioniert, indem Sie Ihre eigenen Bearbeitungen und Änderungen vornehmen.

Durch die Änderung eines externen Stylesheets kann es auf alle Ihre HTML-Seiten verweisen.

Wenn Sie Ihre HTML-Überschriften auf einer Seite ändern, wird das HTML-Tag auf allen Ihren Seiten geändert.

Die Referenz wird als Pseudoelement bezeichnet.

Das bedeutet, wenn Sie das Aussehen Ihrer H2-Überschrift ändern, werden alle H2-Überschriften auf Ihrer Website geändert.

Aber Sie müssen nicht alles über diese Komplikationen lernen.

Alles, was Sie wissen müssen, ist, dass es funktioniert und dass Sie Ihr Blog genau so gestalten können, wie Sie es möchten, ohne etwas über Codierung zu wissen.

Beginnen wir mit einigen einfachen CSS-Tipps für Anfänger.

So ändern Sie ganz einfach Ihr Inline-CSS

Der erste Schritt besteht darin, Ihr Blog in Firefox, Chrome oder Microsoft Edge zu öffnen.

In den folgenden Beispielen habe ich Firefox verwendet. Ich finde es etwas benutzerfreundlicher als Chrome.

Aber beide funktionieren auf ähnliche Weise.

Öffnen Sie Ihr Blog in einem neuen Tab oder Fenster. Sie können zu der Seite navigieren, die Sie ändern möchten.

Öffnen Sie nun Developer Tools, Inspector, über das Menü Tools in Firefox oder das Menü View in Chrome.

Klicken Sie auf Inspektor, um den Werkzeugbereich zu öffnen.

Sie können jedes Inline-Stilelement auf Ihrer Seite auswählen, indem Sie den Auswahlpfeil oben links im Werkzeugbereich verwenden.

Bewegen Sie den Cursor über Ihre Seite, um ein Element auszuwählen. Oder Sie klicken einzelne Elemente in der Liste an.

Jedes Element, das Sie auswählen, wird in Ihrer Browseransicht Ihrer Webseite blau hervorgehoben angezeigt.

Jetzt können Sie Änderungen am Aussehen Ihrer Seite vornehmen.

Verwenden des CSS-Selektors

In meinem Beispiel werde ich das Aussehen des H2-Titelelements ändern.

Sie können das H1-Element, den Fließtext oder eine Bildunterschrift ändern.

Ich möchte damit beginnen, die Schriftgröße zu ändern. Alles, was Sie tun müssen, ist, in die Schriftgröße des Stil-Tags zu klicken und die Zahl zu ändern.

Ich habe die Größe von 33px auf 56px geändert. Sie können sehen, dass die Größe der Überschrift jetzt größer ist.

Mach dir keine Sorgen. Sie haben Ihre Live-Blog-Seite nicht geändert. Was Sie in Ihrem Browserbereich sehen, ist nur eine Vorschau Ihrer Änderungen.

Sie können mit jedem HTML-Element beliebig herumspielen.

Alles, was Sie im Browserbereich sehen, ist nur eine Vorschau dessen, wie Ihre Änderungen an einer CSS-Regel aussehen werden.

Jetzt möchte ich die Farbe des Textes ändern.

Wenn Sie auf den Farbpunkt zwischen Farbtag und Zahl klicken, öffnen Sie die Farbauswahl.

Wählen Sie nun einfach die Farbe aus, die Sie verwenden möchten.

Es ist einfach, die Farbe Ihres HTML-Attributs zu ändern. Hier habe ich von schwarz auf blau gewechselt.

Es sieht gut aus, aber die Zeilenhöhe könnte besser sein. Ich werde es ändern.

Die aktuelle Einstellung ist 1,2, was zu viel Abstand zwischen den Zeilen ist. Ich möchte, dass die Linien näher beieinander liegen.

Also werde ich es auf 1.0 ändern.

Das sieht viel besser aus.

Ich habe drei Änderungen an der Darstellung meiner H2-Überschrift im Vorschaumodus vorgenommen. Ich habe die Schriftgröße, die Farbe und den Zeilenabstand geändert.

Jetzt ist es an der Zeit, diese Änderungen zu meiner Live-Site hinzuzufügen.

So erhalten Sie den Code für Ihre Website

Sie müssen die geänderten Codezeilen kopieren.

Wählen Sie den gesamten Code aus und kopieren Sie ihn. Stellen Sie sicher, dass Sie alle Zeilen einschließlich der letzten Klammer kopieren.

Fügen Sie es nun in einen Texteditor ein. Sie können Notepad auf einem PC oder Texteditor auf einem Mac verwenden.

Die andere Änderung, die wir vorgenommen haben, betraf die Farbe. Auch diese Zeile müssen wir kopieren.

Sie müssen nur die Linie für die Farbe kopieren.

Sie können sehen, dass das H2-Element im obigen Bild fett gedruckt ist. Das bedeutet, dass es dasselbe Pseudoelement wie unser erster Code ist. Sie können sie also zusammen verwenden.

Kopieren Sie die Zeile.

Fügen Sie nun die Zeile zu Ihrem Texteditor hinzu.

Möglicherweise müssen Sie einige Leerzeichen hinzufügen oder entfernen, damit Ihre Farblinie gleich eingerückt ist.

Jetzt können Sie diese drei Änderungen zu Ihrer Live-Site hinzufügen.

Fügen Sie den Code zu Ihrer Website hinzu

Gehen Sie zu Ihren Themenoptionen und wählen Sie Ihre CSS-Optionen aus.

In WordPress-Themes befindet es sich im Theme Customizer und heißt Additional CSS oder Custom CSS.

Auf anderen Blogging-Plattformen wird es ähnlich heißen.

Kopieren Sie nun den gesamten Code aus Ihrem Texteditor und fügen Sie ihn in Ihren Customizer-Tab ein.

Sobald Sie den Code einfügen, zeigt Ihnen Ihre Vorschau die vorgenommenen Änderungen an.

Klicken Sie auf „Veröffentlichen“, und Sie haben es geschafft.

Hier ist ein Vergleich von vor und nach meinen Änderungen.

Sie können noch viel mehr tun

Meine CSS-Tipps für Anfänger – eine schrittweise Einführung in die Bearbeitung Ihres HTML-CSS-Stylings ist nur der Anfang.

Sie können so viel mehr tun, wenn Sie experimentieren und versuchen möchten, andere Elemente zu ändern.

Es ist einfach, Rahmen oder Schatten zu Bildern hinzuzufügen, Text nach links oder rechts zu verschieben oder die Breite Ihres Haupttexts zu ändern.

Sie können Ränder verschieben oder die Auffüllung verringern oder erhöhen und die Ausrichtung ändern.

Es gibt Hunderte von Optionen, die Sie bearbeiten können.

Denken Sie daran, dass Sie Ihre Website nicht beeinträchtigen, wenn Sie in den Entwicklertools arbeiten.

Alle Änderungen, die Sie vornehmen, sind eine Vorschau und nur in diesem Browserfenster sichtbar.

Es spielt keine Rolle, was Sie versuchen, oder ob es funktioniert oder nicht.

Betrachten Sie es als einen Spielplatz, auf dem Sie lernen, wie viel mehr Sie tun können, um Ihre Website oder Ihren Blog zu gestalten.

Seien Sie neugierig, und Sie werden viel Spaß beim Erlernen dieser neuen Fähigkeit mit diesen CSS-Tipps für Anfänger haben.

Ein großer Bonus-Tipp mit Developer Tools

Jetzt, da Sie Ihren Developer Tools-Frame geöffnet haben, können Sie eine sehr nette Sache tun.

Sie können die Geschwindigkeit Ihrer Website testen.

Alles, was Sie tun müssen, ist auf die Registerkarte Netzwerk zu klicken.

Klicken Sie dann auf STRG + R.

Sie sehen Ihre vollständig geladene Seitengeschwindigkeitszeit in Rot auf der Linie unten, die mit dem Pfeil markiert ist.