Hey! Ich weiß, es ist nicht immer einfach mehr Besucher & Kunden zu generieren und ich hatte die gleichen Probleme! Wenn du bereit bist zu checken, ob du Hilfe von mir erhalten kannst, dann bewirb dich jetzt auf deinen Strategie-Call.
CSS ist die Programmiersprache, mit welcher man das Design einer Webseite gestalten kann.
CSS funktioniert nur im Zusammenhang mit HTML.
Denn man bestimmt das Design der Bausteine aus HTML.
Zusammenhang von CSS und HTML
Die Sektionen in HTML können alle einzeln oder auch gruppiert mit CSS gestylt werden.
Einzeln stylen
Man kann in-line direkt CSS-Code eingeben beim HTML-Code. Das macht man mit dem Tribut style="...". Innerhalb der Anführungszeichen "" kann man dann seinen CSS-Code einfügen.
Hier ein Beispiel ohne CSS:
"<div><p>Das ist ein Beispielparagraph.</p></div>"
Hier ein Beispiel mit CSS:
"<div style="width: 300px"><p style="font-size:15pt">Das ist ein Beispielparagraph.</p></div>"
Damit bestimmt man eine feste Breite von 300 Pixeln der Sektion (div) und eine Schriftgröße von 15pt des Paragraphs.
Gruppiert stylen
Man kann aber auch ganze Gruppen von Elementen stylen, ohne bei jedem Attribut immer die gleichen Linien von Code einzufügen.
Das geht dann über sogenannten Klassen oder ids.
Hier dasselbe Beispiel von oben:
"<div><p>Das ist ein Beispielparagraph.</p></div>"
Doch dieses Mal geben wir dem paragraph eine Klasse, welche wir dann wiederholt einfügen können.
"<div class="Giraffe"><p>Das ist ein Beispielparagraph.</p></div>"
Man hat jetzt zwar mehrere Möglichkeiten, aber meistens ergibt es jetzt am meisten Sinn in das generelle StyleSheet bzw. CSS-File der Webseite zu gehen, damit man diese Klasse überall abrufen kann.Bei Chimpify findet man das hier:
In dieser CSS Datei spricht man dann seine Giraffen Klasse mit einem Punkt an.
".Griaffe { width=300px; font-size=15pt; color: red; background-color: black}"
Damit erzeugt man auch die 300 Pixel Breite und Schriftgröße von 15pt. Zusätzlich dazu gibt es noch die Textfarbe Rot und die Hintergrundfarbe Schwarz.
Man kann auch eine ID ansprechen mit dem Hashtag #.
Hier ein kurzes Beispiel dazu:
HTML = "<div id="Giraffe"><p>Das ist ein Beispielparagraph.</p></div>"
CSS = "#Griaffe {width=300px; font-size=15pt; color: red; background-color: black}"
Das Coole daran ist, dass man ab jetzt nur noch die class einfügen muss und egal wo auf der Webseite, dieses div wird immer die gleichen Eigenschaften haben, das spart enorm viel Zeit.
Beachte die Groß- und Kleinschreibung dabei immer und setze auch ein Semikolon; nach einem Befehl.
Zusammenhang von CSS & SEO
Der Zusammenhang von CSS und SEO ist relativ einfach. Man muss seine Webseite so gestalten, dass man die maximale UX (User Experience = Nutzererlebnis) produziert.
Denn ein wichtiger Rankingfaktor von Google ist das Nutzererlebnis auf deiner Webseite. Das ist konstant immer wichtiger geworden von Google Update zu Update.
Vor allem seit die Core Web Vitals in den Vordergrund gerückt sind, ist das Thema CSS wichtiger denn je, denn deine Webseite muss gut auf den Leser abgestimmt sein.
Wichtigsten Bausteine von CSS
Behandeln wir nun die häufigsten CSS-Bausteine und deren Bedeutung:
- width & height = Breite & Höhe eines Elements ( Hier mehr dazu)
- text = Attribute eines Texts (Hier mehr dazu)
- background = Der Hintergrund eines Elements (Hier mehr dazu)
- border = Der Rand eines Elements (Hier mehr dazu)
- margin = Abstände außen - top, bottom, left oder right (Hier mehr dazu)
- padding = Abstände innen - top, bottom, left oder right (Hier mehr dazu)
- color = Farbe eines Elements (Hier mehr dazu)
- font = Die Schrift eines Texts (Hier mehr dazu)
- position = Die Position eines Elements (Hier mehr dazu)
Wenn du mehr zum Thema CSS lernen möchte, dann empfehle ich dir den CSS Course von GoSkills.
Dort erfährst du alles, was du wissen musst, um durchzustarten.
Was denkst du?