[Erklärung]: Was ist CSS?

[Moni]

Cascading Style Sheets (Abk.: CSS ) ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente. Sie wird vor allem zusammen mit HTML und XML eingesetzt. CSS soll dabei festlegen, wie ein besonders ausgezeichneter Inhalt dargestellt werden soll. Dazu ist es wichtig, das HTML oder XML so zu gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als Gruppe erkannt werden können. Man zeichnet im Dokument also die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird.  [...]

(http://de.wikipedia.org/wiki/Cascading_Style_Sheets)

CSS, das klingt im ersten Moment furchtbar kompliziert und man befürchtet seitenweise kryptischen Code, der nur mit den höheren Weihen des Webdesigns zugänglich ist. Weit gefehlt!
Im Prinzip ist CSS die beste Möglichkeit, eine Seite mit schlankem HTML/XHTML zu schreiben und diese Seite bequem zu formatieren.

In dem Thread http://forum.tintenzirkel.de/index.php/topic,863.0.html]%20Was%20ist%20HTML? habe ich ja bereits erläutert, daß für die Formatierung einer Webseite bestimmte tags notwendig sind, die z.B. die Schriftart,-farbe, -größe, Hintergrundbilder etc. festlegen.
Das Problem dabei ist, daß man für jede Abweichung, z.B. wenn die Links anders sein sollen oder ein bestimmter Bereich der Seite sich abheben soll, der Quellcode entsprechend erweitert werden muß.
Außerdem benötigt man entweder Frames oder blinde Tabellen (also unsichtbaren Tabellen), um eine Seite entsprechend in Form zu bringen.
(Nachteil von Tabellen: erst wenn die komplette Tabelle reingeladen ist, wird die Seite sichtbar. Bei viel Inhalt kann das sehr nervtötend sein.
Nachteil von Frames: wurde kein Framebuster eingebaut, werden externe Links im eigenen Frame angezeigt, man hängt also im Frame fest!)
Dies erfordert extrem aufwendigen Code, der zudem durch die ganzen zusätzlichen Formatierungen sehr umfangreich und geradezu aufgebläht wird. Will man Änderungen an der Seite vornehmen, die Farben oder Schriftarten betreffen, muß man dies in mühevoller Kleinarbeit an jeder einzelnen Seite vornehmen.
Mit einem ausgelagerten Stylesheet, auf den alle Seiten zugreifen, wird dies zu einer einzigen Änderung!

Um das Ganze etwas anschaulicher zu machen, ein kleines Beispiel:

Eine Seite soll links eine Navigationsleiste haben und rechts ein Inhaltsfeld. Die Navigationsleiste soll einen anderen Hintergrund haben, als das Inhaltsfeld. Ebenso sollen Überschriften jeweils unterschiedlich aussehen. Der Text im Inhaltsfeld soll im Blocksatz ausgerichtet sein, die Navi linksbündig.
(Prinzipiell ist das eine Standardseite, wie man sie zu tausenden im Netz findet!)

Habe ich mich für CSS entschieden, kann ich alles, das mit dem Layout und dem Design zu tun hat in ein Stylesheet auslagern:



Um genau festlegen zu können, wie die beiden Bereiche der Seite (Navi und Inhalt) zueinander positioniert sind, definiere ich als erstes einen div  (einen Bereich) für den Inhalt und über eine id zugeordent wird.
<div id="content"> </div>
Ich füge einen Dummytext ein, damit klar wird, wie die Seite aufgebaut ist. (Quelle: http://www.lipsum.com/) Der Dummytext ist von einem <p></p> Tag umschlossen. Im Stylesheet wird klar warum.

Dies geschieht aus dem Grund, daß ein Lesegerät, welches die Seite vorliest, den Quellcode von oben nach untern durchgeht. So erhält der User als erstes alle Inhaltsinformationen und danach die Navigationsangaben. Diese Vorgehensweise wird im Bezug auf die Barrierefreiheit empfohlen.

Danach wird eine zweite div id festgelegt, nämlich die Navigation über:
<div id="nav"> </div>

Zu beachten ist: eine "id" darf es in jedem Dokument nur einmal geben. Wiederholen sich Formatierungen mehrmals, verwendet man dafür die "class". Dies wird im Beispiel verdeutlicht!

Nun kann ich die einzelnen Punkte der Navigation über eine Liste festlegen. Klingt logisch, oder?



So, jetzt kommt der spannende Teil, nämlich das CSS.

Dazu lege ich eine Datei mit dem Namen site.css an. Wichtig ist, daß keine .htm oder .html Endung autaucht, sonder daß es .css lautet!

Nun lege ich als erstes die Angaben für den <body></body> Tag fest, der den gesamten Inhalt umschließt.
Ich entscheide mich dafür, daß es einen 3em breiten Abstand vom Gesamtinhalt (Inhalt und Navi) um die gesamte Seite geben soll, damit alles nicht so am Rand klebt. Aber ich möchte keinen Innenabstand.
Ich definiere also: margin: 3em;  und padding: 0;
In dem ich im body die Schriftgröße nicht absolut (über pt, px, em oder ähnliches) definiere, sondern mit small, lasse ich dem Benutzer die Möglichkeit, die Schrift zu skalieren (über den Browser größer oder kleiner zu stellen), ohne daß es mir das Layout zerschießt!!  Da alle weiteren Definitionen sich auf den body-Bereich beziehen werden (Vererbung!), kann ich dort mit Prozentangaben arbeiten. Erläuterung im Beispiel!
Als nächstes lege ich fest, wie der Inhaltsbereich aussehen soll.

Ich möchte, daß der Inhalt links einen Abstand von 20em hat (dort kommt die Navi hin!), nach rechts einen von 5em, nach unten keinen und nach oben einen von 3em.
Dies wird über margin-top: 3em, margin-left: 20em, margin-bottom: 0; margin-right: 5em  festgelegt.

Nun kann ich die Navigation positionieren:
Über position: absolute;  lege ich fest, daß die Navigation nicht verschoben wird, falls sich die Fenstergröße ändert.
Dann definiere ich mit:   top: 9em;  left 1em; und width: 18em; die Abständer Navigation zum oberen und linken Rand, sowie die Breite des Navigationsbereiches.
Außerdem möchte ich einen anderen Hintergrund und wähle die Farbe: #AFAFAF;  ein dunkles Grau.

So sieht unser site.css bisher aus:


Und so unsere Seite bisher:


Nun geht es an die Verschönderungsarbeiten:

Wir wollen die Aufzählungspunkte bei der Navigation verschwinden lassen, die Linkfarben ändern und den häßlichen Unterstrich der Links durch etwas netteres ersetzen.

Das geht so:



und wirkt sich folgendermaßen aus:



Jetzt möchte ich noch etwas an der Darstellung des Inhaltsbereiches tun.
Der Text soll ja im Block sein und ich möchte für Überschriften sorgen.

Das passiert im Folgeschritt:


Dadurch ergeben sich Änderungen im Quellcode:


Was zu folgendem Ergebnis führt:



Man kann jetzt noch alles mögliche ändern, z.B. dem "content" ein padding geben, eine Hintergrundgrafik einfügen etc.
Der Vorteil ist nun, daß alle Unterseiten auf das Stylesheet zurückgreifen können und somit wirklich nur aus dem Inhalt und der Navi bestehen müssen.

Natürlich gilt auch hier: je aufwändiger die Seite, desto länger wird das Stylesheet. Wer mag, kann sich ja mal zum Vergleich die Stylesheets meiner Seiten und die dazugehörigen Quellcodes anschauen.
Letztendlich spare ich aber eine Menge Zeit, auch wenn ich mir etwas mehr Gedanken über das Stylesheet machen muß, denn ich ändere nachher für Farben, Größen etc nur diese eine Datei und nicht alle Unterseiten.

Die CSS-Datei, die Hintergrundgrafik und das HTML-Dokument liegen zum Anschauen bereit!

Bei Fragen zu einzelnen Schritten meldet euch bitte hier im Thread. Bei größeren Anfragen per Mail. (Die Mailaddy gibt es per PN!)

Ich hoffe, daß ich verdeutlichen konnte, was man mit CSS genau machen kann und wünsche viel Vergnügen beim Ausprobieren! 

Eure Moni (die jetzt erst mal keine längeren Anleitungen mehr schreiben möchte...  )


Um Feedback wird gebeten! Ist alles verständlich? Lesbar? Funktioniert das System der Beschreibungen und Screenshots? Wünscht ihr euch das anders? (Dann selber machen...  ) - Nein, quark... 

[Feuertraum]

Da ich mich gerade durch das Buch "XHTML für Dummies" durchprügele und da gerade das Thema Style Sheeting habe, möchte ich noch gerne einige Anmerkungen dazu loswerden.
Im Gegensatz zu XML/XHTML benötigt HTML KEIN Stylesheeting. Dennoch sollte man sich die Mühe machen und darauf zurückgreifen. Warum?
Es ist ja mittlerweile schon irgendwo Standard, das man nicht nur mittels Computer ins Internet geht. Auch Handys, WebTV und PDAs bieten schon lange diese Möglichkeit.
Problem jedoch ist, das man diese Geräte mit anderen Styles kommen muß, damit sie das ganze gut verarbeiten und der Benutzer das ganze gut lesen kann.
Nun kann man - natürlich - für jedes Gerät einen eigenen Quellcode schreiben.
Bei einer Seite hält sich das ganze auch noch irgendwo im Rahmen und ist eine knuffige Übung.
Bei einem Großprojekt jedoch, das viele viele Seiten und Verschachtelungen in sich trägt, ist es ein äußerst mühseliger Zeitvertreib.
Wer nun aber auf ein CSS zurückgreifen kann, der braucht nur noch eben dieses zu ändern. Der restliche HTML/XML/XHTML-Code bleibt erhalten :-)

Von daher: man muß nicht allen ABMs nachgehen...

LG

Feuertraum
(der nun weiter im Buch lernen wird)

[Moni]

Im Gegensatz zu XML/XHTML benötigt HTML KEIN Stylesheeting. Dennoch sollte man sich die Mühe machen und darauf zurückgreifen. Warum?

...

Bei einem Großprojekt jedoch, das viele viele Seiten und Verschachtelungen in sich trägt, ist es ein äußerst mühseliger Zeitvertreib.
Wer nun aber auf ein CSS zurückgreifen kann, der braucht nur noch eben dieses zu ändern. Der restliche HTML/XML/XHTML-Code bleibt erhalten :-)
Von daher: man muß nicht allen ABMs nachgehen...

Ich zitier mich da mal selber:

Im Prinzip ist CSS die beste Möglichkeit, eine Seite mit schlankem HTML/XHTML zu schreiben und diese Seite bequem zu formatieren.

Das man CSS unbedingt braucht, habe ich ja nie behauptet, aber Tatsache ist, daß es Standard ist und wer seine Seite einigermaßen (muß ja nicht komplett) damit designt (zumindest also die Schriftformatierungen) damit vornimmt, ist einen Schritt näher am Standard.
Anders als in anderen Lebenslagen ist es im Webdesign von Vorteil, dem Standard zu entsprechen, da es die Funktionalität der Seite für eine möglichst breite Benutzergruppe gewährt.

Was die Sache mit Großprojekten angeht: meine Seiten sind keine Großprojekte, trotzdem dauert es bei CSS-freiem Design erheblich länger, Änderungen vornzunehmen, als mit CSS.
Wer mit CSS arbeite, gewöhnt sich nämlich an, die Seiten gut zu strukturieren, das ist etwas, das beim reinen HTML coden schon mal verloren geht...
Es erleichtert die Sache übrigens ungemein, wenn man von Anfang an mit CSS arbeitet, wird die Seite größer und größer steigt auch die Hemschwelle, alles neu zu coden erheblich an!

Lg
Moni

P.S. Ich kann gerne zum Vergleich die Quellcodes meiner Seiten vor und nach CSS zur Verfügung stellen. WEr also will, einfach melden.

[gbwolf]

Hallo Moni!

Ein herzlicher Dank von mir für diese Einführung in CSS  . Ich arbeite mich gerade gründlich durch, um mal überhaupt zu verstehen, wie man sowas anfängt, aufbaut und *räusper* den Überblick behält.

Zum Kurs selbst habe ich (bislang) noch keine Fragen, da ich gut mitkomme, auch wenn es ab und an etwas Geduld kostet, sich alles gründlich durchzulesen und nicht gleich "Hilfe!" zu schreien 
Nur eine kleine Frage zu den Maßeinheiten:

Ich entscheide mich dafür, daß es einen 3em breiten Abstand vom Gesamtinhalt

Was ist "em" für eine Maßeinheit? "elektrische Meter"? Da stehe ich gerade absolut auf dem Schlauch und ich möchte gern verstehen, was ich da eingebe, damit ich später nach meinen Wünschen modifizieren kann.

Gelehrige Grüße,
Wölfin

Edit:
Mir ist aufgefallen, dass bestimmte Dinge bei mir (Firefox) nicht gehen.
So muss ich statt "background-image" nur "background" nehmen, sonst wird das Bild nicht gezeigt und das hier in zwei Styleinfos aufdröseln, statt es so hübsch zusammen zu fassen wie oben beschrieben:

border-bottom: 1px;
border-bottom-style: dotted;

Und Farbe für die Punkte will er auch getrennt serviert bekommen   Liegt das an meiner Localhost-Einstellung?

Edit2: Auf jeden Fall bin ich jetzt durch und habe einige grundlegende Dinge über CSS verstanden. Hat alles sehr gut funktioniert. Dann kann ich ja fleissig daran gehen, ein Konzept für meine Seite zu machen und mir bei Cssforyoudie Detailsachen für die verschiedenen Styles rauspicken.

Wirklich ein interessanter Kurs und noch einmal einen Dank safür  .
Darf ich in diesem Thread auch allgemeine Fragen zu CSS stellen, wenn ich wieder welche aufkommen?

[Maja]

em ist eine flexible Größeneinheit - der Nutzer kann an seinem Browser selbst einstellen, wie groß 1em sein soll. Die Standardeinstellung beim Firefox ist 16px, aber wer die Dinge lieber etwas größer sehen will, geht auf Extras -> Einstellungen -> Inhalt. Der Wert, der dort für die Schriftgröße angegeben ist, ist die Vorgabe für 1em in Pixeln.
Bei der Tintenzirkelwebseite sind z.B. alle Schriftgrößen in em angegeben.

[Volker]

Nur eine kleine Frage zu den Maßeinheiten:Was ist "em" für eine Maßeinheit?

Ein "em" ist die Breite des "m" Kleinbuchstabens.
Ein "m" breit halt - und um nicht mit Metern verwechselt zu werden, wird das halt als "em" geschrieben (wie gesprochen).

[gefion]

Da ich meine HP übernehmen will/muss, muss ich mich nun auch mal mit CSS beschäftigen - und entdecke in meinem CSS-style Editor, den man mir geschickt hat, seltsame Sätze.
Was bedeutet z.B.
- win from its own stupidity (taucht mehrfach auf)
-need quite a bit of padding-top for navigation! (gegen Ende)
-but it also doesnt understand important ; -) (Zeile darüber)

das liest sich für mich wie blöde Bemerkungen des Erstellers incl. Smilies.

Außerdem wundere ich mich, weil bei mir überhaupt keine Absätze zu sehen sind - alles geht ineinander über - wie findet man sich denn da zurecht???

Ziemlich hilflose Grüße

Gefion

[Joscha]

Hallo gefion,

lass mich vorneweg die harte Wahrheit sagen: Es ist am besten, du lernst selbst CSS (ich gehe mal davon aus, dass du mit dem CSS-style Editor ein WYSIWYG-Programm meinst, das dir sofort anzeigt, wie die spätere Homepage aussieht), denn diese Editoren sind
a) meistens ziemlich fehlerbehaftet und unkomfortabel und produzieren
b) sehr unsauberen Code, der die Größe deiner Website unnötig aufbläht.
CSS ist eigentlich eine recht einfache Sprache, wenn man begriffen hat, wozu es gut ist.

Wenn du dennoch mit einem WYSIWYG-Editor arbeiten willst, würde ich dir empfehlen, mehrere von diesen auszuprobieren und zu testen, welcher von ihnen dir am besten liegt - da gibt es viele unterschiedliche Programme, viele kostenlos. Würde mich nur noch der Editor interessieren, den man dir geschickt hat: Steht ein Programmname dabei? In welchem Kontext tauchen die Sätze auf?

Grüße
Joscha

PS: Wenn du keine Absätze siehst, liegt das vielleicht auch an deinem HTML-Code. Probier einmal entweder, jeden Absatz zwischen zwei <p>-Tags einzufassen (also <p>Das ist der Text des Absatzes</p>), oder setze ein
 an jeden Zeilenumbruch.

[gefion]

Hallo Joscha,
so sehr ich suche, ich kann keine <p> Tags finden... überhaupt scheint viel nicht mit dem übereinzustimmen, was hier erläutert wird. Ab und zu leuchtet in meinem Kopf ne Glühbirne auf - aber irgendwie kommt es mir vor, asl wäre es sinnvoller, eine neue HP zu basteln.
Gibt es evtl. irgendwo Standardbaukästen kostenlos, um sie in jede beliebige HP zu überführen?
Ich habe kein Interesse an was ganz Ausgefallenem, im Grunde reicht mir wirklich eine BasisHP; bin kein Fan dieser Dinger, muss ja aber wohl sein.

LG
Gefion

[Feuertraum]

Gibt es evtl. irgendwo Standardbaukästen kostenlos, um sie in jede beliebige HP zu überführen?
Ich habe kein Interesse an was ganz Ausgefallenem, im Grunde reicht mir wirklich eine BasisHP; bin kein Fan dieser Dinger, muss ja aber wohl sein.

Geben gibt es sie schon. Teilweise bei diversen (wenngleich kostenpflichtigen) Webspaceanbietern. Auch die Seite www.Internetbaukasten.de bietet eine kostenlose Version. Auch in manchen Computerzeitschriften sind welche zu finden.

Meine unmaßgebliche Meinung dazu jedoch ist: Lassen Sie die Finger davon.
Klar, sie sind schön einfach.
Dennoch müssen Sie spätestens dann, wenn auf der Homepage Fehler auftreten, sich ohnehin mit XHTML und CSS beschäftigen, um die Fehler auszumerzen.
Desweiteren arbeiten die Homepagemaker viel mit Tabellen. Und damit sind sie sehr barrierelastig, und davon sollte jeder, der eine Homepage erstellen will,  Abstand halten.

LG
Feuertraum

[Moni]

Da ich meine HP übernehmen will/muss, muss ich mich nun auch mal mit CSS beschäftigen - und entdecke in meinem CSS-style Editor, den man mir geschickt hat, seltsame Sätze.
Was bedeutet z.B.
- win from its own stupidity (taucht mehrfach auf)
-need quite a bit of padding-top for navigation! (gegen Ende)
-but it also doesnt understand important ; -) (Zeile darüber)

das liest sich für mich wie blöde Bemerkungen des Erstellers incl. Smilies.

Außerdem wundere ich mich, weil bei mir überhaupt keine Absätze zu sehen sind - alles geht ineinander über - wie findet man sich denn da zurecht???

Ziemlich hilflose Grüße

Gefion

Wenn du magst, kannst du mir den CSS Code mal per Mail schicken (einfach die CSS Datei als Anhang an literatur@shadowdaughter.de, kurz noch was dazu schreiben, damit ich weiß, wer mir da was schickt  ), dann schau ich mal drüber... falls sich das nicht schon erledigt hat. Habe deine Frage jetzt erst gesehen.

Lg
Moni

[Luna]

Da ich meine HP übernehmen will/muss, muss ich mich nun auch mal mit CSS beschäftigen - und entdecke in meinem CSS-style Editor, den man mir geschickt hat, seltsame Sätze.

Ne CSS-Datei kannst du eigentlich auch im Notepad von Windows öffnen... ist eigentlich nur Text

Was bedeutet z.B.
- win from its own stupidity (taucht mehrfach auf)
-need quite a bit of padding-top for navigation! (gegen Ende)
-but it also doesnt understand important ; -) (Zeile darüber)

Diese Sätze sind alle drei kein CSS, demnach Kommentare. Geht wahrscheinlich darum, dass irgendwofür das CSS angepasst werden musste, demnach:

das liest sich für mich wie blöde Bemerkungen des Erstellers incl. Smilies.

Genau richtig

Außerdem wundere ich mich, weil bei mir überhaupt keine Absätze zu sehen sind - alles geht ineinander über - wie findet man sich denn da zurecht???

Die Absätze sind auch nicht nötig. Wie du weiter oben siehst, werden die einzelnen Befehle in Blöcke zusammengefasst, die in  { und } stehen. dazwischen wird alles nötige mit nem ; getrennt.
Ist irgendwo /* und */ zu sehen, dann ist alles dazwischen ein Kommentar.

Was vor einer { steht sind meist die angaben, worauf sich das beziehen soll, was in der Klammer steht.

alle leerzeichen, auch absätze kann man (leider) weglassen. die werden vom Browser beim durchgehen nämlich sowieso ignoriert. 

Im Notfall kann ich mich auch noch über CSS auslassen, damit kann man noch seeehr viel anstellen, aber das nur auf Wunsch.

LG, AF