CSS

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:

CSS Datei finden 1

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.


Sende mir eine Einladung

Du bist bereit Hilfe anzunehmen?

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.
Mehr Kunden bekommen

Noch keine Kommentare vorhanden

Was denkst du?