10 einfache Tipps zum Erlernen von CSS für WordPress

CSS zu lernen kann überwältigend sein, besonders wenn Sie nicht wissen, wo Sie anfangen sollen und nach welchen Begriffen Sie suchen müssen, wenn Sie nicht weiterkommen.

Da CSS eine Stilsprache und keine vollwertige Programmiersprache wie Javascript oder PHP ist, ist es eigentlich ziemlich einfach zu lernen, besonders wenn Sie über einige HTML-Kenntnisse verfügen (von denen ich annehme, dass Sie sie für die Zwecke dieses Beitrags haben).

In unserer Blog-Umfrage hat eine überwältigende Anzahl von Ihnen erwähnt, dass Sie Ihr Spiel verbessern und sich besser mit CSS vertraut machen möchten. Aus diesem Grund haben wir kürzlich eine Liste mit über 150 Ressourcen zum Erlernen von CSS veröffentlicht, die Ihnen den Einstieg erleichtern sollten, insbesondere in Verbindung mit dieser Beitrag.

Heute zeige ich Ihnen den Arbeitsablauf und die Tipps, die mir geholfen haben, CSS zu lernen, als ich vor vielen Jahren anfing. Beginnen Sie mit Tipp eins und arbeiten Sie sich die Liste bis zur Beherrschung von CSS vor.

Lesen Sie weiter oder springen Sie mit diesen Links weiter:

• Grundkonstruktion
• Üben Sie mit einfachen Selektoren und Eigenschaften
• Merken Sie sich das Box-Modell
• Lerne beim machen
• Inhalte nach Breite und Höhe anordnen
• Schwimmer und Positionierung
• Erweitertes CSS
• Replizieren Sie eine Site mit CSS
• Präprozessoren
• Rahmen

1. Grundkonstruktion

Das Wichtigste zuerst: Um zu lernen, wie man sein eigenes CSS schreibt, muss man wissen, wie man es richtig formatiert. Es gibt eigentlich zwei richtige Möglichkeiten, dies zu tun, aber eine davon hilft Ihnen, besser organisiert zu bleiben.

Da es üblich ist, dass HTML die erste Sprache ist, die Menschen lernen, wenn sie mit WordPress-Sites arbeiten möchten, hilft es, die CSS-Syntax zu lernen, indem man sie zunächst auf ähnliche Weise wie HTML schreibt.

Hier ist die grundlegende Struktur, die CSS annimmt:

Es ist einfach genug, wenn es nicht viele Stile gibt, die Sie für ein Element auf Ihrer Website implementieren möchten, aber wenn Sie beginnen, sich mit CSS vertraut zu machen, werden Sie viel mehr als einen Stil für ein Element benötigen, und hier ist ein Strukturen wie diese können schnell chaotisch werden.

Aus diesem Grund gibt es eine effizientere und organisiertere Möglichkeit, Ihr CSS zu schreiben:

Jetzt können Sie anfangen, sich mit den Begriffen zu befassen, die in diesem Beispiel verwendet werden. Jeder dieser Begriffe sind die Grundbausteine ​​von CSS: Klasse, ID, Selektor, Eigenschaft und Wert. Die Eigenschaften und Werte bilden auch eine sogenannte Deklaration.

Dies ist ein großartiger Ausgangspunkt, um zu lernen, wie man sein eigenes CSS schreibt, und wenn man einmal angefangen hat, fragt man sich vielleicht, wo man das alles in seinen WordPress-Dateien aufschreiben soll.

In Ihrer WordPress-Installation ist jede Datei, die auf .css endet, eine CSS-Datei, wie Sie wahrscheinlich bereits erraten haben. Die Hauptdatei, nach der Sie suchen müssen, ist Ihr Stylesheet und trägt die Bezeichnung style.css . Hier wird der größte Teil oder das gesamte Design Ihres Designs in Bezug auf Farben, Schriftarten, grundlegende Bilder und möglicherweise einige Layouts Ihres Designs gespeichert.

Möglicherweise bemerken Sie auch eine Datei in einem vorgefertigten Design namens custom.css , und hier möchten sie normalerweise, dass Sie Änderungen am Design vornehmen. Wenn Sie Änderungen an dieser Datei vornehmen, sollten die vorhandenen Stile im Stylesheet des Designs überschrieben werden.

Wenn Sie Plugins zu Ihrem Design hinzufügen, können diese auch CSS-Dateien in ihrem Ordner enthalten und sie werden verwendet, um das Aussehen und Verhalten des Plugins zu gestalten.

2. Üben Sie mit einfachen Selektoren und Eigenschaften

Als nächstes lernen Sie grundlegende Selektoren und Eigenschaften kennen und wie sie in einem Thema funktionieren. Selektoren wie beispielsweise h1 , h2 und h3 für Überschriften und p für Absatztext sowie Eigenschaften wie font-family und background-color .

Es gibt eine einfache Möglichkeit, diese neuen Fähigkeiten zu üben und die Änderungen, die Sie vornehmen, tatsächlich zu sehen, ohne Ihren eigenen WordPress-Blog starten zu müssen. W3Schools hat eine Menge Informationen zu CSS sowie Live-Beispiele, in denen Sie ihren Code ändern können, und mit einem Knopfdruck können Sie die von Ihnen vorgenommenen Änderungen sofort sehen.

Wenn Sie ein Beispiel sehen, klicken Sie einfach auf die Schaltfläche Probieren Sie es selbst aus und es öffnet sich ein Fenster, in dem Sie einige grundlegende CSS testen können.

3. Merken Sie sich das Box-Modell

Ich bin ein Befürworter dafür, auf die häufigsten Informationen zu verweisen, anstatt sie alle auswendig zu lernen. Vielleicht liegt es daran, dass mein Gedächtnis die meiste Zeit zu schwach ist, aber ich würde eher sagen, es liegt daran, dass es so viele wunderbare Referenzen online gibt.

Sie können innerhalb eines Herzschlags ganz einfach Selektoren und Eigenschaften nachschlagen, die Sie nicht kennen. Alles, was Sie brauchen, ist eine einfache Anfrage bei Ihrer bevorzugten Suchmaschine wie Google oder Bing und alle Informationen, die Sie benötigen, sind nur einen Klick von dort entfernt.

Zum Glück ist es nicht schwer zu lernen und ganz ehrlich, wenn ich es mir merken kann, solltest du auch kein Problem damit haben. Im Wesentlichen enthält es einen Inhaltsbereich, Polsterung, Rahmen und Rand.

4. Lernen durch Handeln

Sobald Sie anfangen, sich mit CSS vertraut zu machen, ist es eine großartige Idee, es tatsächlich in die Praxis umzusetzen, indem Sie ein Thema auswählen, das ein völlig einfaches Design hat, und seinen Stil ändern, indem Sie sein Stylesheet bearbeiten.

Es ist wichtig zu verstehen, wie einfache Änderungen ein Thema manchmal drastisch und manchmal weniger stark beeinflussen können. Letztendlich hilft Ihnen das Üben so viel wie möglich dabei, die von Ihnen vorgenommenen Änderungen visuell zu sehen und Ihre Aktionen beim Schreiben von Code mit dem Endergebnis zu verbinden.

Im Großen und Ganzen können Sie, sobald Sie in der Lage sind, die Punkte zu verbinden, nicht nur schnell CSS schreiben, sondern Sie sollten auch in der Lage sein, Probleme in Zukunft zu beheben, was zu einer kritischen Aufgabe für Webdesign und -entwicklung wird.

Hier sind einige hervorragende Themen zum Üben, die Sie kostenlos auf Ihrer WordPress-Seite installieren können. Nicht alle stellen perfekt dar, wie ein Design unbedingt aussehen und funktionieren sollte, aber sie sind alle großartige Ausgangspunkte, um zu lernen, wie Sie ein Design mit einfachem CSS ändern können.

Weißes Spektrum

Das White Spektrum-Design ist ein einfaches Design mit einem gemeinsamen Layout, das den Hauptinhaltsbereich, die Seitenleiste, die Kopf- und Fußzeile umfasst.

Abgesehen von einem Farbtupfer, wenn es um Schriftarten und Links geht, ist es ein schlichtes und einfaches Thema, mit dem man arbeiten kann.

Gründer

Sobald Sie beginnen, CSS wirklich zu verstehen, ist das Founder-Thema großartig, um einen Blick unter die Haube zu werfen und einen Blick auf sein Stylesheet zu werfen, da es etwas komplexer ist als die anderen bisher aufgeführten Themen Hamburger-Symbol für mobile Bildschirme sowie viele andere CSS-Designdetails, die sich hervorragend studieren lassen.

Selbst mit diesen minimalistischen Themen oben fühlen Sie sich vielleicht immer noch ein wenig überwältigt von den vielen Dingen, die Sie noch nicht erkennen, und das ist in Ordnung. Wenn Sie jeden Abschnitt dieses Beitrags abhaken, sollte alles ein bisschen mehr zusammenkommen.

5. Inhalt nach Breite und Höhe anordnen

Sobald Sie eines dieser Designs installiert haben, können Sie auch damit beginnen, das Layout zu ändern, indem Sie unterschiedliche Längen und Breiten von Inhaltsbereichen und Selektoren eingeben.

Es ist eine Vorstufe zum nächsten Schritt und macht Sie mit den verschiedenen Layoutbereichen in einem WordPress-Theme vertraut.

6. Schwimmer und Positionierung

An dieser Stelle wird CSS tendenziell etwas knifflig, da Sie ein Layout nur mit CSS und insbesondere mit Floats und Positionierung erstellen können. Das Problem ist, dass diese Eigenschaften nicht dafür ausgelegt sind, ganze Layouts zu erstellen, und es gibt einen Entwurf, um CSS-Layouts zu aktualisieren.

Im Moment ist dies eine gängige Methode, mit der viele Leute ihr Layout genau richtig hinbekommen . Es ist eine großartige Idee, Themen zu beobachten, die bereits da draußen sind, einschließlich der obigen Liste, und zu sehen, wie sie sich durch die Verwendung von Floats und Positionen unterscheiden.

7. Erweitertes CSS

An diesem Punkt fangen Sie wirklich an, CSS zu beherrschen, aber es gibt noch viel mehr zu entdecken:

• Pseudoklassen – Wird verwendet, um einen bestimmten Zustand eines Elements zu definieren, z. B. beim Bewegen der Maus und beim Positionieren von Bildern an einer bestimmten Stelle, die für andere Elemente relevant ist.
• Komplexe Selektoren – Mit fortgeschritteneren Selektoren können Sie das Styling noch spezifischer gestalten.
• CSS3-Animationen – Erstellen eines Verblassens, Knallens oder anderer Übergänge, wenn Sie mit der Maus über Bilder und Schaltflächen fahren.
• Reaktionsfähigkeit mit CSS3-Medienabfragen – Eine der einfachsten Möglichkeiten, ein responsives Design zu erstellen, ist die Verwendung von Medienabfragen.
• Transforms – Steuert die Größe und Form ausgewählter Inhaltsbereiche.
• At-Regeln – Wird zum Importieren von Dingen wie Schriftarten und Stylesheets in Ihr Design verwendet.
• Farbverläufe – Hinzufügen eines Farbverlaufs zu Ihrem Thema, ohne ein Bild verwenden zu müssen.

Dies sind viele der Elemente, bei denen Sie wirklich sehen können, wie das Design Ihres Themas wirklich Gestalt annimmt. Es ist der perfekte Zeitpunkt, um Ihre Fähigkeiten zu testen.

8. Replizieren Sie eine Site mit CSS

Mit all diesem Wissen auf Ihrem Gürtel müssen Sie sich vielleicht einen robusteren Gürtel anschaffen, aber was noch wichtiger ist, Sie können Ihre Fähigkeiten wirklich in die Praxis umsetzen, indem Sie eine grundlegende Shell eines Themas verwenden und Ihre eigenen CSS-Stile von Grund auf neu hinzufügen.

Eines der hilfreichsten Dinge, die Sie tun können, um Ihr Lernen voranzutreiben, besteht darin, Ihr Wissen in realen Anwendungen anzuwenden. Ich empfehle, zu versuchen, eine Website zu finden, die Ihnen gefällt, und sie dann so gut wie möglich mit CSS auf einem leeren WordPress-Theme zu replizieren.

Sicher, Sie werden wahrscheinlich nicht alles perfekt hinbekommen, und es gibt wahrscheinlich viele Elemente, die Sie nicht nur mit CSS replizieren können, aber es ist eine großartige Möglichkeit, sich mit CSS vertraut zu machen.

Hier sind einige großartige und kostenlose Starter-Designs, die Sie verwenden können:

• Unbeschriebenes Blatt

  

  Das ist so nackt wie es nur geht. In diesem Design gibt es nur HTML5, sodass Sie Ihr CSS frei hinzufügen können, ohne sich Gedanken über kollidierende Stile machen zu müssen. Es enthält jedoch alles, was Sie zum Gestalten Ihres Themas benötigen.

• HTML5 leer

  

  HTML5 Blank ist ein Boilerplate-WordPress-Theme, das zwar etwas Styling enthält, aber nicht viel. Es ist ein guter Anfang, wenn Sie nicht allzu scharf darauf sind, Ihr CSS von Grund auf neu zu starten.

• Unterstriche

  

  Wenn Sie ein bisschen abenteuerlustig sind und ein fortgeschritteneres Einstiegsthema ausprobieren möchten, ist Underscores eine ausgezeichnete Option, jedoch nichts für schwache Nerven, da es mit zwei vorinstallierten Themenbeispielstilen geliefert wird. Es enthält auch einige fortgeschrittene Techniken und Codierung, die es zu einem großartigen Lernwerkzeug machen.

Es gibt auch das HTML5 Reset WordPress Theme auf GitHub. Es enthält Funktionen, die etwas fortgeschrittener sind, aber das macht es letztendlich zu einem wertvollen Einstiegsthema.

9. Präprozessoren

Sobald Sie die Vor- und Nachteile von CSS kennen, ist es eine gute Idee, etwas über Präprozessoren und insbesondere SASS und LESS zu lernen. Beide helfen dabei, Ihr CSS zu organisieren, sodass es viel einfacher zu schreiben und für zukünftige Bearbeitungen besser zugänglich ist.

Präprozessoren machen Ihr CSS sauber und leicht verständlich und es ist schnell zu einer wesentlichen Fähigkeit unter Webentwicklern geworden. Während es eine anhaltende Debatte darüber gibt, welcher der beste ist, ist SASS tendenziell der Präprozessor, der bis heute am häufigsten verwendet wird.

Wenn Sie SASS im Kontext von WordPress ausprobieren möchten, sehen Sie sich das Thema Bones an. Es besteht hauptsächlich aus HTML5, sodass Sie versuchen können, das Design mit dem integrierten Teil von SASS zu gestalten, das bereits enthalten ist.

10. Rahmen

In der Webentwicklung sind Frameworks eine Struktur zur Erstellung dynamischer Websites. Letztendlich besteht das Ziel eines Frameworks darin, Websites schneller zu machen, ohne an Funktionalität einzubüßen.

Sobald Sie CSS im Griff haben, können Sie Ihre Themenentwicklung beschleunigen, indem Sie ein Framework verwenden.

Eines der beliebtesten Frameworks ist Twitter Bootstrap. Es ist so konzipiert, dass es sofort einsatzbereit ist und sowohl SASS als auch LESS sowie viele benutzerdefinierte CSS-Komponenten verwendet.

Einpacken

Ausgestattet mit einem Lehrplan zum Lernen und mit den Tipps, die Ihnen dabei helfen, sollte CSS nicht zu überwältigend sein, damit Sie es in den Griff bekommen. Außerdem sollten Sie jetzt bereit sein, sich an der Gestaltung Ihres eigenen WordPress-Themas zu versuchen.

Weitere Ressourcen zum Erlernen von CSS und WordPress finden Sie in einigen unserer anderen Beiträge: A Mega Guide to Learning and Referencing CSS for WordPress: 150+ Resources und From WordPress Beginner to Pro: 200+ Career-Boosting Resources.

• CSS