Stylesheet-Sprachen [ˈstaɪlʃiːt] sind formale Sprachen in der Informationstechnik, um das Erscheinungsbild von Dokumenten bzw. Benutzeroberflächen festzulegen. wikipedia
Stylesheets besteht aus dem Wort "style" (auf deutsch Stil, Ausdrucksweise, Formatvorlage) und dem Wort "sheet" (Blatt, Platte, Sammlung). Man könnte es also als "Stil Sammlung" übersetzen. In dieser Sammlung stehen verschiedene Ausdrücke, die als Formatvorlage unserer Website dienen.
Fassen wir zusammen: Stylesheets bestehen aus Ausdrücken die dem Browser sagen, wie unsere Homepage aussehen soll. Mit ihnen können wir die Schriftfarbe, die Schriftgröße oder die Hintergrundfarbe der Homepage festlegen.
Für diese Ausdrücke gibt es übrigens verschiedene Sprachen. Die uns wohl bekannteste ist CSS (Cascading Style Sheets). CSS wurde entwickelt, um Inhalt und Design zu trennen. Meistens erstellt man dafür eine eigene css Datei (z.B. style.css).
HTML Code = Inhalt
CSS = Beschreibung des Aussehens dieses Inhalts.
Viele Webmaster schreiben ihre CSS direkt in den HTML Code (z.B. so: <div style="color: #fff">Ich bin weiß</div>). Von dieser Vorgehensweise ist abzuraten! Sollte das Design einmal geändert werden, muss bei dieser Variante jede Unterseite durchgegangen und überarbeitet werden.
Besser ist, alles in eine separate CSS Datei (z.B. style.css) zu schreiben und diese einzubinden. So muss nur diese eine Datei geändert werden.
Das sieht in der HTML (oder PHP Datei) dann so aus:
<div class="weiß">Ich bin weiß </div>
Und in der CSS Datei so:
.weiß{color: #fff;}
Man unterscheidet hier übrigens zwischen class und id. Eine id wird nur verwendet, wenn etwas einmalig ist bzw. nur einmal im ganzen Code gebraucht wird. Wie zum Beispiel bei einem header div..
<div id="header">Ich bin der Header</div>In der CSS Datei hat wird die id Beschreibung mit einer Raute (#) begonnen:
#header{background-color: #000;}
Im Unterschied dazu wird eine Klasse (class) öfters im HTML Code verwendet.
<div class="weiß">Ich bin weiß </div>
<div class="weiß">Ich bin auch weiß </div>
In der CSS Datei werden Klassen mit einem Punk (.) begonnen:
.weiß{color: #fff;}
Stylesheets verwenden
Zuerst wird eine CSS Datei erstellt (z.B. style.css). In diese Datei beschreiben wir nun, wie unsere Website aussehen soll. Dafür gibt es verschiedene Befehle, die verwendet werden können. Eine Übersicht gibt es unter anderem auf CSS4you oder W3SchoolsUnsere style.css könnte zum Beispiel so aussehen:
body{
background: blue;
color: #000;
}
h1{
font-size: 28px;
color: #c27ba0;
}
Hiermit machen wir den Hintergrund der Website blau, die normale Schriftfarbe schwarz und sagen, dass die h1 Überschrift 28px groß und pink ist.
Damit der Browser von unserer CSS Datei weiß, müssen wir die Datei im Header (<head>) unseres Webseitencodes einbinden:
Damit der Browser von unserer CSS Datei weiß, müssen wir die Datei im Header (<head>) unseres Webseitencodes einbinden:
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
Jetzt läd der Browser die ganzen Styles, die wir in der CSS Datei stehen haben. Er weiß nun wie unser Hintergrund und unsere h1 Überschrift aussehen.
Innerhalb deiner PHP oder HTML Datei kannst du nun deine definierten Styles verwenden.
Zum Beispiel so
Du hast noch fragen? Dann schreib mir eine EMail oder hinterlasse einen Kommentar :)
Innerhalb deiner PHP oder HTML Datei kannst du nun deine definierten Styles verwenden.
Zum Beispiel so
<h1>Überschrift</h1>
Du hast noch fragen? Dann schreib mir eine EMail oder hinterlasse einen Kommentar :)