Beispiele HTML und CSS Styles im Forum

*CSS Styles im Forum* Das WP Forum - CSS Styles und HTML im Forum	Sportwetten Sportwetten & Wetten Tipps Forum CSS & HTML im Forum

User Tutorial zu CSS Styles & HTML im Forum

Da viele Forum User eigene kleine Homepages haben und im Forum auch häufig Fragen nach CSS Styles
( Cascading Style Sheets ) bzw. Web Styles und HTML Code kamen haben wir uns entschlossen mal
ein kleines Tuturial mit Anleitung und schönen Tips zu machen,
das ist sicher nicht 100%-ig und nicht das gelbe vom Ei, aber vieleicht kann es die
ein oder andere einfache Frage für CSS & HTML Einsteiger beantworten.

Ähnlich wie schon einige Anleitungen und How-Tos in unserem Forum, beispielsweise unsere
Betfair Anleitung und aus dem BF Forum siehe Betfair diesmal halt
mehr in die technische Richtung mit Styles usw.

Wir nehmen jeweils dazu als Beispiel das WP Forum und wie dort die entsprechenden Elemente angewandt wurden.
Es geht hier also darum ein klein wenig Lern Hilfe in Richtung HTML und CSS Styles bei seiner HP zu geben.
Die folgenden Anwendungsbeispiele haben wir zusammengestellt, weil wir sie besonders hilfreich fanden.
Starten wir mit dem CSS lernen hier mal mit ganz, ganz einfach : mit CSS Style Basis Wissen.
Bitte beachten, das diese Hilfe bzw. Lern Seite neu ist und schrittweise mit Wissen gefüllt wird.

Hintergrundfarbe der Seite mit CSS setzen

Angenommen wir wollen mit CSS Code auf einer Seite, hier mal am Beispiel eines Forum Sitemaps
die jewilige die Hintergrund festlegen. Wie (hoffentlich) jeder weiss hat eine HTML Seite das Element Typ BODY.
Wir könnten nun wahlweise 2 Dinge tun :
a) im Quelltext dem Element Body noch ein Attribut STYLE hinzufügen
b) im Header Bereich die Style Anweisungen für Element BODY definieren

CSS Variante a)

<body style="background-color : #9CBECF">

CSS Variante b)

<style type="text/css">

body { background-color : #9CBECF; }

</style>

Text Schriftarten in Grösse, Form und Layout

Text lässt sich mit CSS Stylesheets sehr schön formatieren.
Fangen wir zunächst mit der Änderung der Textgrösse an.
Bei unserem Beispiel handelt es sich um einfachen Text beliebig in einer HTML Seite.

<b style="font-size : 20px">Grosser Text mit Hilfe von CSS</b>

Das sieht dann so aus : Grosser Text mit Hilfe von CSS

Hierbei bedeutet die Angabe hinter font-size px die Grösse des Textes in Pixel.
Solche Formatierungen eignen sich bestens für beispielsweise Überschriften
oder andere gestalterische Elemente, findet so auch bei uns z.B. im Wettforum Verwendung und
das reichlich siehe dem Fussball Forum, Tennis Forum, Eishockey Forum, Racing oder
auch in Sportwetten Strategie, sowie Sportwetten Tipps aber das sind nur einige Foren.

Text Elemente mit Farbe via CSS gestalten

Will man ein Text Element mit Hilfe von CSS farbig gestalten ist dies
ganz einfach möglich, hier an Beispielen eines Textes innerhalb der Seite.

<b style="background-color : #cc0000">Formatierter Text mit Hilfe von CSS</b>

Das sieht dann so aus : Formatierter Text mit Hilfe von CSS

Das background-color steht dabei für die Hintergrundfarbe des Textbereiches.
Ersetzt man hingegen background-color durch color kann man dem Text selbst Farbe
geben, statt dem Hintergrund. Standardmässig hat der Text,
wenn nicht anders definiert die Farbe schwarz #000000 oder auch RGB 0,0,0 (rot,grün,blau).
Beispielsweise wäre ein grün Ton die #006600 oder ein rot Ton die #cc0000,
diese finden beispielsweise in unseren Sportwetten Tipps viel
Verwendung, insbesondere zur Darstellung von ausgewerteten Wett Tipps.

Im nächsten Schritt geht es um weitere Tips und Tricks zu Css Buttons, Bilder
Horizontale und vertikale Zentrierung, Farben und später noch um XML.

	Einführung
	Kapitel 1 : Bilder mit CSS
	Kapitel 2 : Ausrichtung und Positionierung Bilder
	Kapitel 3 : CSS Buttons
	Kapitel 4 : Buttons mit Farbverlauf
	Kapitel 5 : Listen mit Hilfe von CSS
	Kapitel 6 : in kürze

Weitere CSS Tips & Tricks auch bei uns im Forum mit Fragen
und Antworten in den Beiträgen der User z.B. hier : Tips bei der eigenen HP.