<section>
  <section>
    <h2>Was genau ist CSS?</h2>
  </section>

  <section>
    <p>CSS steht für <strong>Cascading Style Sheet</strong>.</p>
    <p>Im Grunde <strong>selektieren</strong> wir bestimmte <em>tags</em> innerhalb der Website anhand spezieller Regeln um diese daraufhin mit bestimmten Instruktionen <em>visuell</em> zu modifizieren.</p>
  </section>

  <section>
    <p>Im Regelfall werden Farben auf Vorder- sowie Hintergründe angewendet;</p>
    <p>Die Schriftart sowie weitere Attribute wie Schriftgröße, Fettdruck und mehr modifiziert;</p>
    <p>Weitere visuelle Effekte wie Schattierungen, Ränder und mehr verwendet;</p>
  </section>

  <section>
    <p>Zusätzlich bietet CSS auch die Möglichkeit, Abstände zwischen Elementen hinzuzufügen;</p>
    <p>Als auch Layouts im HTML zu implementieren;</p>
  </section>

  <section>
    <p>Weitere Features:</p>
    <ul>
      <li>Animationen &amp; Transitionen</li>
      <li>Spezielle Positionierungs-Regeln</li>
      <li>Meta-Attribute stylen</li>
    </ul>
  </section>

  <section>
    <h3>Was bedeutet "Cascading" in CSS?</h3>
  </section>

  <section>
    <p>Cascading bezieht sich auf die Funktionsweise von CSS selber</p>
  </section>

  <section>
    <p>Im Grunde lassen sich CSS-Regeln überschreiben. Dies Funktioniert im ersten Sinne von "Die letzte Regel gilt"</p>
  </section>

  <section>
    <pre class="css"><code data-trim data-line-numbers="1|2,3" is:raw>
      color: blue; // Textfarbe "blau" stellen
      color: red; // Textfarbe "rot" stellen,
      // dies überschreibt das blau aus der ersten Zeile
    </code></pre>
    <p>
      Resultat:
    </p>
    <p><span style="color: blue; color: red;">
      Hallo Welt!
    </span></p>
  </section>

  <section>
    <p>
      Um komplexere Anforderungen zu bewältigen, enthält CSS eine Reihe an weiteren "Regeln", die die <strong>"Spezifität"</strong> eines Selektors bestimmt.
    </p>
  </section>
</section>