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

Wie w├Ąre es mit einer kostenlosen Beratung?

Ich w├╝rde liebend gerne Ihre Firma / Blog und die derzeitigen Probleme kennenlernen. Ich bereite vor dem Anruf meine ersten Ideen vor und ├╝berlege mir eine passende Strategie je nach Budget und Zeit. Bitte f├╝llen Sie das Formular sauber aus, danach gibt es kostenfreie Tipps von mir!
Jetzt Termin sichern

Noch keine Kommentare vorhanden.

Was denkst du?