From 500e2855b5cf437322615d4f0f54202448039dab Mon Sep 17 00:00:00 2001
From: valipour <valipour@gmail.com>
Date: Sun, 10 Nov 2013 18:37:34 +0000
Subject: add css article in english

---
 css.html.markdown | 332 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 332 insertions(+)
 create mode 100644 css.html.markdown

(limited to 'css.html.markdown')

diff --git a/css.html.markdown b/css.html.markdown
new file mode 100644
index 00000000..0c1908c8
--- /dev/null
+++ b/css.html.markdown
@@ -0,0 +1,332 @@
+---
+language: css
+contributors:
+    - ["Mohammad Valipour", "https://github.com/mvalipour"]
+---
+
+In early days of web there was no visual elements, just pure text. But with the further development of browser fully visual web pages also became common. CSS is the standard language that exists to keep the separation between the content (HTML) and the look-and-feel of web pages.
+
+In short, what CSS does is to provide a syntax that enables you to target different elements on an HTML page and assign different visual properties to them.
+
+Like any other language, CSS has many versions. Here we focus on CSS2.0 which is not the most recent but the most widely supported and compatible version.
+
+## Selectors
+
+```css
+/* let's stick to the tradition and show how comments are made first! */
+
+/* Generally, the primary statement in CSS is very simple */
+selector { property: value; /* more properties...*/ }
+
+/* the selector is used to target an element on page.
+
+You can target all elments on the page! */
+* { color:red; }
+
+/*
+Given an element like this on the page:
+
+<div class='some-class class2' id='someId' attr='value' />
+*/
+
+/* you can target it by it's class name */
+.some-class { }
+
+/*or by both classes! */
+.some-class.class2 { }
+
+/* or by it's tag name */
+div { }
+
+/* or it's id */
+#someId { }
+
+/* or by the fact that it has an attribute! */
+[attr] { font-size:smaller; }
+
+/* or that the attribute has a specific value */
+[attr='value'] { font-size:smaller; }
+
+/* start with a value*/
+[attr^'val'] { font-size:smaller; }
+
+/* or ends with */
+[attr$='ue'] { font-size:smaller; }
+
+/* or even contains a value */
+[attr~='lu'] { font-size:smaller; }
+
+
+/* and more importantly you can combine these together -- there shouldn't be any space between different parts because that makes it to have another meaning.*/
+div.some-class[attr$='ue'] { }
+
+/* you can also select an element based on how it's parent is.*/
+
+/*an element which is direct child of an element (selected the same way) */
+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 space 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
+
+```css
+/*## Units
+can be like :
+
+- 50%: in percent
+- 2em: two times the current font-size
+- 20px: in pixels
+- 20pt: in point
+- 2cm: centimeter
+- 20mm: millimeter
+- 2in: inches
+
+*/
+
+/* ## Colors 
+
+#F6E  -- can be in short hex
+#F262E2 -- or in long hex format
+red or tomato -- can be a named color
+rgb(255, 255, 255) -- in rgb
+rgb(10%, 20%, 50%) -- in rgb percent
+
+*/
+
+/* ## Font */
+selector {
+    font-style: italic; /* or normal */
+    font-weight: bold; /* or normal, lighter or a number between 100 and 900*/
+    font-size: 2em; /* see units */
+    font-family: Verdana, Arial; /* if the first one is not supported the second one is taken.*/
+}
+
+/* you can set all in one declaration. */
+selector { font: bold italic 12px Consolas; }
+
+/*## Background */
+selector {
+    background-color: red; /* see colors */
+    background-image: url(/path/cat.jpg);
+    background-repeat: no-repaet; /* or repeat or repeat-x or repeat-y */
+    background-attachment: scroll; /* or fixed */
+    background-position: 10px 20px; /* or center, top, bottom, left, right */
+}
+
+/* again you can set all in one declaratio */
+selector { background: red url(image.jpg) no-repeat center top fixed; }
+
+/*## Box model 
+
+All elements (other than inline elements like span) follow a box model
+that consists of the following components.
+
+                             ---------------
+                                margin
+                             ---------------
+                                border
+                             ---------------
+                                padding
+                             ---------------
+| margin | border | padding | [width/height] | padding | border | margin
+                             ---------------
+                                padding
+                             ---------------
+                                border
+                             ---------------
+                                margin
+                             ---------------
+
+of these components all except margin add to the dimention of the element.
+
+e.g. border-left: 10px; width: 100px; border-left: 2px; padding-left:5px;
+    => effective width of the element 117px (given all right components are zero)
+
+*/
+selector {
+    width: 100px;
+    height: 100px;
+
+    padding-top:10px;
+    padding-bottom:10px;
+    padding-left:10px;
+    padding-right:10px;
+
+    margin-top:10px;
+    margin-bottom:10px;
+    margin-left:10px;
+    margin-right:10px;
+    
+    border-top:10px;
+    border-bottom:10px;
+    border-left:10px;
+    border-right:10px;
+}
+
+/* again you can use shorthands 
+
+for padding, margin and border the order is:
+[top] [right] [bottom] [left]*/
+selector {
+    padding: 10px 8px 6px 5px;
+    /* same for margin and border*/
+}
+
+/* a shorter one!
+[top and bottom] [left and right] */
+selector {
+    padding: 6px 5px;
+    /* same for margin and border*/
+}
+
+/* and even shorter!
+[all sides] */
+selector {
+    padding: 6px;
+    /* same for margin and border*/
+}
+
+/*## Positioning
+
+elements are normally following the page flow based on where in the markup they are.
+
+some tags like `div` or `p` are full-width and the rest are inline by default.
+
+but all elements can have their layout changed*/
+selelctor {
+    display: inline; /* inline-block, block, table-cell, et.*/
+}
+
+/* elements can be absolutely positioned -- which means they won't follow the page flow and will be independently positioned on the screen. */
+selector { position:absolute; left: 200px; top:10px; /* or right:10px; bottom:10px; */ }
+
+/* in this case the elements top left will be alighned with the page body.
+
+but if you want it to be relative to an earlier parent.*/
+parent-selector { position:relative; }
+
+/* if you want to have the same thing but moving with scroll: */
+selector { position:fixed; left: 200px; top:10px; /* or right:10px; bottom:10px; */ }
+
+/* when elements appear on the same absolute position. the latest one in the markup appears on top.
+
+unless...*/
+selector { z-index: 2; /* or any number higher than others' */ }
+
+/* if you wish your element to follow the markup layout (not absolutely positioned) but floated to a side in it's parent:*/
+selector { float: left; /* or right */ }
+
+/*## Lists
+
+you can also control how the lists appear on the screen:*/
+
+selector {
+    list-style-type: circle; /* disc | square | decimal | etc... */
+    list-style-position: inside; /* or outside */
+    list-style-image: url(path/image.jpg);
+}
+
+/*as always this can be shorthanded */
+
+selector { list-tyle: disc inside url(...); }
+
+
+```
+
+## Usage
+
+Save any CSS you want in a file with extension `.css`.
+
+```markup
+<!-- 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 markdown:
+```markdown
+<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
+</p>
+```
+
+The precedence of style is as followed:  
+Note that the precedence is for each **property** in the style and 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 the next because it is inline style.
+* `A` is the next because is more "specific" that anything else. more specific = more specifiers. here 3 specifiers: 1 tagname `p` +  class name `class1` + 1 attribute `attr='value'`
+* `C` is the next. although it has the same specificness as `B` but it appears after that.
+* 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)
+
-- 
cgit v1.2.3


From b5409e78f8ff6c47b3f1a39023aeb4f11bca1d9f Mon Sep 17 00:00:00 2001
From: valipour <valipour@gmail.com>
Date: Sun, 10 Nov 2013 20:59:18 +0000
Subject: fix some issues in CSS english

---
 css.html.markdown | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'css.html.markdown')

diff --git a/css.html.markdown b/css.html.markdown
index 0c1908c8..290f1ea3 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -48,7 +48,7 @@ div { }
 [attr='value'] { font-size:smaller; }
 
 /* start with a value*/
-[attr^'val'] { font-size:smaller; }
+[attr^='val'] { font-size:smaller; }
 
 /* or ends with */
 [attr$='ue'] { font-size:smaller; }
@@ -164,10 +164,10 @@ that consists of the following components.
                                 margin
                              ---------------
 
-of these components all except margin add to the dimention of the element.
+of these components all except margin add to the dimension of the element.
 
-e.g. border-left: 10px; width: 100px; border-left: 2px; padding-left:5px;
-    => effective width of the element 117px (given all right components are zero)
+e.g. padding-left: 10px; width: 100px; border-left: 2px;
+    => effective width of the element 112px (given all -right components are zero)
 
 */
 selector {
-- 
cgit v1.2.3


From 11924a8c180e134de470b849445ca0fdffe506e0 Mon Sep 17 00:00:00 2001
From: valipour <valipour@gmail.com>
Date: Sun, 10 Nov 2013 21:09:31 +0000
Subject: add more clarification to border and fix max 80 character line

---
 css.html.markdown | 84 ++++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 61 insertions(+), 23 deletions(-)

(limited to 'css.html.markdown')

diff --git a/css.html.markdown b/css.html.markdown
index 290f1ea3..e421e1b1 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -4,11 +4,16 @@ contributors:
     - ["Mohammad Valipour", "https://github.com/mvalipour"]
 ---
 
-In early days of web there was no visual elements, just pure text. But with the further development of browser fully visual web pages also became common. CSS is the standard language that exists to keep the separation between the content (HTML) and the look-and-feel of web pages.
+In early days of web there was no visual elements, just pure text. But with the  
+further development of browser fully visual web pages also became common.   
+CSS is the standard language that exists to keep the separation between   
+the content (HTML) and the look-and-feel of web pages.
 
-In short, what CSS does is to provide a syntax that enables you to target different elements on an HTML page and assign different visual properties to them.
+In short, what CSS does is to provide a syntax that enables you to target   
+different elements on an HTML page and assign different visual properties to them.
 
-Like any other language, CSS has many versions. Here we focus on CSS2.0 which is not the most recent but the most widely supported and compatible version.
+Like any other language, CSS has many versions. Here we focus on CSS2.0   
+which is not the most recent but the most widely supported and compatible version.
 
 ## Selectors
 
@@ -57,7 +62,9 @@ div { }
 [attr~='lu'] { font-size:smaller; }
 
 
-/* and more importantly you can combine these together -- there shouldn't be any space between different parts because that makes it to have another meaning.*/
+/* and more importantly you can combine these together -- there shouldn't be  
+any space between different parts because that makes it to have another  
+meaning.*/
 div.some-class[attr$='ue'] { }
 
 /* you can also select an element based on how it's parent is.*/
@@ -66,19 +73,23 @@ div.some-class[attr$='ue'] { }
 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 */
+/* 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 space has another meaning. can you say what? */
+/* warning: the same selector wihout space 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 */
+/* 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) */
+/* 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 {}
@@ -184,10 +195,10 @@ selector {
     margin-left:10px;
     margin-right:10px;
     
-    border-top:10px;
-    border-bottom:10px;
-    border-left:10px;
-    border-right:10px;
+    border-top:10px solid red;
+    border-bottom:10px solid red;
+    border-left:10px solid red;
+    border-right:10px solid red;
 }
 
 /* again you can use shorthands 
@@ -213,6 +224,19 @@ selector {
     /* same for margin and border*/
 }
 
+/* border has three components that can be specified separately */
+selector {
+    border-left-style: solid; /* or dotted or dashed*/
+	border-left-color: red;
+	border-left-width: 1px;
+}
+
+/* this breakdown can also be done when the shorthand is used. */
+selector {
+    border-style: solid;
+	/* ... */
+}
+
 /*## Positioning
 
 elements are normally following the page flow based on where in the markup they are.
@@ -224,7 +248,8 @@ selelctor {
     display: inline; /* inline-block, block, table-cell, et.*/
 }
 
-/* elements can be absolutely positioned -- which means they won't follow the page flow and will be independently positioned on the screen. */
+/* elements can be absolutely positioned -- which means they won't follow  
+the page flow and will be independently positioned on the screen. */
 selector { position:absolute; left: 200px; top:10px; /* or right:10px; bottom:10px; */ }
 
 /* in this case the elements top left will be alighned with the page body.
@@ -235,12 +260,14 @@ parent-selector { position:relative; }
 /* if you want to have the same thing but moving with scroll: */
 selector { position:fixed; left: 200px; top:10px; /* or right:10px; bottom:10px; */ }
 
-/* when elements appear on the same absolute position. the latest one in the markup appears on top.
+/* when elements appear on the same absolute position.  
+the latest one in the markup appears on top.
 
 unless...*/
 selector { z-index: 2; /* or any number higher than others' */ }
 
-/* if you wish your element to follow the markup layout (not absolutely positioned) but floated to a side in it's parent:*/
+/* if you wish your element to follow the markup layout (not absolutely positioned)  
+but floated to a side in it's parent:*/
 selector { float: left; /* or right */ }
 
 /*## Lists
@@ -268,12 +295,14 @@ Save any CSS you want in a file with extension `.css`.
 <!-- 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. -->
+<!-- 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. -->
+<!-- or directly set CSS properties on the element. 
+This has to be avoided as much as you can. -->
 <div style='property:value;'>
 </div>
 
@@ -281,7 +310,9 @@ Save any CSS you want in a file with extension `.css`.
 
 ## 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.
+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
@@ -309,18 +340,25 @@ and the following markdown:
 ```
 
 The precedence of style is as followed:  
-Note that the precedence is for each **property** in the style and not for the entire block.
+Note that the precedence is for each **property** in the style and  
+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.
+* `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 the next because it is inline style.
-* `A` is the next because is more "specific" that anything else. more specific = more specifiers. here 3 specifiers: 1 tagname `p` +  class name `class1` + 1 attribute `attr='value'`
-* `C` is the next. although it has the same specificness as `B` but it appears after that.
+* `A` is the next because is more "specific" that anything else.  
+	more specific = more specifiers. here 3 specifiers: 1 tagname `p` +   
+	class name `class1` + 1 attribute `attr='value'`
+* `C` is the next. although it has the same specificness as `B`  
+	but it appears after that.
 * 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.
+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.
 
-- 
cgit v1.2.3


From ede6d0dd99898e7cd2085ddfd726d9abf78ddd69 Mon Sep 17 00:00:00 2001
From: mvalipour <valipour@gmail.com>
Date: Mon, 18 Nov 2013 22:39:13 +0000
Subject: update css article

changed the format of the article to the one suggested in #405
---
 css.html.markdown | 234 +++++++++++-------------------------------------------
 1 file changed, 46 insertions(+), 188 deletions(-)

(limited to 'css.html.markdown')

diff --git a/css.html.markdown b/css.html.markdown
index e421e1b1..1999480f 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -15,10 +15,18 @@ different elements on an HTML page and assign different visual properties to the
 Like any other language, CSS has many versions. Here we focus on CSS2.0   
 which is not the most recent but the most widely supported and compatible version.
 
-## Selectors
+**NOTE:** Because the outcome of CSS is some visual effects, in order to 
+learn it, you need try all different things in a 
+CSS playground like [dabblet](http://dabblet.com/).
+The main focus of this article is on the syntax and some general tips.
+
 
 ```css
-/* let's stick to the tradition and show how comments are made first! */
+/* comments appear inside slash-asterisk, just like this line! */
+
+/* ####################
+   ## SELECTORS
+   ####################*/
 
 /* Generally, the primary statement in CSS is very simple */
 selector { property: value; /* more properties...*/ }
@@ -103,195 +111,47 @@ based on it's page behaviour (rather than page structure) */
 /* or an input element which is focused */
 :focus {}
 
-```
-
-## Properties
-
-```css
-/*## Units
-can be like :
-
-- 50%: in percent
-- 2em: two times the current font-size
-- 20px: in pixels
-- 20pt: in point
-- 2cm: centimeter
-- 20mm: millimeter
-- 2in: inches
-
-*/
 
-/* ## Colors 
+/* ####################
+   ## PROPERTIES
+   ####################*/
 
-#F6E  -- can be in short hex
-#F262E2 -- or in long hex format
-red or tomato -- can be a named color
-rgb(255, 255, 255) -- in rgb
-rgb(10%, 20%, 50%) -- in rgb percent
-
-*/
-
-/* ## Font */
-selector {
-    font-style: italic; /* or normal */
-    font-weight: bold; /* or normal, lighter or a number between 100 and 900*/
-    font-size: 2em; /* see units */
-    font-family: Verdana, Arial; /* if the first one is not supported the second one is taken.*/
-}
-
-/* you can set all in one declaration. */
-selector { font: bold italic 12px Consolas; }
-
-/*## Background */
 selector {
-    background-color: red; /* see colors */
-    background-image: url(/path/cat.jpg);
-    background-repeat: no-repaet; /* or repeat or repeat-x or repeat-y */
-    background-attachment: scroll; /* or fixed */
-    background-position: 10px 20px; /* or center, top, bottom, left, right */
-}
-
-/* again you can set all in one declaratio */
-selector { background: red url(image.jpg) no-repeat center top fixed; }
-
-/*## Box model 
-
-All elements (other than inline elements like span) follow a box model
-that consists of the following components.
-
-                             ---------------
-                                margin
-                             ---------------
-                                border
-                             ---------------
-                                padding
-                             ---------------
-| margin | border | padding | [width/height] | padding | border | margin
-                             ---------------
-                                padding
-                             ---------------
-                                border
-                             ---------------
-                                margin
-                             ---------------
-
-of these components all except margin add to the dimension of the element.
-
-e.g. padding-left: 10px; width: 100px; border-left: 2px;
-    => effective width of the element 112px (given all -right components are zero)
-
-*/
-selector {
-    width: 100px;
-    height: 100px;
-
-    padding-top:10px;
-    padding-bottom:10px;
-    padding-left:10px;
-    padding-right:10px;
-
-    margin-top:10px;
-    margin-bottom:10px;
-    margin-left:10px;
-    margin-right:10px;
     
-    border-top:10px solid red;
-    border-bottom:10px solid red;
-    border-left:10px solid red;
-    border-right:10px solid red;
-}
-
-/* again you can use shorthands 
-
-for padding, margin and border the order is:
-[top] [right] [bottom] [left]*/
-selector {
-    padding: 10px 8px 6px 5px;
-    /* same for margin and border*/
-}
-
-/* a shorter one!
-[top and bottom] [left and right] */
-selector {
-    padding: 6px 5px;
-    /* same for margin and border*/
-}
-
-/* and even shorter!
-[all sides] */
-selector {
-    padding: 6px;
-    /* same for margin and border*/
-}
-
-/* border has three components that can be specified separately */
-selector {
-    border-left-style: solid; /* or dotted or dashed*/
-	border-left-color: red;
-	border-left-width: 1px;
-}
-
-/* this breakdown can also be done when the shorthand is used. */
-selector {
-    border-style: solid;
-	/* ... */
-}
-
-/*## Positioning
-
-elements are normally following the page flow based on where in the markup they are.
-
-some tags like `div` or `p` are full-width and the rest are inline by default.
-
-but all elements can have their layout changed*/
-selelctor {
-    display: inline; /* inline-block, block, table-cell, et.*/
-}
-
-/* elements can be absolutely positioned -- which means they won't follow  
-the page flow and will be independently positioned on the screen. */
-selector { position:absolute; left: 200px; top:10px; /* or right:10px; bottom:10px; */ }
-
-/* in this case the elements top left will be alighned with the page body.
-
-but if you want it to be relative to an earlier parent.*/
-parent-selector { position:relative; }
-
-/* if you want to have the same thing but moving with scroll: */
-selector { position:fixed; left: 200px; top:10px; /* or right:10px; bottom:10px; */ }
-
-/* when elements appear on the same absolute position.  
-the latest one in the markup appears on top.
-
-unless...*/
-selector { z-index: 2; /* or any number higher than others' */ }
-
-/* if you wish your element to follow the markup layout (not absolutely positioned)  
-but floated to a side in it's parent:*/
-selector { float: left; /* or right */ }
-
-/*## Lists
-
-you can also control how the lists appear on the screen:*/
-
-selector {
-    list-style-type: circle; /* disc | square | decimal | etc... */
-    list-style-position: inside; /* or outside */
-    list-style-image: url(path/image.jpg);
+    /* 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 space 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 */
 }
 
-/*as always this can be shorthanded */
-
-selector { list-tyle: disc inside url(...); }
-
-
 ```
 
 ## Usage
 
 Save any CSS you want in a file with extension `.css`.
 
-```markup
+```xml
 <!-- you need to include the css file in your page's <head>: -->
 <link rel='stylesheet' type='text/css' href='filepath/filename.css' />
 
@@ -332,25 +192,23 @@ p {}
 p { property: value !important; }
 
 ```
-
-and the following markdown:
-```markdown
+and the following markup:
+```xml
 <p style='/*F*/ property:value;' class='class1 class2' attr='value'>
 </p>
 ```
 
 The precedence of style is as followed:  
-Note that the precedence is for each **property** in the style and  
-not for the entire block.
+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 the next because it is inline style.
-* `A` is the next because is more "specific" that anything else.  
+* `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 the next. although it has the same specificness as `B`  
-	but it appears after that.
+* `C` is next. although it has the same specificness as `B`  
+	but it appears last.
 * Then is `B`
 * and lastly is `D`.
 
-- 
cgit v1.2.3


From 77facdeafe65b5e4c91e2e63c39e424da3c425b9 Mon Sep 17 00:00:00 2001
From: Adam Bard <github@adambard.com>
Date: Mon, 25 Nov 2013 14:55:07 -0800
Subject: Update css.html.markdown

Fix rendering bug.
---
 css.html.markdown | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

(limited to 'css.html.markdown')

diff --git a/css.html.markdown b/css.html.markdown
index 1999480f..b16b364d 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -71,7 +71,7 @@ div { }
 
 
 /* and more importantly you can combine these together -- there shouldn't be  
-any space between different parts because that makes it to have another  
+any spaaace between different parts because that makes it to have another  
 meaning.*/
 div.some-class[attr$='ue'] { }
 
@@ -85,7 +85,7 @@ div.some-parent > .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 space has another meaning.  
+/* warning: the same selector wihout spaaace has another meaning.  
 can you say what? */
 div.some-parent.class-name {}
 
@@ -140,7 +140,7 @@ selector {
     
     /* Fonts */
     font-family: Arial;
-    font-family: "Courier New"; /* if name has space it appears in double-quote */
+    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 */
 }
@@ -175,6 +175,7 @@ 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']
@@ -192,7 +193,9 @@ p {}
 p { property: value !important; }
 
 ```
+
 and the following markup:
+
 ```xml
 <p style='/*F*/ property:value;' class='class1 class2' attr='value'>
 </p>
-- 
cgit v1.2.3


From 0b2a283db4bc622aaca3c23daa3c39dfd9297db1 Mon Sep 17 00:00:00 2001
From: Adam <adam@adambard.com>
Date: Wed, 29 Jan 2014 23:30:28 -0800
Subject: Updated a lot of filenames

---
 css.html.markdown | 1 +
 1 file changed, 1 insertion(+)

(limited to 'css.html.markdown')

diff --git a/css.html.markdown b/css.html.markdown
index b16b364d..26eaae53 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -2,6 +2,7 @@
 language: css
 contributors:
     - ["Mohammad Valipour", "https://github.com/mvalipour"]
+filename: learncss.css
 ---
 
 In early days of web there was no visual elements, just pure text. But with the  
-- 
cgit v1.2.3


From bceeba2040cb292d3746262ce0e7d43392eb5dfd Mon Sep 17 00:00:00 2001
From: Marco Scannadinari <m@scannadinari.co.uk>
Date: Wed, 26 Feb 2014 21:22:39 +0000
Subject: Add missing semicolons

---
 css.html.markdown | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

(limited to 'css.html.markdown')

diff --git a/css.html.markdown b/css.html.markdown
index 26eaae53..76319340 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -2,6 +2,7 @@
 language: css
 contributors:
     - ["Mohammad Valipour", "https://github.com/mvalipour"]
+    - ["Marco Scannadinari", "https://github.com/marcoms"]
 filename: learncss.css
 ---
 
@@ -129,11 +130,11 @@ selector {
     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: #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 */
-- 
cgit v1.2.3


From 61309e0edfd9ee20a79f2119a31a66bf87b2ee72 Mon Sep 17 00:00:00 2001
From: Matt Lucas <mattlucas@gmail.com>
Date: Wed, 30 Apr 2014 20:00:53 -0400
Subject: Update css.html.markdown

'It's' reflected a grammatical mistake, I adjusted the sentence for a bit of clarity.
---
 css.html.markdown | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'css.html.markdown')

diff --git a/css.html.markdown b/css.html.markdown
index 76319340..9b424a1e 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -44,7 +44,7 @@ Given an element like this on the page:
 <div class='some-class class2' id='someId' attr='value' />
 */
 
-/* you can target it by it's class name */
+/* you can target it by a class name */
 .some-class { }
 
 /*or by both classes! */
-- 
cgit v1.2.3


From 4095671c9250aab8e15473bc73b5db2cdbc95229 Mon Sep 17 00:00:00 2001
From: Matt Lucas <mattlucas@gmail.com>
Date: Thu, 1 May 2014 13:02:04 -0400
Subject: Update css.html.markdown

---
 css.html.markdown | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

(limited to 'css.html.markdown')

diff --git a/css.html.markdown b/css.html.markdown
index 9b424a1e..cdef50cc 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -44,16 +44,16 @@ Given an element like this on the page:
 <div class='some-class class2' id='someId' attr='value' />
 */
 
-/* you can target it by a class name */
+/* you can target it by its name */
 .some-class { }
 
 /*or by both classes! */
 .some-class.class2 { }
 
-/* or by it's tag name */
+/* or by its element name */
 div { }
 
-/* or it's id */
+/* or its id */
 #someId { }
 
 /* or by the fact that it has an attribute! */
@@ -77,12 +77,12 @@ any spaaace between different parts because that makes it to have another
 meaning.*/
 div.some-class[attr$='ue'] { }
 
-/* you can also select an element based on how it's parent is.*/
+/* you can also select an element based on its parent.*/
 
 /*an element which is direct child of an element (selected the same way) */
 div.some-parent > .class-name {}
 
-/* or any of it's parents in the tree */
+/* or any of its 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 {}
@@ -91,7 +91,7 @@ div.some-parent .class-name {}
 can you say what? */
 div.some-parent.class-name {}
 
-/* you also might choose to select an element based on it's direct  
+/* you also might choose to select an element based on its direct  
 previous sibling */
 .i-am-before + .this-element { }
 
@@ -99,7 +99,7 @@ previous sibling */
 .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) */
+based on its page behaviour (rather than page structure) */
 
 /* for example for when an element is hovered */
 :hover {}
-- 
cgit v1.2.3


From 1b90e0f41b8222ac3472e427e401073483760bfa Mon Sep 17 00:00:00 2001
From: Geoffrey Liu <main@g-liu.com>
Date: Sun, 21 Sep 2014 00:22:26 -0700
Subject: Update the CSS tutorial

add more properties, formatting, spelling/grammar, more actual examples
---
 css.html.markdown | 91 +++++++++++++++++++++++++++++++------------------------
 1 file changed, 51 insertions(+), 40 deletions(-)

(limited to 'css.html.markdown')

diff --git a/css.html.markdown b/css.html.markdown
index cdef50cc..e058d691 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -3,6 +3,7 @@ language: css
 contributors:
     - ["Mohammad Valipour", "https://github.com/mvalipour"]
     - ["Marco Scannadinari", "https://github.com/marcoms"]
+    - ["Geoffrey Liu", "https://github.com/g-liu"]
 filename: learncss.css
 ---
 
@@ -24,18 +25,19 @@ The main focus of this article is on the syntax and some general tips.
 
 
 ```css
-/* comments appear inside slash-asterisk, just like this line! */
+/* comments appear inside slash-asterisk, just like this line!
+   there are no "one-line comments"; this is the only comment style */
 
 /* ####################
    ## SELECTORS
-   ####################*/
+   #################### */
 
 /* Generally, the primary statement in CSS is very simple */
 selector { property: value; /* more properties...*/ }
 
 /* the selector is used to target an element on page.
 
-You can target all elments on the page! */
+You can target all elments on the page using asterisk! */
 * { color:red; }
 
 /*
@@ -62,61 +64,61 @@ div { }
 /* or that the attribute has a specific value */
 [attr='value'] { font-size:smaller; }
 
-/* start with a value*/
+/* start with a value (CSS3) */
 [attr^='val'] { font-size:smaller; }
 
-/* or ends with */
+/* or ends with (CSS3) */
 [attr$='ue'] { font-size:smaller; }
 
-/* or even contains a value */
+/* or even contains a value (CSS3) */
 [attr~='lu'] { font-size:smaller; }
 
 
 /* and more importantly you can combine these together -- there shouldn't be  
-any spaaace between different parts because that makes it to have another  
-meaning.*/
+any space between different parts because that makes it to have another  
+meaning. */
 div.some-class[attr$='ue'] { }
 
-/* you can also select an element based on its parent.*/
+/* you can also select an element based on its parent. */
 
-/*an element which is direct child of an element (selected the same way) */
+/* an element which is direct child of an element (selected the same way) */
 div.some-parent > .class-name {}
 
-/* or any of its 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 */
+/* or any of its 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? */
+   can you say what? */
 div.some-parent.class-name {}
 
 /* you also might choose to select an element based on its direct  
-previous sibling */
+   previous sibling */
 .i-am-before + .this-element { }
 
-/*or any sibling before this */
+/* 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 its page behaviour (rather than page structure) */
+   based on its page behaviour (rather than page structure) */
 
 /* for example for when an element is hovered */
-:hover {}
+selector:hover {}
 
-/* or a visited link*/
-:visited {}
+/* or a visited link */
+selected:visited {}
 
-/* or not visited link*/
-:link {}
+/* or not visited link */
+selected:link {}
 
 /* or an input element which is focused */
-:focus {}
+selected:focus {}
 
 
 /* ####################
    ## PROPERTIES
-   ####################*/
+   #################### */
 
 selector {
     
@@ -126,8 +128,12 @@ selector {
     width: 200px; /* in pixels */
     font-size: 20pt; /* in points */
     width: 5cm; /* in centimeters */
-    width: 50mm; /* in millimeters */
-    width: 5in; /* in inches */
+    min-width: 50mm; /* in millimeters */
+    max-width: 5in; /* in inches. max-(width|height) */
+    height: 0.2vh; /* times vertical height of browser viewport (CSS3) */
+    width: 0.4vw; /* times horizontal width of browser viewport (CSS3) */
+    min-height: 0.1vmin; /* the lesser of vertical, horizontal dimensions of browser viewport (CSS3) */
+    max-width: 0.3vmax; /* same as above, except the greater of the dimensions (CSS3) */
     
     /* Colors */
     background-color: #F6E;  /* in short hex */
@@ -135,16 +141,20 @@ selector {
     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 */
+    background-color: rgba(255, 0, 0, 0.3); /* in semi-transparent rgb (CSS3) */
+    background-color: transparent; /* see thru */
+    background-color: hsl(0, 100%, 50%); /* hsl format (CSS3). */
+    background-color: hsla(0, 100%, 50%, 0.3); /* Similar to RGBA, specify opacity at end (CSS3) */
+
     
     /* Images */
-    background-image: url(/path-to-image/image.jpg);
+    background-image: url(/path-to-image/image.jpg); /* quotes inside url() optional */
     
     /* 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 */
+    font-family: "Courier New"; /* if name has spaaace it appears in single or double quotes */
+    font-family: "Courier New", Trebuchet, Arial, sans-serif; /* if first one was not found
+                             browser uses the second font, and so forth */
 }
 
 ```
@@ -155,17 +165,17 @@ 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' />
+<link rel='stylesheet' type='text/css' href='path/to/style.css' />
 
 <!-- you can also include some CSS inline in your markup. However it is highly  
 recommended to avoid this. -->
 <style>
-   selector { property:value; }
+   a { color: purple; }
 </style>
 
 <!-- or directly set CSS properties on the element. 
 This has to be avoided as much as you can. -->
-<div style='property:value;'>
+<div style="border: 1px solid red;">
 </div>
 
 ```
@@ -207,27 +217,28 @@ 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.
+    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'`
+    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.
+    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  
+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.
 
+To run a quick compatibility check, [CanIUse](http://caniuse.com) is a great resource.
+
 ## 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)
-
-- 
cgit v1.2.3


From 4d0c340347925651c8c0e4db560130f9a918d460 Mon Sep 17 00:00:00 2001
From: Denis Malinochkin <dmalinochkin@land.ru>
Date: Mon, 16 Feb 2015 12:44:33 +0300
Subject: [css/en] Fix typos

---
 css.html.markdown | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'css.html.markdown')

diff --git a/css.html.markdown b/css.html.markdown
index e058d691..b93c2842 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -37,7 +37,7 @@ selector { property: value; /* more properties...*/ }
 
 /* the selector is used to target an element on page.
 
-You can target all elments on the page using asterisk! */
+You can target all elements on the page using asterisk! */
 * { color:red; }
 
 /*
@@ -49,7 +49,7 @@ Given an element like this on the page:
 /* you can target it by its name */
 .some-class { }
 
-/*or by both classes! */
+/* or by both classes! */
 .some-class.class2 { }
 
 /* or by its element name */
@@ -89,7 +89,7 @@ div.some-parent > .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.  
+/* warning: the same selector without space has another meaning.  
    can you say what? */
 div.some-parent.class-name {}
 
@@ -152,7 +152,7 @@ selector {
     
     /* Fonts */
     font-family: Arial;
-    font-family: "Courier New"; /* if name has spaaace it appears in single or double quotes */
+    font-family: "Courier New"; /* if name has space it appears in single or double quotes */
     font-family: "Courier New", Trebuchet, Arial, sans-serif; /* if first one was not found
                              browser uses the second font, and so forth */
 }
@@ -230,7 +230,7 @@ Remember, the precedence is for each **property**, not for the entire block.
 ## 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
+all browsers and devices. But it's always vital to have in mind the compatibility 
 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.
-- 
cgit v1.2.3


From e1667cc836cc1b5f43404c0d54c02d38d9480ec8 Mon Sep 17 00:00:00 2001
From: awalGarg <aakarsh1997@gmail.com>
Date: Thu, 19 Feb 2015 00:15:12 +0530
Subject: corrected definition of ~ selector, added |

[attr~='foo'] will not select <el attr="foobar">, it will only select <el attr="bar foo baz">

Also added definition for [attr|='pre'] style selector

Refs: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors, http://jsfiddle.net/awalGarg/72k3ptsk/
---
 css.html.markdown | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

(limited to 'css.html.markdown')

diff --git a/css.html.markdown b/css.html.markdown
index b93c2842..9e8664b3 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -43,7 +43,7 @@ You can target all elements on the page using asterisk! */
 /*
 Given an element like this on the page:
 
-<div class='some-class class2' id='someId' attr='value' />
+<div class='some-class class2' id='someId' attr='value' otherAttr='en-us foo bar' />
 */
 
 /* you can target it by its name */
@@ -70,8 +70,11 @@ div { }
 /* or ends with (CSS3) */
 [attr$='ue'] { font-size:smaller; }
 
-/* or even contains a value (CSS3) */
-[attr~='lu'] { font-size:smaller; }
+/* or select by one of the values from the whitespace separated list (CSS3) */
+[otherAttr~='foo'] { font-size:smaller; }
+
+/* or value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D) */
+[otherAttr|='en'] { font-size:smaller; }
 
 
 /* and more importantly you can combine these together -- there shouldn't be  
-- 
cgit v1.2.3


From 8d48ba536a00f72cd8b960c16f5c9fcaa0badab7 Mon Sep 17 00:00:00 2001
From: Nora Demeter <ndemeter93@gmail.com>
Date: Thu, 1 Oct 2015 16:17:58 -0400
Subject: Fixed some grammatical issues/typos

---
 css.html.markdown | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'css.html.markdown')

diff --git a/css.html.markdown b/css.html.markdown
index 9e8664b3..7224d80a 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -7,19 +7,19 @@ contributors:
 filename: learncss.css
 ---
 
-In early days of web there was no visual elements, just pure text. But with the  
-further development of browser fully visual web pages also became common.   
+In the early days of the web there were no visual elements, just pure text. But with the  
+further development of browsers, fully visual web pages also became common.   
 CSS is the standard language that exists to keep the separation between   
 the content (HTML) and the look-and-feel of web pages.
 
 In short, what CSS does is to provide a syntax that enables you to target   
 different elements on an HTML page and assign different visual properties to them.
 
-Like any other language, CSS has many versions. Here we focus on CSS2.0   
-which is not the most recent but the most widely supported and compatible version.
+Like any other languages, CSS has many versions. Here we focus on CSS2.0,   
+which is not the most recent version, but is the most widely supported and compatible version.
 
-**NOTE:** Because the outcome of CSS is some visual effects, in order to 
-learn it, you need try all different things in a 
+**NOTE:** Because the outcome of CSS consists of visual effects, in order to 
+learn it, you need try everything in a 
 CSS playground like [dabblet](http://dabblet.com/).
 The main focus of this article is on the syntax and some general tips.
 
-- 
cgit v1.2.3


From a009095c2f408928e3c75ed64ff31094230f0827 Mon Sep 17 00:00:00 2001
From: connorshea <connor.james.shea@gmail.com>
Date: Sun, 4 Oct 2015 18:53:55 -0600
Subject: Added some Further Reading Links for CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

And changed CanIUse to “Can I Use…”
---
 css.html.markdown | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'css.html.markdown')

diff --git a/css.html.markdown b/css.html.markdown
index 7224d80a..e217906f 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -4,6 +4,7 @@ contributors:
     - ["Mohammad Valipour", "https://github.com/mvalipour"]
     - ["Marco Scannadinari", "https://github.com/marcoms"]
     - ["Geoffrey Liu", "https://github.com/g-liu"]
+    - ["Connor Shea", "https://github.com/connorshea"]
 filename: learncss.css
 ---
 
@@ -238,10 +239,13 @@ 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.
 
-To run a quick compatibility check, [CanIUse](http://caniuse.com) is a great resource.
+To run a quick compatibility check, [Can I Use...](http://caniuse.com) is a great resource.
 
 ## Further Reading
 
+* [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS)
+* [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/)
 * [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)
+* [SCSS](http://sass-lang.com/) and [LESS](http://lesscss.org/) for CSS pre-processing
-- 
cgit v1.2.3


From 960ee4a1856db8eadb96277bb2422edfa8f2a81c Mon Sep 17 00:00:00 2001
From: Gabriel Halley <gabhalley@gmail.com>
Date: Wed, 7 Oct 2015 23:11:24 -0400
Subject: removing whitespace all over

---
 css.html.markdown | 56 +++++++++++++++++++++++++++----------------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

(limited to 'css.html.markdown')

diff --git a/css.html.markdown b/css.html.markdown
index e217906f..811767e6 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -8,19 +8,19 @@ contributors:
 filename: learncss.css
 ---
 
-In the early days of the web there were no visual elements, just pure text. But with the  
-further development of browsers, fully visual web pages also became common.   
-CSS is the standard language that exists to keep the separation between   
+In the early days of the web there were no visual elements, just pure text. But with the
+further development of browsers, fully visual web pages also became common.
+CSS is the standard language that exists to keep the separation between
 the content (HTML) and the look-and-feel of web pages.
 
-In short, what CSS does is to provide a syntax that enables you to target   
+In short, what CSS does is to provide a syntax that enables you to target
 different elements on an HTML page and assign different visual properties to them.
 
-Like any other languages, CSS has many versions. Here we focus on CSS2.0,   
+Like any other languages, CSS has many versions. Here we focus on CSS2.0,
 which is not the most recent version, but is the most widely supported and compatible version.
 
-**NOTE:** Because the outcome of CSS consists of visual effects, in order to 
-learn it, you need try everything in a 
+**NOTE:** Because the outcome of CSS consists of visual effects, in order to
+learn it, you need try everything in a
 CSS playground like [dabblet](http://dabblet.com/).
 The main focus of this article is on the syntax and some general tips.
 
@@ -78,8 +78,8 @@ div { }
 [otherAttr|='en'] { font-size:smaller; }
 
 
-/* and more importantly you can combine these together -- there shouldn't be  
-any space between different parts because that makes it to have another  
+/* and more importantly you can combine these together -- there shouldn't be
+any space between different parts because that makes it to have another
 meaning. */
 div.some-class[attr$='ue'] { }
 
@@ -89,22 +89,22 @@ div.some-class[attr$='ue'] { }
 div.some-parent > .class-name {}
 
 /* or any of its parents in the tree
-   the following basically means any element that has class "class-name"  
+   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 without space has another meaning.  
+/* warning: the same selector without space has another meaning.
    can you say what? */
 div.some-parent.class-name {}
 
-/* you also might choose to select an element based on its direct  
+/* you also might choose to select an element based on its 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  
+/* There are some pseudo classes that allows you to select an element
    based on its page behaviour (rather than page structure) */
 
 /* for example for when an element is hovered */
@@ -125,7 +125,7 @@ selected:focus {}
    #################### */
 
 selector {
-    
+
     /* Units */
     width: 50%; /* in percent */
     font-size: 2em; /* times current font-size */
@@ -138,7 +138,7 @@ selector {
     width: 0.4vw; /* times horizontal width of browser viewport (CSS3) */
     min-height: 0.1vmin; /* the lesser of vertical, horizontal dimensions of browser viewport (CSS3) */
     max-width: 0.3vmax; /* same as above, except the greater of the dimensions (CSS3) */
-    
+
     /* Colors */
     background-color: #F6E;  /* in short hex */
     background-color: #F262E2; /* in long hex format */
@@ -150,10 +150,10 @@ selector {
     background-color: hsl(0, 100%, 50%); /* hsl format (CSS3). */
     background-color: hsla(0, 100%, 50%, 0.3); /* Similar to RGBA, specify opacity at end (CSS3) */
 
-    
+
     /* Images */
     background-image: url(/path-to-image/image.jpg); /* quotes inside url() optional */
-    
+
     /* Fonts */
     font-family: Arial;
     font-family: "Courier New"; /* if name has space it appears in single or double quotes */
@@ -171,13 +171,13 @@ Save any CSS you want in a file with extension `.css`.
 <!-- you need to include the css file in your page's <head>: -->
 <link rel='stylesheet' type='text/css' href='path/to/style.css' />
 
-<!-- you can also include some CSS inline in your markup. However it is highly  
+<!-- you can also include some CSS inline in your markup. However it is highly
 recommended to avoid this. -->
 <style>
    a { color: purple; }
 </style>
 
-<!-- or directly set CSS properties on the element. 
+<!-- or directly set CSS properties on the element.
 This has to be avoided as much as you can. -->
 <div style="border: 1px solid red;">
 </div>
@@ -186,8 +186,8 @@ This has to be avoided as much as you can. -->
 
 ## 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.  
+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:
@@ -217,24 +217,24 @@ and the following markup:
 </p>
 ```
 
-The precedence of style is as followed:  
+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`.  
+* `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` +   
+* `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`  
+* `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 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 compatibility
 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.
-- 
cgit v1.2.3