====== CSS ======

===== Reset =====

Meist wird zu Beginn eines Stylesheets die Standard-Darstellung der Browser "zurückgesetzt", z.B. mittels:

<code css>
* {
	margin: 0;
	padding: 0;
}
</code>

Alternativ dazu gibt es sogenannte "CSS Resets", die meist besser und umfangreicher sind:

  * [[http://necolas.github.io/normalize.css/|normalize.css]]

===== Debugging =====

Fügt an alle HTML-Elemente einen transparent-roten Hintergrund und einen roten Rahmen an:

<code css>
html * {
    background: rgba(255, 0, 0, .1);
    box-shadow: 0 0 0 1px red;
}
</code>

Quelle: [[https://dev.to/dink/comment/f20o|DEV Community: Re: My Favorite CSS Hack]]

===== Zentrieren =====

[[http://howtocenterincss.com/|How To Center In CSS]]

===== calc() =====

[[https://developer.mozilla.org/en-US/docs/Web/CSS/calc|MDN: calc()]]

===== Leerzeichen in der Content-Eigenschaft =====

Reguläre Leerzeichen in der Eigenschaft ''content'' werden nicht immer angezeigt, statt dessen muss ein geschütztes Leerzeichen eingesetzt werden, dies geht z.B. mit dem Unicode ''U00A0'':

<code css>

p:after {
	content: '\00a0';
}

</code>

Quelle: [[http://stackoverflow.com/a/5467676|Stack Overflow: Add a space (" ") after an element using :after]]

===== Responsive Design =====

> -webkit-text-size-adjust: 100%; has same effect as none in MobileSafari but doesn't prevent user from zooming text in desktop Safari.

Quelle: [[https://twitter.com/shauninman/status/387088251082665984|@shauninman]]

===== Animation =====

  * [[animation|Animation mit CSS3]]

===== Literatur =====

  * Müller, Peter: //Einstieg in CSS: Webseiten gestalten mit HTML und CSS//. Rheinwerk Computing, 2015.
    * [[https://www.rheinwerk-verlag.de/3806/|Reihnwerk-Verlag: Einstieg in CSS: Webseiten gestalten mit HTML und CSS]]

===== Links =====

  * [[http://wiki.selfhtml.org/wiki/CSS/Anwendung_und_Praxis/Guter_CSS-Stil|SELFHTML-Wiki: Guter CSS-Stil]]
  * [[https://pinboard.in/u:aberaberarne/t:css|Arnes Link-Sammlung zu CSS]]

==== Tutorials ====

=== Kostenpflichtige Tutorials ===

  * [[https://www.codeschool.com/paths/html-css|Code School: HTML/CSS]]
  * [[https://www.video2brain.com/de/videotraining/html-und-css-fuer-designer|video2brain: HTML und CSS für Designer]]
  * [[https://www.video2brain.com/de/videotraining/webprogrammierung-grundlagen|video2brain: Webprogrammierung: Grundlagen]]
  * [[https://www.video2brain.com/de/videotraining/css-layouts-fuer-fortgeschrittene|video2brain: CSS-Layouts für Fortgeschrittene]]
  * [[https://www.video2brain.com/de/videotraining/css-debuggen|video2brain: CSS debuggen]]
  * [[https://www.video2brain.com/de/videotraining/css3-fuer-webdesigner|video2brain: CSS3 für Webdesigner]]
  * [[https://www.video2brain.com/de/videotraining/animationen-in-css3|video2brain: Animationen in CSS3]]