Lego2012

/* Outer shadow */
.shadow {
  -moz-box-shadow: 5px 5px 5px #ccc;
  -webkit-box-shadow: 5px 5px 5px #ccc;
  box-shadow: 5px 5px 5px #ccc;
}

/* Inner shadow */
.shadow {
   -moz-box-shadow:inset 0 0 10px #000000;

Lego2012

#div {
   min-height: 500px;
   height:auto !important;
   height: 500px;
}

Lego2012

/*
Bei dieser Variante wird immer das erste Element und das letzte Element ausgewählt. Zudem wird automatisch über die Pseudoklasse :nth-child(2n) immer das zweite Element innerhalb der Liste ausgewählt und formatiert. Dies macht den CSS-Code nicht nur dynamisch und sauber, sondern sorgt auch für einen einwandfreien HTML-Quellcode.

Mit diesem kleinen Beispiel können wir nachvollziehen, welche Auswirkungen gute CSS-Selektoren auf ein gesamtes Projekt haben können. Nicht nur die CSS-Dateien sind übersichtlich und dynamisch, sondern auch die HTML-Datei ist nicht überfüllt mit unzähligen Klassen und IDs. Besonders bei großen Projekten ist es wichtig, den Überblick zu bewahren.  Zu viele Klassen und IDs können schnell vertauscht werden und lähmen unsere Webseite.

<ul class="list">
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>
    <li>Lorem ipsum</li>

Lego2012

/* The Times New Roman-based serif stack: */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* A modern Georgia-based serif stack:*/
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/*A more traditional Garamond-based serif stack:*/
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/*The Helvetica/Arial-based sans serif stack:*/

Lego2012

p:first-letter {
    display:block;
    margin:5px 0 0 5px;
    float:left;
    color:#FF3366;
    font-size:60px;
    font-family:Georgia;
}

Lego2012

article:first-of-type,
article:last-of-type {
margin: 10px 0;
}

/*
Möchten wir von unserem Dokument das insgesamt erste oder letzte Element von einem Typ selektieren, können wir dafür die Pseudoklasse :first-of-type oder :last-of-type benutzen. In unserem Beispiel erhält das letzte und erste article-Element einen Abstand von 10px nach unten und oben.
*/

Lego2012

p:first-letter {
text-transform: uppercase;
font-weight: bold;
font-size: 28px;
}

/*
Mit :first-letter können wir das erste Zeichnen eines Elementes formatieren. Wir nutzen dies um den ersten Buchstaben von unserem p-Tag uppercase, bold und in 28px darzustellen.
*/

Lego2012

p:first-child::first-letter{
  font-family: "papyrus";
  font-size: 28px;
  font-weight: bold;
}

Lego2012

ul li
{
  float: right;
  margin-right: 10px;
  *display: inline; /*Target IE7 and bellow*/
  _display: inline; /*Target IE6 and bellow*/
}

/*
This example fixes the double right margin bug

Lego2012

p ~ ul {
background-color: #f00;
}

/*
Geschwister-Elemente sind Elemente, die das gleiche Eltern-Element besitzen und somit sich auf einer Ebene befinden. Mit unserem Selektor werden alle Listen-Elemente selektiert, die sich nach dem p-Tag befinden und das gleiche Eltern-Element besitzen. Elemente die das gleiche Eltern-Element besitzen, jedoch vor dem p-Tag stehen, werden nicht selektiert und erhalten keinen roten Hintergrund.
*/