added one half of the translated stuff

1 files changed, 226 insertions, 0 deletions

diff --git a/de-de/css-de.html.markdown b/de-de/css-de.html.markdown
new file mode 100644
index 00000000..0f186748
--- /dev/null
+++ b/de-de/css-de.html.markdown
@@ -0,0 +1,226 @@
+---
+language: css
+contributors:
+    - ["Mohammad Valipour", "https://github.com/mvalipour"]
+translators:
+    - ["Kyr", "http://github.com/kyrami"]
+lang: de-de
+---
+
+In den frühen Tagen des Internets gab es keine visuellen Elemente, alles war nur reiner Text. Aber mit der Weiterentwickliung von Browsern wurden auch vollständig visuelle Webseiten zu einem Standard.   
+CSS ist die allgemeine Sprache, die dazu da ist, damit man den HTML-Code und die Designelemente von Webseiten (strikt) unterscheiden kann.
+
+Kurzgefasst, CSS ermöglicht es, verschiedene HTML-Elemente anzuvisieren und ihnen stilistische Eigenschaften zu geben.
+
+CSS hat wie jede andere Sprache viele Versionen. Hier fokussieren wir uns auf CSS2.0, welche nicht die neueste, aber die am weitesten verbreitete und unterstützte Version ist.
+
+**NOTE:** Weil die Ausgabe von CSS visuelle Eigenschaften sind, wirst du wahrscheinlich einen CSS-Playground wie [dabblet](http://dabblet.com/) benutzen müssen, um die Sprache richtig zu lernen.
+In diesem Artikel wird am meisten auf generelle Hinweise und die Syntax geachtet.
+
+
+```css
+/* kommentare werden in sternchen-schrägstrichkombinationen gepackt (genauso wie hier!) */
+
+/* ####################
+   ## SELEKTOREN
+   ####################*/
+
+/* Eigentlich ist die häufigste Anwendungsweise von CSS sehr simpel */
+selektor { eigenschaft: wert; /* mehr eigenschaften...*/ }
+
+/* der selektor wird dazu benutzt, ein element auf der seite anzuvisieren
+
+Aber man kann auch alle Elemente auf einer Seite anvisieren! */
+* { color:red; } /* farbe:rot */
+
+/*
+Wenn wir so ein Element auf einer Seite haben:
+
+<div class='eine-klasse klasse2' id='eineId' attr='wert' />
+*/
+
+/* kann man es so bei seiner klasse anvisieren */
+.eine-klasse { }
+
+/*oder bei beiden klassen! */
+.eine-klasse.klasse2 { }
+
+/* oder beim namen des tags */
+div { }
+
+/* oder bei seiner id */
+#eineId { }
+
+/* oder daran, dass es ein Attribut hat! */
+[attr] { font-size:smaller; }
+
+/* oder daran, dass das attribut einen bestimmten wert hat*/
+[attr='wert'] { font-size:smaller; }
+
+/* beginnt mit einem wert*/
+[attr^='wert'] { font-size:smaller; }
+
+/* oder endet mit */
+[attr$='rt'] { font-size:smaller; }
+
+/* oder sogar nur beinhaltet */
+[attr~='er'] { font-size:smaller; }
+
+
+/* was aber nich wichtiger ist, ist dass man alle diese kombinieren kann - man sollte nur mit der leerzeichensetzung vorsichtig sein, da es mit einem leerzeichen zwei verschiedene selektoren wären*/
+div.eine-klasse[attr$='rt'] { } /* so ist es richtig */
+
+/* man kann auch ein element daran festmachen, wie sich die übergeordneten elemente verhalten!*/
+
+/*es muss allerdings ein direktes kind sein */
+div.some-parent > .class-name {}
+
+/* or any of it's parents in the tree */
+/* the following basically means any element that has class "class-name"  
+and is child of a div with class name "some-parent" IN ANY DEPTH */
+div.some-parent .class-name {}
+
+/* warning: the same selector wihout spaaace has another meaning.  
+can you say what? */
+div.some-parent.class-name {}
+
+/* you also might choose to select an element based on it's direct  
+previous sibling */
+.i-am-before + .this-element { }
+
+/*or any sibling before this */
+.i-am-any-before ~ .this-element {}
+
+/* There are some pseudo classes that allows you to select an element  
+based on it's page behaviour (rather than page structure) */
+
+/* for example for when an element is hovered */
+:hover {}
+
+/* or a visited link*/
+:visited {}
+
+/* or not visited link*/
+:link {}
+
+/* or an input element which is focused */
+:focus {}
+
+
+/* ####################
+   ## PROPERTIES
+   ####################*/
+
+selector {
+    
+    /* Units */
+    width: 50%; /* in percent */
+    font-size: 2em; /* times current font-size */
+    width: 200px; /* in pixels */
+    font-size: 20pt; /* in points */
+    width: 5cm; /* in centimeters */
+    width: 50mm; /* in millimeters */
+    width: 5in; /* in inches */
+    
+    /* Colors */
+    background-color: #F6E  /* in short hex */
+    background-color: #F262E2 /* in long hex format */
+    background-color: tomato /* can be a named color */
+    background-color: rgb(255, 255, 255) /* in rgb */
+    background-color: rgb(10%, 20%, 50%) /* in rgb percent */
+    background-color: rgba(255, 0, 0, 0.3); /* in semi-transparent rgb */
+    
+    /* Images */
+    background-image: url(/path-to-image/image.jpg);
+    
+    /* Fonts */
+    font-family: Arial;
+    font-family: "Courier New"; /* if name has spaaace it appears in double-quote */
+    font-family: "Courier New", Trebuchet, Arial; /* if first one was not found
+    						 browser uses the second font, and so forth */
+}
+
+```
+
+## Usage
+
+Save any CSS you want in a file with extension `.css`.
+
+```xml
+<!-- you need to include the css file in your page's <head>: -->
+<link rel='stylesheet' type='text/css' href='filepath/filename.css' />
+
+<!-- you can also include some CSS inline in your markup. However it is highly  
+recommended to avoid this. -->
+<style>
+   selector { property:value; }
+</style>
+
+<!-- or directly set CSS properties on the element. 
+This has to be avoided as much as you can. -->
+<div style='property:value;'>
+</div>
+
+```
+
+## Precedence
+
+As you noticed an element may be targetted by more than one selector. 
+and may have a property set on it in more than one.  
+In these cases, one of the rules takes precedence over others.
+
+Given the following CSS:
+
+```css
+/*A*/
+p.class1[attr='value']
+
+/*B*/
+p.class1 {}
+
+/*C*/
+p.class2 {}
+
+/*D*/
+p {}
+
+/*E*/
+p { property: value !important; }
+
+```
+
+and the following markup:
+
+```xml
+<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
+</p>
+```
+
+The precedence of style is as followed:  
+Remember, the precedence is for each **property**, not for the entire block.
+
+* `E` has the highest precedence because of the keyword `!important`.  
+	It is recommended to avoid this unless it is strictly necessary to use.
+* `F` is next, because it is inline style.
+* `A` is next, because it is more "specific" than anything else.  
+	more specific = more specifiers. here 3 specifiers: 1 tagname `p` +   
+	class name `class1` + 1 attribute `attr='value'`
+* `C` is next. although it has the same specificness as `B`  
+	but it appears last.
+* Then is `B`
+* and lastly is `D`.
+
+## Compatibility
+
+Most of the features in CSS2 (and gradually in CSS3) are compatible across  
+all browsers and devices. But it's always vital to have in mind the compatiblity  
+of what you use in CSS with your target browsers.
+
+[QuirksMode CSS](http://www.quirksmode.org/css/) is one of the best sources for this.
+
+## Further Reading
+
+* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/)
+* [QuirksMode CSS](http://www.quirksmode.org/css/)
+* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context)
+