Kalle_B: Wie erklärt man CSS?

Hallöle,

möchte auf meiner Webseite CSS erklären und die gleiche Seite mit verschiedenen CSS- Dateien anzeigen, angelehnt an http://www.csszengarden.com/. Inhalt ist natürlich auch die Definition von CSS für Laien.

Spoantan fiel mir der Vergleich mit dem Militär ein. Das passt aber doch nicht so gut, deshalb bitte ich um Anregungen, welches Beispiel besser wäre. Es soll möglichst kurz sein.

Hier meine Grundlage:

CSS (Cascade Style Sheet) ist so etwas wie die Fernsteuerung einer Webseite. Die Textblöcke und Bilder auf der Seite können ein- und ausgeschaltet werden, in einer anderen Farbe und Größe erscheinen, oder gar die Reihenfolge tauschen.

Dabei müssen die betreffenden HTML- Elemente entsprechend vorbereitet werden durch Vergabe von Namen und / oder Klassen. Dann kann eine extern dazugeladene CSS- Datei die Eigenschaften jedes Elements verändern.

Das ist wie beim Militär. Wenn einer Müller heißt, kann der Spieß CSS-1 brüllen: „Müller zwei Schritte vor, rechtsum und strammgestanden!” Wenn mehrere das Gleiche tun sollen, bekommen sie eine rote Mütze auf, gehören nun zur Klasse rot und der Spieß brüllt: „Alle Roten hinlegen und 20 m vorwärts robben!”

Nun kann man den Spieß austauschen. CSS-2 läßt sich für Müller etwas anderes einfallen, die Roten müssen bis zu den Knien in den nächsten Teich waten und die Grünen müssen sich verstecken. Und schon bietet die Kompanie ein verblüffend anderes Bild.

Lieben Gruß, Kalle

  1. Hi,

    möchte auf meiner Webseite CSS erklären und die gleiche Seite mit verschiedenen CSS- Dateien anzeigen, angelehnt an http://www.csszengarden.com/. Inhalt ist natürlich auch die Definition von CSS für Laien.

    also etwa so: http://www.1ngo.de/web/css-layout.html?

    CSS (Cascade Style Sheet) ist so etwas wie die Fernsteuerung einer Webseite. Die Textblöcke und Bilder auf der Seite können ein- und ausgeschaltet werden, in einer anderen Farbe und Größe erscheinen, oder gar die Reihenfolge tauschen.

    sehr ungenau und unpräzise bzgl. der Reihenfolge.

    Dabei müssen die betreffenden HTML- Elemente entsprechend vorbereitet werden durch Vergabe von Namen und / oder Klassen. Dann kann eine extern dazugeladene CSS- Datei die Eigenschaften jedes Elements verändern.

    Unsinn. Eine h1 z.B. braucht keine Klasse oder Namen und viele andere Elemente auch nicht, solange man sie nicht gesondert formatieren möchte.
    Und was für Namen überhaupt? Du meinst IDs?

    Das ist wie beim Militär. Wenn einer Müller heißt, kann der Spieß CSS-1 brüllen: „Müller zwei Schritte vor, rechtsum und strammgestanden!” Wenn mehrere das Gleiche tun sollen, bekommen sie eine rote Mütze auf, gehören nun zur Klasse rot und der Spieß brüllt: „Alle Roten hinlegen und 20 m vorwärts robben!”

    Ein typisch schlechtes Beispiel. Ich kenn mich beim Militär nicht aus, aber wenn ein bestimmter Dienstgrad rote Mützen trägt, dann sollte mann diesen als Klassifizierung angeben und bekommt bei einer Farbänderung der Uniformen keine Probleme.

    freundliche Grüße
    Ingo

    1. Hi,

      also etwa so: http://www.1ngo.de/web/css-layout.html?

      Ja, eine technisch einwandfreie Seite.

      CSS (Cascade Style Sheet) ist so etwas wie die Fernsteuerung einer Webseite. Die Textblöcke und Bilder auf der Seite können ein- und ausgeschaltet werden, in einer anderen Farbe und Größe erscheinen, oder gar die Reihenfolge tauschen.
      sehr ungenau und unpräzise bzgl. der Reihenfolge.

      hmmm **ratlosguck** ?

      Unsinn. Eine h1 z.B. braucht keine Klasse oder Namen

      Aha, erkläre das mal meiner Partnerin, die von Webdesign Null Ahnung hat. Ich sagte doch: Für Laien.

      Und was für Namen überhaupt? Du meinst IDs?

      Genau.

      Das ist wie beim Militär.

      Ein typisch schlechtes Beispiel.

      Sag ich doch, deshalb suche ich einen anderen Dunstkreis. Zauberer, Elfen, was weiss ich.

      freundliche Grüße, Kalle

      1. Hi,

        Die Textblöcke und Bilder auf der Seite können ein- und ausgeschaltet werden, in einer anderen Farbe und Größe erscheinen, oder gar die Reihenfolge tauschen.
        sehr ungenau und unpräzise bzgl. der Reihenfolge.

        hmmm **ratlosguck** ?

        Die Reihenfolge der Elemente im Quelltext steht fest. CSS kann sie in der Anzeige  unterschiedlich positionieren. "ein- oder ausschalten" ist ein Sonderfall und die Wortwahl nicht sehr treffend.

        Unsinn. Eine h1 z.B. braucht keine Klasse oder Namen

        Aha, erkläre das mal meiner Partnerin, die von Webdesign Null Ahnung hat. Ich sagte doch: Für Laien.

        Nichts einfacher als das: sie ist für Dich die Frau Nr. 1 und außerdem die einzige (?). Also brauchst Du sie nicht extra beim Namen zu nennen. ;-)
        Analog zu Kishons "besten Ehefrau von allen".

        Das ist wie beim Militär.

        Ein typisch schlechtes Beispiel.

        Ich meinte nicht das Militär, sondern "rot".

        freundliche Grüße
        Ingo

  2. Ehrlich, so versteh ich gar nix. (Ich hab aber auch nicht gedient).

    Wieso nicht einfach erklären so wie es ist?

    Man definitert in HTML was etwas ist. Ein Absatz, eine Liste, eine Tabelle, ein Bild, eine Überschrift.

    Wie eine Überschrift aussieht wird dort nicht festgelegt.

    Wenn ich als Grafiker meinen Kunden Frage: "Wie lautet die Überschrift im dritten Kapitel?" sagt dieser "Postmoderne und Bilderstürmer". Er ist HTML. Ich bin CSS, ich sage in Quark Xpress oder InDesign, überschrift im Kapitel 3 ist Bold, Univers, Grün.

    Aber ich finde es am verständlichsten wenn man sagt HTML = Inhalt und dessen semantische Struktur, ohne die Optik/Darstellung, CSS = die Optik dieser semantischen Elemente für Anzeigegeräte festlegen.

    Deine Beispiele haben mich eher verwirrt.
    :)

  3. Hallo Kalle.

    Ich persönlich würde die Anwendung von HTML und CSS eher mit einem Hausbau vergleichen.

    Man errichtet das Fundament und das Grundgerüst mit Hilfe der in HTML zur Verfügung gestellten Elemente und Attribute.

    Der Rohbau ist damit fertig, man kann also durchaus schon einziehen (Inhalte) und darin wohnen. Aber etwas hässlich sieht der graue Klotz dennoch aus, es fehlt eindeutig an Farbe.

    Jetzt kommt CSS ins Spiel und bietet einem selbst oder dem engagierten Innenaustatter reichhaltige Möglichkeiten, das gesamte Konstrukt hübscher zu gestalten.
    Hierbei wird man aber wohl kaum noch aus gestalterischen Gründen eine tragende Wand einreißen oder ein zusätzliches Fenster in die Wand hämmern. Man nutzt also das, was zur Verfügung steht und rührt den Grundaufbau nicht mehr an. Und hier kann man recht vielfältig gestalterisch aktiv sein und z. B. nur jeweils die gegenüberliegenden Wände mit einer Farbe bemalen oder nur die Fenster im Kinderzimmer mit verspielten Gardinen ausstatten. Dies sind in CSS die Selektoren.

    Man kann mein Beispiel natürlich noch viel weiter ausschmücken, aber ich denke, dass der grundsätzliche Gedanke deutlich wird.

    Einen schönen Montag noch.

    Gruß, Ashura

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]
  4. Hallo,

    möchte auf meiner Webseite CSS erklären ...

    Ich würde es aus der Sicht des Browsers erklären, vereinfacht:

    „Der Browser hat eine Struktur von massig Elementen, weiss aber nicht, wie er diese darstellen soll. Dazu guckt er in die verlinkte(n) CSS-Resourcen. In diesen stehen viele einzelne Regeln, wie er die einzelnen Elemente darstellen können. Eine Regel kann zum Beispiel sein: »Male den Text in allen Textabsätzen rot.« oder »Verweise in Tabellen werden nicht unterstrichen«. Der Browser geht nun also alle Elemente durch und guckt für jedes Element, welche CSS Regel darauf zutrifft und wendet diese dann an. Wenn er über einen Absatz stolpert findet er die erste Regel und malt den Text dann rot. Wenn er einen Verweis findet, zeichnet er diesen ohne Unterstreichung. Wenn der Browser mehrere Regeln findet, die auf ein und dasselbe Element zutreffen, dann versucht er diese gleichzeitig anzuwenden. Wenn sich zwei Regeln für ein Element widersprechen, dann wendet er nach diesem und jenem Prinzip  die spezifischere an.“

    Der wesentliche Punkt ist hier: Regeln. Man schreibt in CSS allgemeine Regeln, an die sich der Browser dann hält, wenn er auf ein Element trifft, auf das die Regel (bzw. der Selektor der Regel) zutrifft. CSS-Neulinge kapieren oft diesen Aspekt nicht, stattdessen sind sie immer noch dem Ein-Element-direkt-formatieren-Paradigma verhaftet. Und dabei entgeht ihnen eben der Clou von CSS.

    Tim

    1. Hi,

      Ich würde es aus der Sicht des Browsers erklären, vereinfacht:

      „Der Browser hat eine Struktur von massig Elementen, weiss aber nicht, wie er diese darstellen soll. Dazu guckt er in die verlinkte(n) CSS-Resourcen.

      Och nö... das ist so vereinfacht, dass es schon völlig falsch ist.
      1. Das Dokument hat Elemente und eine Struktur.
      2. Der Browser weiss sehr wohl, wie er sie darstellen soll.
      3. Hierzu sieht er als erstes in sein eingebautes Browser-CSS nach und evtl. in die Usereinstellungen.

      freundliche Grüße
      Ingo

      1. Hallo Ingo,

        1. Hierzu sieht er als erstes in sein eingebautes Browser-CSS nach und evtl. in die Usereinstellungen.

        4. Dass er nach den Regeln der Verarbeitung von CSS behandelt. ;)

        Tim