CSS Datei erstellen

von: Werner Zenk

Externe Seitenformatierung mit CSS - Ein kompletter Webauftritt lässt sich so, optisch mit wenigen Klicks und Einträgen verändern.

Stellen Sie Sich vor auf Ihrer Homepage gibt es zwanzig oder noch mehr Seiten und bei jeder müssen Sie die Hintergrundfarbe einzeln umändern — was für eine Tipparbeit. Und wenn Sie fertig sind, gefällt Ihnen eine andere Farbe doch besser.

Einfacher geht es mit einer externen CSS-Datei.

1. Öffnen Sie einen Texteditor zum Beispiel „Notepad“

2. Fügen Sie folgenden Text ein:

body {
 background-color: Yellow;
}

3. Speichern Sie die Datei unter dem Namen: style.css

4. Fügen Sie in allen Seiten zwischen <head> und </head> folgendes ein:

<link rel="stylesheet" type="text/css" href="style.css">

Ab jetzt brauchen Sie nur in der Datei "style.css" die Hintergrundfarbe zu ändern und alle anderen Seiten haben die gleiche Hintergrundfarbe.

Hier finden Sie die Farbnamen mit einem Farbbeispiel dazu.

• Schriftart ändern
Fügen Sie zusätzlich folgenden Text ein:

body {
 background-color: Yellow;
 font-family: Verdana;
}

Hier finden Sie verschiedene Schriftarten.

• Schriftgröße ändern
Fügen Sie zusätzlich folgenden Text ein:

body {
 background-color: Yellow;
 font-family: Verdana;
 font-size: 12px;
}

• Schriftfarbe ändern
Fügen Sie zusätzlich folgenden Text ein:

body {
 background-color: Yellow;
 font-family: Verdana;
 font-size: 12px;
 color: Blue;
}

• Hintergrundbild einbauen
Fügen Sie zusätzlich folgenden Text ein:

body {
 background-color: Yellow;
 font-family: Verdana;
 font-size: 12px;
 color: Blue;
 background-image: url(bild.jpg);
}

Hintergrundbild ohne Wiederholung

body {
 background-color: Yellow;
 font-family: Verdana;
 font-size: 12px;
 color: Blue;
 background-image: url(bild.jpg);
 background-repeat: no-repeat;
}

• Linkfarbe ändern
Einen normalen Link einfärben

a:link {
 color: Blue;
}

Einen bereits besuchten Link einfärben

a:visited {
 color: Darkmagenta;
}

Einen Link einfärben wenn man mit dem Mauszeiger über den Link fährt.

a:hover {
 color: Hotpink;
}

• Link-Unterstreichung wenn der Mauszeiger über dem Link steht

a:link, a:visited {
 text-decoration: None;
}

a:hover {
 text-decoration: Underline;
}

• Eigenschaften mit einer „class” formatieren
In CSS ist es möglich eine Klasse („class”) zu definieren.
Sie können irgend einen Namen dafür verwenden.
Wichtig ist das Sie vor der Klasse einen Punkt setzen, außerdem darf die
Klasse keine deutschen Umlaute (ä,ö,ü), Leerzeichen oder andere
Sonderzeichen enthalten.

.textfarbe_blau {
 color: Blue;
}

In der HTML-Datei bauen Sie dann folgendes ein:

<span class="textfarbe_blau">Das ist ein kleiner Text.</span>

Ausgabe: Das ist ein kleiner Text.

Ein weiteres Beispiel:

.hintergrund_gelb {
 background-color: Yellow;
}

In der HTML-Datei bauen Sie dann folgendes ein:

<span class="hintergrund_gelb">Das ist ein kleiner Text.</span>

Ausgabe: Das ist ein kleiner Text.

• Beide Klassen zusammen benutzen.
Hier setzen Sie zwischen den beiden Klassen einfach ein Leerzeichen.

<span class="textfarbe_blau hintergrund_gelb">Das ist ein kleiner Text.</span>

Ausgabe: Das ist ein kleiner Text.

• Eigenschaften mit einer „ID” formatieren
Soll Ihre Navigation auf jeder Seite gleich aussehen, dann nehmen Sie am
besten eine ID. In CSS ist es nähmlich auch möglich eine ID zu definieren.
Sie können irgend einen Namen dafür verwenden. Wichtig ist das Sie vor der
ID eine Raute (#) setzen, außerdem darf die ID keine deutschen Umlaute
(ä,ö,ü), Leerzeichen oder andere Sonderzeichen enthalten.

#navigation {
 background-color: papayawhip;
 width: 150px;
 padding: 10px;
}

In der HTML-Datei bauen Sie dann folgendes ein:

<div id="navigation">
<a href="link1.htm">Demolink 1</a> <br>
<a href="link2.htm">Demolink 2</a> <br>
<a href="link3.htm">Demolink 3</a>
</div>

Ausgabe:

Demolink 1
Demolink 2
Demolink 3

Im Gegensatz zur einer „class” darf die „Id” nur ein einziges mal auf der Seite stehen.

• HTML-Tag formatieren
Sie können mit CSS auch viele HTML-Tags formatieren,
zum Beispiel den H1-Tag:

h1 {
 font-family: Verdana;
 font-size: 18px;
 color: blue;
}

• HTML-Tag (Kind) formatieren
Des weiteren ist es möglich nur bestimmte Tags zu formatieren,
zum Beispiel alle Strong-Tags die in einem Absatz (mit dem P-Tag) vorkommen.

p strong {
 color: green;
}

Wichtig: Lassen Sie zwischen den zwei Tags ein Leerzeichen .

Die HTML-Datei sollte dann so aussehen:

<p>Das ist ein <strong>kleiner</strong> Text.</p>

Ausgabe:

Das ist ein kleiner Text.

Siehe dazu auch:

Textgestaltung mit CSS
Mit CSS ist ein Text schnell formatiert. Eine Anleitung zur Textgestaltung mit CSS mit vielen Beispielen.

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Kommentare: 36 » aufmachen NoxX: DANKE! Ohne euch hätt ich es nich geschafft ! morung: schön und übersichtlich gemacht thx for help st0ny: Hat mir sehr weitergeholfen. Vielen Dank! TommyLee: genau das was ich gesucht habe. und sehr gut erklärt... Danke! Sanane: schön und übersichtlich gemacht thx for help plutonic: diese tipps kann ich gut gebrauchen.danke! bartholo: super,dankeschön, sehr hilfreich und praktisch! Setzuna: Danke euch, endlich konnte ich meine HP fertig stellen. Das hat mir super geholfen. Jonas: Hat mir echt geholfen vielen, vielen Dank phazillaneous: supaaaa! endlich funktioniert meine css datei! DANKE!DANKE!DANKE!DANKE! noch bissl noob: Kann mich nur meinen Vorrednern anschließen. Ohne euch hätte ich das nicht gerafft Gambler69: Oh mein Gott. Wie einfach. Danke Bekoson: Vielen dank für diesen sehr sehr hilfreichen tipp! Estranghero: Hi! Erst mal vielen lieben Dank für die genialen Erläuterungen - echt super! Vielleicht ist es eine etwas dumme Frage, aber ich befasse mich mit CSS erst seid wenigen Tagen: Kann man in Dreamweaver schon erstellte html- Seiten mit CSS verbinden? Werner: Ja das geht mit Dreamweaver auch. Mehr dazu unter: » http://www.exine.de/software/editor_dreamweaver_css.htm Michael: echt super! Vielen Dank! dede chan: die tipps sind echt super , danke! Link007: schnell und einfach erklärt Tingeltangelbob: sehr einfach und sehr hilfreich so muss es sein DANKE Nicooo: Bisschen mehr Tags wären super Ich kann selbst CSS und das hier is eigentlich nur ein winziger Auszug. Werner: Diese Seite soll vor allem Anfänger helfen CSS in Ihre Website einzubauen. Ich werde diese Seite etwas erweitern, so das weitere wichtige CSS-Anweisungen enthalten sind. Weiter oben gibt es einen Link zu einem "CSS-Grundkurs". Wer mehr über CSS wissen möchte, sollte unbedingt bei selfhtml.org vorbei schauen. scotty2000: Super anschaulich erklärt, hat mir sehr weitergeholfen.DANKE! Zorro: eine Frage hab ich noch bei einer CSS datei benötigt es keine ähnliche einleitung wie bei html? Bsp:"<html> <head> </head>"<body> </body> </html> Werner: Eine externe CSS-Datei benötigt keine weiteren Angaben. Kommentare in CSS werden mit */ /* gekennzeichnet. Zum Beispiel: */ Das ist ein Kommentar /* Zorro : dann vielen dank noch mal hat mir wirklich sehr viel geholfen katyes: 1000Dank-die Anleitung ist echt hilfreich gewesen Birdy: Die Seite kam sofort zu meinen Favoriten. Kann ich den Text meiner mit der vorgegebenen "Web" erstellten HP auf eine neue, bessere umleiten? Danke, Birdy Felix: Super Seite!Habe sofort den Banner auf meine Webseite gestellt!Nur habe ich noch eine Frage:Kann ich auch immer sagen das unter der Seite (c)2009 steht oder so?? Ohne es immer einzutippen?Danke fürs lesen Felix (15) Werner: Verwende einfach eine Vorlage, wo das Grundgerüst (HTML-Tags) und das Copyright schon drinnen steht. Eine Jahreszahl muss nicht dabei sein, es reicht schon Copyright: www.meineseite.de Tom2009: Also muss ich doch alle zwanzig oder mehr Seiten ändern.Was ist dann einfacher, die Farbe zu ändern oder eine ganze Befehlszeile einfügen?? Sicherlich die Farbe zu ändern. Werner: Die Befehlszeile einfügen ist zunächst etwas aufwändiger, aber bei einem erneuten "Farbwechsel" braucht nur die CSS-Datei geändert zu werden. WebAttack: Danke. Super Anleitung, auch ein Anfänger findet sich schnell zurecht. Conschti: Alter du hast mir meinen Arsch gerettet Dein Tutorial war sehr gut beschrieben! Du bist mein HTML GOTT Thx Gerd Heidenreich, Mannheim: Wunderbar verständlich erklärt! Danke! Jonah Falcon: die seite ist echt gut doch bei mir wird die Formatierung nicht auf jeden Tag angewendet. wie mache ich das? Werner: * {color: red;} Schorsch: Danke ein tolles Tutorial. Genau soviel wie ich brauche! Alzuexreankder: Vielen Dank, das beste (oder besser: einzig gute) Style-Sheet Tutorial das ich finden konnte. gitarrejoern: Moimoin! Endlich eine css-Einführung, die sogar ich verstehe! Danke schön! 19sly90: Hey sehr gut. Ich habe es gerade gesucht und gleich der erste Link war hilfreich. =) Paula: Sehr schön gemacht. Danke! hitman: einfach genial Danke für die Einleitung
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!