10 CSS-Regeln für Joomla-Einsteiger
Mit wenigen, gezielten CSS-Regeln lassen sich Lesbarkeit, Struktur und Design einer Joomla-Website deutlich verbessern, ohne tiefgehende Programmierkenntnisse.
Template: Joomla 6 · Template: cassiopeia_extended)
👉 Speicherort für alle Beispiele:
/templates/cassiopeia_extended/css/user.css
1. Hintergrundfarbe der Website ändern
body {
background-color: #ffffff; /* Weiß */
}
Nutzen: Ruhiges, sauberes Grundlayout.
2. Textfarbe allgemein festlegen
body {
color: #212529; /* Dunkelgrau */
}
Nutzen: Bessere Lesbarkeit als reines Schwarz.
3. Überschriftenfarbe (h1–h3)
h1, h2, h3 {
color: #0d6efd; /* Blau */
}
Nutzen: Einheitliches, professionelles Erscheinungsbild.
4. Schriftgröße für Fließtext anpassen
p {
font-size: 16px; /* Standardgröße */
}
Nutzen: Optimale Lesbarkeit auf Desktop & Mobil.
5. Zeilenabstand verbessern
p {
line-height: 1.6; /* Angenehmer Zeilenabstand */
}
Nutzen: Text wirkt ruhiger und übersichtlicher.
6. Linkfarbe ändern
a {
color: #0d6efd; /* Blau */
}
Nutzen: Klare Erkennbarkeit von Links.
7. Linkfarbe beim Darüberfahren (Hover)
a:hover {
color: #084298; /* Dunkelblau */
}
Nutzen: Besseres Nutzerfeedback.
8. Abstand unter Überschriften
h2 {
margin-bottom: 15px; /* Abstand unten */
}
Nutzen: Strukturierter Seitenaufbau.
9. Inhaltsbereich optisch absetzen
.container {
background-color: #f8f9fa; /* Sehr helles Grau */
}
Nutzen: Inhalte heben sich vom Hintergrund ab.
10. Mobile Schriftgröße leicht erhöhen
@media (max-width: 768px) {
body {
font-size: 17px; /* Größer auf Smartphones */
}
}
Nutzen: Gute Lesbarkeit auf kleinen Bildschirmen.