jnslxndr/dabblet.css

## dabblet.css
/*
  [Teil 2 - CSS]
  Beispiele zum Start
*/

/** SELEKTOR Beispiele **/
/*
  Der einfachste Selektor ist der Tag-Name.
  "html" selektiert alle Elemente in der <html></html>
  Node des Dokumentes - also alle :)
  Ohne weitere Zugaben schließt die Auswahl immer alle
  Nachfahren ein!
*/
html {
  color: gray;
}

/** Inline und Boxmodell **/
/* siehe auch: http://www.css4you.de/wsboxmodell/
   oder http://de.wikipedia.org/wiki/Cascading_Style_Sheets#Beispiel */
article h3, a {
  color: black; /* damit wir sehen, was wir meinen */
  /* padding-top hat keine Auswirkung auf
     Inline-Elemente (a), auf die h3-s sehr wohl   */
  padding-top: 20px;
}


/*
  Im Ausschlussverfahren:
  Background und Border
*/
section {
  background-color: #feffef;
  /* Alle sections bekommen an der Unterkante einen
     Trennstrich - eine Art HR-Ersatz */
  border-bottom: 1px dashed black;
}

section:last-child {
  /* ABER das letzte Element (:last-child) nicht! */
  border: none;
}
/* Anmerkung zu den letzten beiden Regeln:
   mit den sogenannten Pseudoklassen :last-child und
   :first-child lassen sich oftmals sinnvolle
   Selektoren schreiben, die einfacher sind als
   extra Klassen im HTML zu vergeben, nur dass wir
   das erste und/oder das letzte Kind bekommen!
   Merke: leiber Psuedo, als Real (im HTML)
*/


/*
  Noch einen Schritt weiter gehen Selektoren
  mit "Funktionen" die eine Sammlung noch einmal
  filtern können - in diesem Falle alle Elemente
  die NICHT das erste Kind sind.
  Der ">" Modifizierer meint alle Kinder(!) nicht
  alle Nachfahren! "> *" Alle Kinder aller Art.
*/
/** Einrücken **/
section#anleitung > *:not(:first-child) {
  margin-left: 25px;
}

/** Noch mehr Pseudo-Klassen **/
/* Wow, so einfach geht ein Rollover-Effekt!?!! */
a:hover {
  font-weight: bold;
}
/* Welche Links, hast du schon besucht? */
a:visited {
  color: fuchsia;
}

/* Überschriften sind Pink! */
h2, h3 {
  color: pink;
}

/*
  Um ein ELement mit einer ID zu finden,
  verwendet man, wie beim Linken auch die
  Raute - den sogenannten "Hash"
*/
#vorbereitung h2 {
  /* Diese Regel überschreibt nun das pink aus der
  anderen Regel. Aber nur die h2-s in der
  #vorbereitung! */
  color: green;
}

/*
  Alle Nachfahren aller "wichtigen" Elemente,
  aber nicht die Elemente selbst!
*/
.wichtig * {
	background-color: yellow;
}

/* Elemente, die "wichtig" sind, aber kein List-Item */
.wichtig:not(li) {
	font-style:italic;
}

/*
  Alle "wichtigen" Elemente, die Nachfahren eines
  UL sind:
*/
ul .wichtig {
	color: red;
}


## dabblet.html

<!DOCTYPE html>
<html>
    <head>
    <title>programming interactivity_Sabine Hipp_Hausaufgabe 7</title>
    </head>

    <body>

        <header id="seitenanfang">
          <h1> Tiefkühlpizza zubereiten</h1>
        </header>

        <section>
            <p>
                Dies ist eine kurze schrittweise Anleitung für die Zubereitung einer Tiefkühlpizza.
            </p>
            <ul>
              <li><a href="#00">Vorbereitung</a></li>
              <li><a href="#01">Anleitung</a></li>
              <li><a href="http://www.joeys.de/">Alternativplan</a></li>
            </ul>
        </section>

        <section id="vorbereitung">
            <h2>Vorbereitung</h2>
            <p>Überprüfe, ob folgende Gegenstände vorhanden sind:</p>
            <ul>
                <li>Tiefkühlschrank</li>
                <li class="wichtig">Ofen</li>
                <li class="wichtig">Ofenrost</li>
                <li class="wichtig">Geschirrschrank</li>
                <li>Teller</li>
            </ul>
        </section>

        <section id="anleitung">
            <h2>Anleitung</h2>

            <article>
              <h3>Schritt 01</h3>
              <p>Gehe zum Tiefkühlschrank</p>
            </article>


            <article class="wichtig">
              <h3>Schritt 02</h3>
              <p>Gehe zum Ofen</p>
            </article>

        </section>

    </body>
</html>

## settings.json
{"view":"split-vertical","prefixfree":"1","page":"css"}
	/*
	[Teil 2 - CSS]
	Beispiele zum Start
	*/

	/ SELEKTOR Beispiele /
	/*
	Der einfachste Selektor ist der Tag-Name.
	"html" selektiert alle Elemente in der <html></html>
	Node des Dokumentes - also alle :)
	Ohne weitere Zugaben schließt die Auswahl immer alle
	Nachfahren ein!
	*/
	html {
	color: gray;
	}

	/ Inline und Boxmodell /
	/* siehe auch: http://www.css4you.de/wsboxmodell/
	oder http://de.wikipedia.org/wiki/Cascading_Style_Sheets#Beispiel */
	article h3, a {
	color: black; /* damit wir sehen, was wir meinen */
	/* padding-top hat keine Auswirkung auf
	Inline-Elemente (a), auf die h3-s sehr wohl */
	padding-top: 20px;
	}


	/*
	Im Ausschlussverfahren:
	Background und Border
	*/
	section {
	background-color: #feffef;
	/* Alle sections bekommen an der Unterkante einen
	Trennstrich - eine Art HR-Ersatz */
	border-bottom: 1px dashed black;
	}

	section:last-child {
	/* ABER das letzte Element (:last-child) nicht! */
	border: none;
	}
	/* Anmerkung zu den letzten beiden Regeln:
	mit den sogenannten Pseudoklassen :last-child und
	:first-child lassen sich oftmals sinnvolle
	Selektoren schreiben, die einfacher sind als
	extra Klassen im HTML zu vergeben, nur dass wir
	das erste und/oder das letzte Kind bekommen!
	Merke: leiber Psuedo, als Real (im HTML)
	*/


	/*
	Noch einen Schritt weiter gehen Selektoren
	mit "Funktionen" die eine Sammlung noch einmal
	filtern können - in diesem Falle alle Elemente
	die NICHT das erste Kind sind.
	Der ">" Modifizierer meint alle Kinder(!) nicht
	alle Nachfahren! "> *" Alle Kinder aller Art.
	*/
	/ Einrücken /
	section#anleitung > *:not(:first-child) {
	margin-left: 25px;
	}

	/ Noch mehr Pseudo-Klassen /
	/* Wow, so einfach geht ein Rollover-Effekt!?!! */
	a:hover {
	font-weight: bold;
	}
	/* Welche Links, hast du schon besucht? */
	a:visited {
	color: fuchsia;
	}

	/* Überschriften sind Pink! */
	h2, h3 {
	color: pink;
	}

	/*
	Um ein ELement mit einer ID zu finden,
	verwendet man, wie beim Linken auch die
	Raute - den sogenannten "Hash"
	*/
	#vorbereitung h2 {
	/* Diese Regel überschreibt nun das pink aus der
	anderen Regel. Aber nur die h2-s in der
	#vorbereitung! */
	color: green;
	}

	/*
	Alle Nachfahren aller "wichtigen" Elemente,
	aber nicht die Elemente selbst!
	*/
	.wichtig * {
	background-color: yellow;
	}

	/* Elemente, die "wichtig" sind, aber kein List-Item */
	.wichtig:not(li) {
	font-style:italic;
	}

	/*
	Alle "wichtigen" Elemente, die Nachfahren eines
	UL sind:
	*/
	ul .wichtig {
	color: red;
	}

	<!DOCTYPE html>
	<html>
	<head>
	<title>programming interactivity_Sabine Hipp_Hausaufgabe 7</title>
	</head>

	<body>

	<header id="seitenanfang">
	<h1> Tiefkühlpizza zubereiten</h1>
	</header>

	<section>
	<p>
	Dies ist eine kurze schrittweise Anleitung für die Zubereitung einer Tiefkühlpizza.
	</p>
	<ul>
	<li><a href="#00">Vorbereitung</a></li>
	<li><a href="#01">Anleitung</a></li>
	<li><a href="http://www.joeys.de/">Alternativplan</a></li>
	</ul>
	</section>

	<section id="vorbereitung">
	<h2>Vorbereitung</h2>
	<p>Überprüfe, ob folgende Gegenstände vorhanden sind:</p>
	<ul>
	<li>Tiefkühlschrank</li>
	<li class="wichtig">Ofen</li>
	<li class="wichtig">Ofenrost</li>
	<li class="wichtig">Geschirrschrank</li>
	<li>Teller</li>
	</ul>
	</section>

	<section id="anleitung">
	<h2>Anleitung</h2>

	<article>
	<h3>Schritt 01</h3>
	<p>Gehe zum Tiefkühlschrank</p>
	</article>


	<article class="wichtig">
	<h3>Schritt 02</h3>
	<p>Gehe zum Ofen</p>
	</article>

	</section>

	</body>
	</html>