### [CSS-Problembehebung](https://wpforms.com/docs/how-to-troubleshoot-css-not-working/)
**Veröffentlicht:** 23. November 2023
**Autor:** Umair Majeed
**Auszug:** Erfahren Sie, wie Sie CSS-Probleme bei Ihren Formularen beheben, damit diese korrekt angezeigt werden.
**Inhalt:**
Haben Sie benutzerdefiniertes CSS für Ihre Formulare erstellt, konnten aber diese Stile nicht sehen, wenn Sie Ihre Website besuchen? Es gibt einige häufige Probleme, die dazu führen können, dass CSS auf einer Website nicht korrekt angezeigt wird.
Diese Anleitung führt Sie durch die Optionen zur Fehlerbehebung, warum Ihr CSS nicht funktioniert, und bietet mögliche Lösungen.
---
**Hinweis:** Wenn Sie lieber kein benutzerdefiniertes CSS zur Gestaltung Ihrer Formulare verwenden möchten, sollten Sie sich unsere [Formulargestaltung](https://wpforms.com/docs/styling-your-forms/)-Anleitung ansehen, um zu erfahren, wie Sie Ihre Formulare im Block-Editor gestalten können.
### Browser-Caching
Browser cachen oder speichern temporär Ressourcen von Websites, die Sie besuchen, um die Ladezeit zu verbessern. Einige Websites verwenden auch Plugins für zusätzliches Caching. Wenn Sie Ihre benutzerdefinierten Stile auf Ihrer Website nicht sehen, liegt das oft daran, dass der Browser oder ein anderes System eine ältere Version Ihrer Website zwischengespeichert hat.
Hier ist eine Anleitung, die Sie durch die wichtigsten Schritte zum [Löschen Ihres Website- und Plugin-Caches](http://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/ "How to Clear Your Cache in WordPress") führt.
Wenn das Löschen Ihres Browser-Caches nicht zu funktionieren scheint, gibt es hier ein paar zusätzliche Strategien, die Sie ausprobieren können:
#### Einen anderen Browser ausprobieren
Jeder Browser speichert seinen Cache der von Ihnen besuchten Websites. Indem Sie Ihre Website in einem anderen Browser (oder im privaten Modus, den einige Browser anbieten, wie z. B. das Inkognito-Fenster von Chrome) öffnen, können Sie oft eine nicht zwischengespeicherte Version Ihrer Website sehen.
#### Ihren Hoster fragen, ob er einen Cache hat
Einige Hoster bieten Caching für Ihre Website direkt auf ihren Servern an, wo die Dateien Ihrer Website gespeichert sind. Wenn Sie sich nicht sicher sind, sollten Sie sich an Ihren Hoster wenden, um zu fragen, ob er Ihre Website zwischenspeichert, und wenn ja, bitten Sie ihn, diesen Cache für Sie zu löschen.
#### Eine andere Internetverbindung ausprobieren
Gelegentlich kann das Laden Ihrer Website über eine andere Internetverbindung helfen, einen bestehenden Cache zu umgehen. Wenn Sie ein Mobilgerät mit verfügbaren Daten haben, ist der einfachste Weg, WLAN auf Ihrem Gerät vorübergehend auszuschalten und die Seite neu zu laden.
### Ungültiges CSS-Format
CSS muss in einem bestimmten Format geschrieben sein, damit ein Browser es verstehen kann. Es gibt viele Online-Tools, um zu überprüfen, ob Ihr CSS gültig ist, einschließlich des [CSS-Validators von W3School](http://validator.w3.org/ "W3C Markup Validation Service"). Dies ist eine ausgezeichnete Option, wenn Sie viel benutzerdefiniertes CSS haben und zumindest ein wenig Vorerfahrung mit der Erstellung von CSS haben.
Wenn Sie jedoch nur eine kleine Menge CSS verwenden, kann es manchmal einfacher sein, eine schnelle Formatprüfung selbst durchzuführen. Beginnen wir mit einem Ausschnitt von gültigem CSS:
```
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 26px;
margin: 0 0 10px 0;
}
```
Hier ist, warum dieses CSS gültig oder für Browser „lesbar“ ist:
- **Korrekte Selektorformatierung:** Wenn der Selektor mehrere Teile enthält, muss er von „größten“ zu „kleinsten“ geschrieben werden. Im obigen Beispiel ist `div.wpforms-container-full` das größte Container-Element in der HTML, während sich `.wpforms-form` innerhalb dieses Containers befindet. Das kleinste und letzte Element im Selektor, `.wpforms-title`, befindet sich innerhalb beider anderer Elemente. In jeder anderen Reihenfolge kann der Browser diesen Selektor nicht lesen.
- **Zwei Klammern:** Direkt nach dem CSS-Selektor und am Ende der Eigenschaften- und Werteliste muss eine öffnende geschweifte Klammer ({) und eine schließende geschweifte Klammer (}) stehen. Das Vergessen dieser schließenden Klammer ist ein häufiger Fehler und verhindert normalerweise, dass alles CSS darunter im Browser angezeigt wird.
- **Doppelpunkt und Semikolon:** Achten Sie darauf, einen Doppelpunkt (:) zwischen jeder CSS-Eigenschaft und jedem Wert sowie ein Semikolon (;) nach jedem Wert einzufügen, damit der Browser Ihr CSS lesen kann (z. B. `font-size: 26px;`).
- **Korrekte Verwendung von Leerzeichen:** Größtenteils ist CSS nicht sehr wählerisch in Bezug auf Leerzeichen (einschließlich Tabs und Leerzeichen). Eine Ausnahme bilden jedoch Einheiten. `26px` funktioniert zum Beispiel, während `26 px` nicht funktioniert.
Weitere Informationen zum Schreiben von CSS mit der richtigen Syntax finden Sie in dieser Anleitung von [W3Schools](https://www.w3schools.com/css/css_syntax.asp "CSS Syntax").
### CSS-Spezifität
Da alle Themes und die meisten Plugins ihre eigenen Stile enthalten, werden Sie oft feststellen, dass Ihre benutzerdefinierten Stile gegen bestehende Stile „konkurrieren“ müssen. In solchen Situationen gewinnt der spezifischere CSS-Selektor fast immer gegenüber einem weniger spezifischen Selektor.
Zum Beispiel hier die Standard-CSS, die die Schriftgröße von Formulartiteln in WPForms festlegt:
```
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 26px;
}
```
Versuchen wir, dieses CSS zu überschreiben, um die Schrift größer zu machen. Es mag verlockend sein, einen kurzen CSS-Selektor wie diesen zu verwenden:
```
.wpforms-title {
font-size: 40px;
}
```
Dieses CSS ist gültig, aber seine Stile werden im Browser nicht übernommen. Die Standardstile werden stattdessen angewendet, da sie einen spezifischeren Selektor haben. Sie müssten stattdessen denselben, längeren Selektor wie für den Standardstil für Ihr benutzerdefiniertes CSS verwenden:
```
div.wpforms-container-full .wpforms-form .wpforms-title {
font-size: 40px;
}
```
**Hinweis:** Weitere Informationen zu Selektoren finden Sie in dieser Liste der [WPForms-Formularfeldselektoren und ihrer Standardstile](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/ "How to Customize the Style of Individual Form Fields").
#### Verwendung von !important in CSS
In einigen Situationen können Sie einen weniger spezifischen CSS-Schnipsel erzwingen, indem Sie die Regel `!important` vor dem Semikolon einfügen. Es ist immer besser, zuerst einen spezifischeren Selektor zu versuchen (wie oben beschrieben), aber manchmal kann dies eine schnelle Lösung bieten.
Es ist jedoch wichtig zu beachten, dass das Hinzufügen der Regel `!important` nicht immer funktioniert. Versuchen wir diesen Ansatz für das CSS, das wir im letzten Beispiel besprochen haben:
```
.wpforms-title {
font-size: 40px !important;
}
```
In dieser Situation bevorzugt der Browser die Spezifität des Standard-CSS gegenüber der `!important`-Regel, sodass dieses CSS nicht auf Ihre Website angewendet wird.
Betrachten wir ein Beispiel, bei dem das Hinzufügen der Regel `!important` *funktioniert*. Standardmäßig ist der Stern (*), der ein „erforderliches“ Feld in WPForms markiert, rot:
Hier ist das CSS, das diesen Stil erstellt (`#ff0000` ist ein Hex-Code für die Farbe Rot):
```
div.wpforms-container-full .wpforms-form .wpforms-required-label {
color: #ff0000;
}
```
Wir möchten, dass diese Sternchen stattdessen blau erscheinen. Wir könnten diesen vollständigen Selektor aus dem obigen CSS kopieren, oder wir könnten einen kurzen Selektor verwenden und die Regel `!important` hinzufügen, wie in diesem CSS-Snippet:
```
.wpforms-required-label {
color: #007acc !important;
}
```
Es kann schwierig sein zu wissen, ob die Regel `!important` funktioniert oder nicht, daher müssen Sie sie wahrscheinlich ausprobieren und testen.
Das ist alles! Wir haben die häufigsten Fehlerbehebungsstrategien abgedeckt, wenn CSS nicht funktioniert. Wenn Sie immer noch Probleme mit der Gestaltung Ihrer WPForms haben, wenden Sie sich bitte [an den Support](https://wpforms.com/contact/ "WPForms Contact Page"), damit wir Ihnen helfen können.
Möchten Sie als Nächstes Ihre Formulare weiter anpassen? Sehen Sie sich [unsere Anleitung zur Anpassung einzelner Formularfelder](https://wpforms.com/docs/how-to-customize-the-style-of-individual-form-fields/ "How to Customize the Style of Individual Form Fields") für Details und Beispiele an.
**Kategorien:** Styling, Styling und Anpassung, Fehlerbehebung
---