CSS einfach erklärt: Die wichtigsten Basics auf einen Blick
CSS ist die Sprache, die auch deiner Website ihr Aussehen verleiht. Ob Farben, Schriftarten, Abstände oder die Frage, was wo auf dem Bildschirm erscheint – all das wird mit CSS geregelt. Ohne CSS wäre jede Seite einfach nur ein Haufen Text und Bilder ohne Design und Formatierung.
In diesem Artikel bekommst du eine einsteigerfreundliche Einführung in die Grundlagen von CSS. Dabei arbeiten wir bewusst mit ein paar Vereinfachungen, damit du schnell verstehst, worum es geht: Wie HTML und CSS zusammenwirken, was Klassen und IDs sind, was es mit Vererbung auf sich hat – und wie du all das nutzen kannst, um das Design deiner Website gezielt zu verändern.
Zudem bekommst du einen Einstieg dazu, wie du CSS bei Squarespace einsetzen kannst, wenn dir die Standard-Einstellungen nicht mehr reichen. Denn mit ein paar gezielten Regeln kannst du oft viel mehr anpassen, als du denkst.
Wenn du also das Gefühl hast, beim Webdesign ein bisschen tiefer einsteigen zu wollen – ohne gleich programmieren lernen zu müssen – bist du hier genau richtig.
Los geht’s!
Inhaltsverzeichnis:
Was ist CSS?
CSS steht für Cascading Style Sheets. Es ist eine Sprache, mit der das Aussehen und Layout von Webseiten gestaltet wird.
Ganz egal mit welchem Website-Builder oder -System eine Website erstellt wurde: Wenn der Besucher mit seinem Browser eine Seite aufruft, erhält der Browser die Website als eine Kombination aus HTML- und CSS-Dateien. Dazu kommen dann vor allem noch Bild- und Videodateien, die auf der Seite angezeigt werden sollen.
Der Aufbau von Webseiten
Über HTML wird festgelegt, welche Inhalte auf der Seite enthalten sind. Eine Website besteht im Grunde aus einer Vielzahl an rechteckigen Elementen, die auf der Seite in-, unter- und nebeneinander angeordnet sind. Diese Rechtecke enthalten zum Beispiel Text oder Bilder.
CSS definiert nun über Regeln, wie diese Rechtecke aussehen sollen. Also wie groß sie sind, welche Hintergrundfarbe oder Hintergrundbild sie haben sollen, welche Schriftart und Farbe der darin enthaltene Text haben soll und so weiter.
Darüber hinaus wird mit CSS festgelegt, welchen Abstand die Rechtecke zueinander und zu ihrem Inhalt haben sollen. Und: Über CSS kann man zum Beispiel auch definieren, dass manche Rechtecke dem Nutzer gar nicht oder nur auf bestimmten Geräten angezeigt werden sollen.
Tatsächlich sind die Gestaltungsmöglichkeiten mit CSS nahezu unbegrenzt und es gibt unzählige Regeln, die du auf deiner Seite nutzen kannst.
Zuordnung von CSS-Regeln zu HTML-Elementen
Damit der Browser weiß, welche CSS-Regeln für welche HTML-Elemente gelten sollen, werden die HTML-Elemente benannt und dann die CSS-Regeln für diese Namen definiert. Hierbei gibt es zwei Möglichkeiten: Namen die nur für ein einziges HTML-Element auf einer Seite gelten nennt man “ID”. Und Namen, die für mehrere HTML-Elemente der Seite gelten nennt man “Class” (Klasse).
Vereinfach gesagt steht in der HTML-Datei dann zum Beispiel:
“EIN RECHTECK (ID=1, CLASS=A)”.
Und in der CSS-Datei:
“1 = Hintergrund: grün & A = Schriftart: Arial.”
Dadurch sieht der Besucher auf der Seite ein grünes Rechteck mit Arial als Schriftart des Textinhalts.
Vererbung von CSS-Regeln
Gibt es auf einer Seite ineinander verschachtelte HTML-Elemente (was ganz normal ist), dann gelten einige CSS-Regeln eines äußeren Rechtecks auch für alle in diesem Rechteck liegende Elemente. Einige CSS-Regeln wie zum Beispiel “Schriftart” werden also vererbt.
Dabei gilt: Die spezifischere Regel “gewinnt”. Hat ein inneres Element also eine Regel, die der Regel eines äußeren Elements widerspricht, so gilt für das innere Element die innere Regel.
Warum sind diese Grundlagen für dich wichtig?
Wenn du deine Website über die durch deinen Website-Builder vorgegebenen Möglichkeiten hinaus anpassen möchtest, kannst du das oft über zusätzliche CSS-Regeln machen. Dafür musst du also herausfinden, wie das HTML-Element, dass du anpassen möchtest, benannt ist. Und dann eine neue CSS-Regel hinzufügen, die diese Anpassung umsetzt.
“Untersuchen”-Funktion deines Browser
Die meisten Browser haben heute eine sogenannte “Untersuchen”-Funktion. Hier beziehen wir uns auf Chrome - viele andere Browser haben aber eine ähnliche Funktion die analog funktioniert.
Um die Untersuchen-Funktion zu öffnen musst du nur auf einer beliebigen Seite die rechte Maustaste einmal drücken und im sich öffnenden Menü “Untersuchen” anklicken. Dann öffnet sich am unteren oder rechten Rand des Browsers ein Fenster, welches sowohl die HTML-Elemente als auch CSS-Regeln der aktuellen Seite anzeigt.
Lass dich nicht davon verwirren, wenn das erst mal richtig kompliziert aussieht.
Klicke auf das “Pfeil-an-getricheltem-Rechteck”-Symbol (ganz links oben im “Untersuchen”-Fenster) und fahre mit der Maus auf der Seite über den Bereich, den du gerne anpassen würdest. Im “Untersuchen”-Fenster wird dir dann direkt hervorgehoben angezeigt, wie dieser Bereich im HTML-Code aussieht. Hier kannst du dann nach “class=” oder “id=” Ausschau halten.
Benutzerdefiniertes CSS einfügen
In deinem Website-Builder gibt es oft die Möglichkeit, benutzerdefiniertes CSS einzufügen. Wie das bei Squarespace geht zeigen wir dir weiter unten im Artikel.
In diesem Bereich kannst du nun CSS-Regeln für bestimmte HTML-Elemente hinzufügen. Mit Hilfe der Element-Benennung (”id” oder “class”) kannst du die Regel dabei auf einzelne oder eine Gruppe von HTML-Elementen beschränken.
Wenn du beispielsweise ein bestimmtes HTML-Element auf der Seite ausblenden möchtest, sieht das mit CSS so aus:
Falls das Element eine ID hat: #ID-DES-ELEMENTS { display: none; }
Falls das Element eine CLASS hat (Achtung, die CSS Regel gilt dann für alle Elemente mit dieser Klasse!): .CLASS-DES-ELEMENTS { display: none; }
Klassen musst du also einen “.” voranstellen, IDs ein “#”.
Wichtig ist, dass in der CSS-Regel kein Fehler ist. Falls die Regel trotz korrekter Schreibweise nicht funktioniert gibt es vermutlich eine andere Regel, die deine neue Regel aufhebt. Um deiner Regel stärkeres Gewicht zu geben, kanns du “!important” hinzufügen. Oftmals klappt es dann.
Das sieht dann für das Beispiel so aus:
#ID-DES-ELEMENTS { display: none !important; }
.CLASS-DES-ELEMENTS { display: none !important; }
CSS und Squarespace
Deine Squarespace-Website enthält natürlich schon richtig viel CSS-Code. Diesen kannst du mit sogenanntem “benutzerdefiniertem CSS” überschreiben oder ergänzen, um deine Seite an deine individuellen Design-Wünsche anzupassen.
Wichtig ist, dass du erst mal versuchst, die Änderung über die Squarespace-Einstellungen umzusetzen. Unter “Stil” kannst du für die meisten - aber nicht alle - Text-Inhalte Schriftgröße, Schriftart und Besonderheiten wie “nur Großbuchstaben” einstellen. Daneben kannst du die Farben vieler Element anpassen.
Nur wenn die von dir gewünschte Anpassung nicht in den Squarespace-Einstellungen vorhanden ist solltest du auf CSS zurückgreifen.
Wo gebe ich benutzerdefiniertes CSS bei Squarespace ein?
CSS-Code kannst du an verschiedenen Stellen einfügen.
Code der für die gesamte Website gelten soll, fügst du am Besten unter Website-Tools > Benutzerdefiniertes CSS (https://DEINE-DOMAIN.squarespace.com/config/pages/website-tools/custom-css) hinzu.
Wenn CSS-Code nur für einzelne Seiten gelten soll, kannst du den Code in den Einstellungen der Seite unter “Erweitert” einfügen. Hier ist es wichtig, dass du den CSS-Code mit “<style>” einleitest und am Ende mit “</style>” abschließt.
Was sollte ich bei benutzerdefiniertem CSS beachten?
Du kannst mit benutzerdefiniertem CSS deine Seiten nicht dauerhaft kaputt machen. Wenn du CSS-Code einfügst und es deine Seite zerschießt, kannst du einfach den kompletten CSS-Code löschen und die Seite ist wieder normal.
Ganz gut zu wissen:
Squarespace speichert keinen Versionsverlauf deines CSS-Codes. Wenn du etwas änderst überschreibt das die aktuelle Version. Wenn also schon benutzerdefiniertes CSS in deiner Seite enthalten ist (zum Beispiel, da du ein gekauftes Template verwendest oder früher schonmal Code eingefügt hast), solltest du den Code kopieren und zum Beispiel in einer Notes-/Word-Datei speichern. Dann kannst du den Code bei Bedarf zurücksetzen.
Nachdem du CSS-Code eingefügt hast solltest du sowohl in der Desktop- als auch der mobilen Version deiner Seiten kontrollieren, ob auch wirklich alles so aussieht, wie du das gerne hättest.
Wenn du deinen Code unter Website-Tools > Benutzerdefiniertes CSS eingibst wird der Code sofort (teilweise mit kurzer Verzögerung) in der Seiten-Vorschau angezeigt. Wenn du in der Seitenvorschau allerdings auf einen Link klickst und die Seite wechselst, wird der CSS-Code nicht sofort auf diese Seite angewendet. Speichere in diesem Fall den Code und aktualisiere die Seite. Dann siehst du die Umsetzung auch auf der neuen Seite.
