~~NOTOC~~
[[htmlcss:html_css_lektion_05|=> Lektion 5: Einführung in CSS]]

====== Lektion 6: DIVs als gruppierende Elemente  ======

Mit Hilfe von DIVs ist es möglich, mehrere Elemente zu einem Bereich zusammenzufügen. Es wird lediglich in einer neuen Zeile des Fließtextes begonnen. So ist der div-Container nicht nur zur Formatierung mit Hilfe von CSS gedacht.

DIVs begrenzen also HTML-Bereiche. Die Kleine-Bruder-Version eines DIVs ist der SPAN. Zusammen mit css-Elementen wird ihr Einsatz klar.

{{  :work.png|}}
===== Übung 8 =====

  * Teste folgende Beispiele selbst aus, um zu erkennen, wie ''div'' und ''span'' funktionieren. Dir wird dann sicher auch bewusst, was mit //Block-Element// bzw. mit //Inline-Element// gemeint ist.

**Beispiel: Block-Element DIV**
   <div style="background-color:lightgrey;">
     <h1> Überschrift </h1>
     <p> Textabsatz </p>
   </div>

**Beispiel: Inline-Element SPAN**
   <p> ein Text mit <span style="background-color:yellow;">Textmarker</span> markiert.</p>

<note important>Es ist allerdings unschön, die ''style''-Attribute in HTML zu verwenden, da es dem Prinzip der Trennung von Inhalt und Layout widerspricht. Vgl. [[htmlcss:html_css_lektion_05|=> Übung in Lektion 5]]</note>

  * Speichere die Datei entsprechend ab, so dass du sie in der nächsten Lektion weiter verwenden kannst.

Im Folgenden werden wir ''style'' nicht weiter verwenden und mit den nun vorgestellten Attributen ''id'' und ''class'' arbeiten.

----
[[htmlcss:html_css_lektion_07|=> Lektion 7: Attribute in HTML sprechen Selektoren im CSS an]]\\ 
[[htmlcss:start|=> Übersicht: HTML und CSS]]