Versionen dieses Beitrags

Wiki: Einstieg in CSS - zum Rundgang ausbauen?

Avatar 1 Matthias Scharwies
  • Wiki: Einstieg in CSS - zum Rundgang ausbauen?
  • Servus!
  • > Ich würde (ging's nicht um tutorials) zuerst den Geltungskontext, dann Syntax, Selektoren und Media-Queries (ja auch eine Art Selektor), dann Spezifität.
  • Ok, neuer Vorschlag:
  • 1. [Warum Layouts mit CSS?](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Warum_Layouts_mit_CSS%3F)
  • - Stylesheets einbinden (aus dem Folgekapitel nach vorne gezogen)
  • 2. [Syntax](https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_CSS)
  • - Regelsätze und Deklarationen
  • - typische Fehlerquellen
  • 3. [Selektoren](https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_Selektoren)
  • - Elemente selektieren
  • - Benutzeraktionen sichtbar machen
  • 4. [Box-Modell](https://wiki.selfhtml.org/wiki/CSS/Box-Modell)
  • - „klassisches“ Box-Modell
  • - box-sizing
  • 5. [Media Queries](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Tipps_und_Tricks_f%C3%BCr_media_queries)
  • 6. Kaskade
  • - Spezifität
  • 7. Vererbung
  • Ich war mir nicht sicher, ob wir den vorhandenen Artikel [Warum Layouts mit CSS?](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Warum_Layouts_mit_CSS%3F) mit einbauen sollen?
  • >Erst dann einzelne Eigenschaften besprechen.
  • Im [Syntax](https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_CSS)-Teil ging's ja hauptsächlich und color und background-color; als 4. würde ich schon das Box-Modell nehmen und mögliche Lösungen wie box-sizing besprechen.
  • Im [Syntax](https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_CSS)-Teil ging's ja hauptsächlich um color und background-color; als 4. würde ich schon das Box-Modell nehmen und mögliche Lösungen wie box-sizing besprechen.
  • Erst wenn ich Boxen nebeneinander platziere, kann ich danach die entsprechenden media queries besprechen. Vor allem möchte ich auf Flexbox und Grid hinweisen (nicht Teil des Tutorials) und auf float und position und die möglichen Fallstricke verzichten.
  • >
  • > Tutorials sind aber von der Art:
  • >
  • > - ach lass uns einfach mal ins kalte Wasser springen, systematische Erklärungs gibts später
  • > - oder: wir wollen neu hinzugekommenes kennenlernen und vertiefen.
  • Bei SELFHTML springt man mit einem Beispiel ins nicht zu tiefe Wasser und wagt sich dann weiter rein. Es sind aber immer Hilfen in Form von Erklärungen und weiterführenden Links auf die anderen Seiten da.
  • Herzliche Grüße
  • Matthias Scharwies
  • --
  • Es gibt viel zu tun:
  • *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}

Wiki: Einstieg in CSS - zum Rundgang ausbauen?

Avatar 1 Matthias Scharwies
  • Wiki: Einstieg in CSS - zum Rundgang ausbauen?
  • Servus!
  • > Ich würde (ging's nicht um tutorials) zuerst den Geltungskontext, dann Syntax, Selektoren und Media-Queries (ja auch eine Art Selektor), dann Spezifität.
  • Ok, neuer Vorschlag:
  • 1. [Warum Layouts mit CSS?](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Warum_Layouts_mit_CSS%3F)
  • - Stylesheets einbinden (aus dem Folgekapitel nach vorne gezogen)
  • 2. [Syntax](https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_CSS)
  • - Regelsätze und Deklarationen
  • - typische Fehlerquellen
  • 3. [Selektoren](https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_Selektoren)
  • - Elemente selektieren
  • - Benutzeraktionen sichtbar machen
  • 4. [Box-Modell](https://wiki.selfhtml.org/wiki/CSS/Box-Modell)
  • - „klassisches“ Box-Modell
  • - box-sizing
  • 5. [Media Queries](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Tipps_und_Tricks_f%C3%BCr_media_queries)
  • 6. Kaskade
  • - Spezifität
  • 7. Vererbung
  • Ich war mir nicht sicher, ob wir den vorhandenen Artikel [Warum Layouts mit CSS?](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Warum_Layouts_mit_CSS%3F) mit einbauen sollen?
  • >Erst dann einzelne Eigenschaften besprechen.
  • Im [Syntax](https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_CSS)-Teil ging's ja hauptsächlich und color und background-color; als 4. würde ich schon das Box-Modell nehmen und mögliche Lösungen wie box-sizing besprechen.
  • Erst wenn ich Boxen nebeneinander platziere, kann ich danach die entsprechenden media queries besprechen. Vor allem möchte ich auf Flexbox und Grid hinweisen (nicht Teil des Tutorials) und auf float und position und die möglichen Fallstricke verzichten.
  • >
  • > Tutorials sind aber von der Art:
  • >
  • > - ach lass uns einfach mal ins kalte Wasser springen, systematische Erklärungs gibts später
  • > - oder: wir wollen neu hinzugekommenes kennenlernen und vertiefen.
  • Bei SELFHTML springt man mit einem Beispiel ins nicht zu tiefe Wasser und wagt sich dann weiter rein. Es sind aber immer Hilfen in Form von Erklärungen und weiterführenden Links auf die anderen Seiten da.
  • Herzliche Grüße
  • Matthias Scharwies
  • --
  • Es gibt viel zu tun:
  • *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}

Wiki: Einstieg in CSS - zum Rundgang ausbauen?

Avatar 1 Matthias Scharwies
  • Wiki: Einstieg in CSS - zum Rundgang ausbauen?
  • Servus!
  • > Ich würde (ging's nicht um tutorials) zuerst den Geltungskontext, dann Syntax, Selektoren und Media-Queries (ja auch eine Art Selektor), dann Spezifität.
  • Ok, neuer Vorschlag:
  • 1. [Warum Layouts mit CSS?](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Warum_Layouts_mit_CSS%3F)
  • - Stylesheets einbinden (aus dem Folgekapitel nach vorne gezogen)
  • 2. [Syntax](https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_CSS)
  • - Regelsätze und Deklarationen
  • - typische Fehlerquellen
  • 3. [Selektoren](https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_Selektoren)
  • - Elemente selektieren
  • - Benutzeraktionen sichtbar machen
  • 4. [Box-Modell](https://wiki.selfhtml.org/wiki/CSS/Box-Modell)
  • - box-sizing
  • 5. [Media Queries](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Tipps_und_Tricks_f%C3%BCr_media_queries)
  • 6. Kaskade
  • - Spezifität
  • 7. Vererbung
  • Ich war mir nicht sicher, ob wir den vorhandenen Artikel [Warum Layouts mit CSS?](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Warum_Layouts_mit_CSS%3F) mit einbauen sollen?
  • >Erst dann einzelne Eigenschaften besprechen.
  • Im [Syntax](https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_CSS)-Teil ging's ja hauptsächlich und color und background-color; als 4. würde ich schon das Box-Modell nehmen und mögliche Lösungen wie box-sizing besprechen.
  • Erst wenn ich Boxen nebeneinander platziere, kann ich danach die entsprechenden media queries besprechen. Vor allem möchte ich auf Flexbox und Grid hinweisen (nicht Teil des Tutorials) und auf float und position verzichten.
  • Erst wenn ich Boxen nebeneinander platziere, kann ich danach die entsprechenden media queries besprechen. Vor allem möchte ich auf Flexbox und Grid hinweisen (nicht Teil des Tutorials) und auf float und position und die möglichen Fallstricke verzichten.
  • >
  • > Tutorials sind aber von der Art:
  • >
  • > - ach lass uns einfach mal ins kalte Wasser springen, systematische Erklärungs gibts später
  • > - oder: wir wollen neu hinzugekommenes kennenlernen und vertiefen.
  • Bei SELFHTML springt man mit einem Beispiel ins nicht zu tiefe Wasser und wagt sich dann weiter rein. Es sind aber immer Hilfen in Form von Erklärungen und weiterführenden Links auf die anderen Seiten da.
  • Herzliche Grüße
  • Matthias Scharwies
  • --
  • Es gibt viel zu tun:
  • *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}

Wiki: Einstieg in CSS - zum Rundgang ausbauen?

Avatar 1 Matthias Scharwies
  • Wiki: Einstieg in CSS - zum Rundgang ausbauen?
  • Servus!
  • > Ich würde (ging's nicht um tutorials) zuerst den Geltungskontext, dann Syntax, Selektoren und Media-Queries (ja auch eine Art Selektor), dann Spezifität.
  • Ok, neuer Vorschlag:
  • 1. [Warum Layouts mit CSS?](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Warum_Layouts_mit_CSS%3F)
  • - Stylesheets einbinden (aus dem Folgekapitel nach vorne gezogen)
  • 2. [Syntax](https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_CSS)
  • - Regelsätze und Deklarationen
  • - typische Fehlerquellen
  • 3. [Selektoren](https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_Selektoren)
  • - Elemente selektieren
  • - Benutzeraktionen sichtbar machen
  • 4. [Box-Modell](https://wiki.selfhtml.org/wiki/CSS/Box-Modell)
  • - box-sizing
  • 5. [Media Queries](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Tipps_und_Tricks_f%C3%BCr_media_queries)
  • 6. Kaskade
  • - Spezifität
  • 7. Vererbung
  • Ich war mir nicht sicher, ob wir den vorhandenen Artikel [Warum Layouts mit CSS?](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Warum_Layouts_mit_CSS%3F) mit einbauen sollen?
  • >Erst dann einzelne Eigenschaften besprechen.
  • Im [Syntax](https://wiki.selfhtml.org/wiki/CSS/Einstieg_in_CSS)-Teil ging's ja hauptsächlich und color und background-color; als 4. würde ich schon das Box-Modell nehmen und mögliche Lösungen wie box-sizing besprechen.
  • Erst wenn ich Boxen nebeneinander platziere, kann ich danach die entsprechenden media queries besprechen. Vor allem möchte ich auf Flexbox und Grid hinweisen (nicht Teil des Tutorials) und auf float und position verzichten.
  • >
  • > Tutorials sind aber von der Art:
  • >
  • > - ach lass uns einfach mal ins kalte Wasser springen, systematische Erklärungs gibts später
  • > - oder: wir wollen neu hinzugekommenes kennenlernen und vertiefen.
  • Bei SELFHTML springt man mit einem Beispiel ins nicht zu tiefe Wasser und wagt sich dann weiter rein. Es sind aber immer Hilfen in Form von Links auf die anderen Seiten da.
  • Bei SELFHTML springt man mit einem Beispiel ins nicht zu tiefe Wasser und wagt sich dann weiter rein. Es sind aber immer Hilfen in Form von Erklärungen und weiterführenden Links auf die anderen Seiten da.
  • Herzliche Grüße
  • Matthias Scharwies
  • --
  • Es gibt viel zu tun:
  • *[ToDo-Liste](http://wiki.selfhtml.org/wiki/Kategorie:ToDo)*{: style="display:list-item;list-style-type:disc;font-style:normal;margin:1em 0 0 2em;"}