Merge pull request #779 from g-liu/en-css

Update the CSS tutorial

1 files changed, 51 insertions, 40 deletions

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)
-