Wie man eigenes CSS zu jeder Website hinzufügt — ein Leitfaden für Einsteiger
Sie möchten ändern, wie eine Website aussieht — ein lästiges Element ausblenden, eine unleserliche Schrift korrigieren oder ein beengtes Layout verbreitern? Dieser einsteigerfreundliche Leitfaden zeigt Ihnen, wie man eigenes CSS zu jeder Website hinzufügt, behandelt die ehrlichen Vor- und Nachteile jeder Methode und endet mit einer praktischen Anleitung, der Sie noch heute folgen können.
Was „eigenes CSS" eigentlich bedeutet
Jede Webseite ist mit CSS gestaltet — Cascading Style Sheets — Regeln, die Farben, Schriften, Abstände und Layout steuern. „Eigenes CSS" bedeutet Ihr eigenes zusätzliches CSS, das über das der Seite gelegt wird und nur in Ihrem Browser angewendet wird. Die Seite ändert sich für niemanden sonst. Sie hacken nichts; Sie passen an, wie die Seite Ihnen präsentiert wird, ähnlich wie der Lesemodus oder ein Werbeblocker.
Methode 1 — DevTools (vorübergehend, ideal zum Testen)
Jeder moderne Browser hat integrierte Entwicklertools. Drücken Sie F12 (oder klicken Sie mit der rechten Maustaste auf ein Element und wählen Sie „Untersuchen"). Im Styles-Panel können Sie CSS live bearbeiten und das Ergebnis sofort sehen.
Der Haken: Es ist vorübergehend. Sobald Sie die Seite neu laden, wird alles zurückgesetzt. DevTools ist perfekt, um herauszufinden, welches CSS Sie wollen, aber es ist kein Weg, eine Änderung zu behalten.
Methode 2 — die integrierten Werkzeuge des Browsers
Einige Browser erlauben es, ein eigenes Stylesheet zu speichern, und der Lesemodus reduziert eine Seite auf Text. Diese sind für eng gefasste Fälle in Ordnung, aber sie sind begrenzt: Der Lesemodus ist Alles-oder-nichts, und ein globales eigenes Stylesheet kann nicht ohne Weiteres eine Seite anders ansprechen als eine andere.
Methode 3 — ein Userstyle oder eine Erweiterung (dauerhaft)
Um eine Änderung zu machen, die über Neuladevorgänge hinweg bestehen bleibt und automatisch auf ausgewählte Seiten angewendet wird, brauchen Sie eine Erweiterung, die CSS für Sie einfügt. Das ist die praktische Antwort für die meisten Menschen. Reine CSS-Werkzeuge gibt es (behandelt in unserem Leitfaden zu Stylish-Alternativen), und es gibt Werkzeuge, die CSS und JavaScript zusammen handhaben. Wir gehen eines der Letzteren durch, JustZix, weil es kostenlos ist und kein Konto braucht.
Zuerst — den richtigen Selektor finden
Bevor Sie etwas gestalten können, müssen Sie es im CSS benennen — das ist ein Selektor. Klicken Sie mit der rechten Maustaste auf das Element, das Sie ändern wollen, und wählen Sie „Untersuchen". Schauen Sie sich im hervorgehobenen HTML die class oder id des Elements an:
<div class="newsletter-popup" id="signup-modal">
... popup content ...
</div>Eine class wird mit einem Punkt geschrieben — .newsletter-popup. Eine id wird mit einer Raute geschrieben — #signup-modal. Das sind Ihre Selektoren.
Anleitung — eigenes CSS mit JustZix hinzufügen
- Installieren Sie die Erweiterung von der Download-Seite (es dauert etwa zwei Minuten; kein Konto).
- Öffnen Sie die Seite, die Sie gestalten möchten.
- Klicken Sie auf das JustZix-Symbol und wählen Sie Neue Regel.
- Legen Sie ein URL-Muster fest, damit die Regel nur dort läuft, wo Sie es wollen:
https://example.com/*— die gesamte Seitehttps://example.com/blog/*— nur der Blog-Bereich*— jede Seite (sparsam verwenden)
- Öffnen Sie das CSS-Panel und fügen Sie Ihr CSS ein.
- Speichern Sie. Die Regel wird sofort angewendet und jedes Mal, wenn Sie eine passende Seite erneut besuchen.
Beispiel 1 — ein Element ausblenden
Die häufigste Bitte: etwas verschwinden lassen. Newsletter-Pop-up, klebrige Kopfzeile, Seitenleiste:
/* Hide a newsletter pop-up and its dark overlay */
.newsletter-popup,
#signup-modal,
.modal-backdrop {
display: none !important;
}
/* Some pop-ups freeze scrolling — restore it */
html, body {
overflow: auto !important;
}Das Schlüsselwort !important teilt dem Browser mit, dass Ihre Regel über dem eigenen CSS der Seite gewinnt. Sie werden es oft brauchen, wenn Sie ein bestehendes Design überschreiben.
Beispiel 2 — für Lesbarkeit umgestalten
Machen Sie einen Artikel angenehm zu lesen — größerer Text, mehr Zeilenabstand, eine schmalere Spalte:
/* Comfortable reading column */
article, .post-content {
max-width: 720px !important;
margin: 0 auto !important;
font-size: 19px !important;
line-height: 1.75 !important;
}Beispiel 3 — eine schnelle dunkle Anpassung
Ein einfacher dunkler Hintergrund für eine grell weiße Seite:
/* Minimal dark tweak */
html, body {
background: #1a1a1a !important;
color: #e0e0e0 !important;
}
a { color: #6db3f2 !important; }Vollständige dunkle Themes werden aufwendiger — viele Elemente sind umzufärben — aber dies reicht, um einer hellen Seite die Schärfe zu nehmen.
Tipps für CSS, das nichts kaputtmacht
- Ausblenden statt löschen.
display: noneist umkehrbar — deaktivieren Sie einfach die Regel. - Grenzen Sie Ihre Regeln ein. Ein spezifisches URL-Muster schlägt
*— es vermeidet Überraschungen auf nicht verwandten Seiten. - Testen Sie zuerst live. Nutzen Sie das CSS-Panel im Tab oder die DevTools, um einen Selektor zu bestätigen, bevor Sie ihn speichern.
- Vermeiden Sie zu weit gefasste Attribut-Selektoren wie
[class*="box"]— sie können weit mehr treffen, als Sie beabsichtigen.
Das CSS-Panel von JustZix im Tab ist hier praktisch: Sie bearbeiten, die Seite aktualisiert sich beim Tippen, und wenn es richtig aussieht, speichern Sie es als Regel. Den Rest des Werkzeugkastens finden Sie auf der Funktionsseite.
Siehe auch
Bereit, Ihr eigenes CSS dauerhaft zu machen? JustZix ist kostenlos und in wenigen Minuten installiert — holen Sie es sich von der Download-Seite und erstellen Sie noch heute Ihre erste Regel.
Bewerte diesen Beitrag
Noch keine Bewertungen — sei der Erste.