Merge pull request #1439 from duci9y/patch-1

[css/en] Fixed grammar, increased clarity.

1 files changed, 123 insertions, 135 deletions

diff --git a/css.html.markdown b/css.html.markdown
index 811767e6..e3ca94d9 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -5,25 +5,20 @@ contributors:
     - ["Marco Scannadinari", "https://github.com/marcoms"]
     - ["Geoffrey Liu", "https://github.com/g-liu"]
     - ["Connor Shea", "https://github.com/connorshea"]
+    - ["Deepanshu Utkarsh", "https://github.com/duci9y"]
 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
-the content (HTML) and the look-and-feel of web pages.
+In the early days of the web there were no visual elements, just pure text. But with further development of web browsers, fully visual web pages also became common.
 
-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.
+CSS helps maintain separation between the content (HTML) and the look-and-feel of a web page.
 
-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.
+CSS lets you target different elements on an HTML page and assign different visual properties to them.
 
-**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.
+This guide has been written for CSS 2, though CSS 3 is fast becoming popular.
 
+**NOTE:** Because CSS produces visual results, 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.
 
 ```css
 /* comments appear inside slash-asterisk, just like this line!
@@ -33,219 +28,212 @@ The main focus of this article is on the syntax and some general tips.
    ## SELECTORS
    #################### */
 
-/* Generally, the primary statement in CSS is very simple */
+/* the selector is used to target an element on a page.
 selector { property: value; /* more properties...*/ }
 
-/* the selector is used to target an element on page.
-
-You can target all elements on the page using asterisk! */
-* { color:red; }
-
 /*
-Given an element like this on the page:
+Here is an example element:
 
-<div class='some-class class2' id='someId' attr='value' otherAttr='en-us foo bar' />
+<div class='class1 class2' id='anID' attr='value' otherAttr='en-us foo bar' />
 */
 
-/* you can target it by its name */
-.some-class { }
+/* You can target it using one of its CSS classes */
+.class1 { }
 
-/* or by both classes! */
-.some-class.class2 { }
+/* or both classes! */
+.class1.class2 { }
 
-/* or by its element name */
+/* or its name */
 div { }
 
 /* or its id */
-#someId { }
+#anID { }
 
-/* or by the fact that it has an attribute! */
+/* or using 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 (CSS3) */
+/* starts with a value (CSS 3) */
 [attr^='val'] { font-size:smaller; }
 
-/* or ends with (CSS3) */
+/* or ends with a value (CSS 3) */
 [attr$='ue'] { font-size:smaller; }
 
-/* or select by one of the values from the whitespace separated list (CSS3) */
-[otherAttr~='foo'] { font-size:smaller; }
+/* or contains a value in a space-separated list */
+[otherAttr~='foo'] { }
+[otherAttr~='bar'] { }
 
-/* or value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D) */
+/* or contains a value in a dash-separated list, ie, "-" (U+002D) */
 [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
-meaning. */
+/* You can concatenate different selectors to create a narrower selector. Don't
+   put spaces between them. */
 div.some-class[attr$='ue'] { }
 
-/* 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 {}
+/* You can select an element which is a child of another element */
+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 */
-div.some-parent .class-name {}
+/* or a descendant of another element. Children are the direct descendants of
+   their parent element, only one level down the tree. Descendants can be any
+   level down the tree. */
+div.some-parent .class-name { }
 
-/* warning: the same selector without space has another meaning.
-   can you say what? */
-div.some-parent.class-name {}
+/* Warning: the same selector without a space has another meaning.
+   Can you guess what? */
+div.some-parent.class-name { }
 
-/* you also might choose to select an element based on its direct
-   previous sibling */
-.i-am-before + .this-element { }
+/* You may also select an element based on its adjacent sibling */
+.i-am-just-before + .this-element { }
 
-/* or any sibling before this */
-.i-am-any-before ~ .this-element {}
+/* or any sibling preceding it */
+.i-am-any-element-before ~ .this-element { }
 
-/* There are some pseudo classes that allows you to select an element
-   based on its page behaviour (rather than page structure) */
+/* There are some selectors called pseudo classes that can be used to select an
+   element when it is in a particular state */
 
-/* for example for when an element is hovered */
-selector:hover {}
+/* for example, when the cursor hovers over an element */
+selector:hover { }
 
-/* or a visited link */
-selected:visited {}
+/* or a link has been visited */
+selector:visited { }
 
-/* or not visited link */
-selected:link {}
+/* or hasn't been visited */
+selected:link { }
 
-/* or an input element which is focused */
-selected:focus {}
+/* or an element in focus */
+selected:focus { }
 
+/* At appropriate places, an asterisk may be used as a wildcard to select every
+   element */
+* { } /* all elements */
+.parent * { } /* all descendants */
+.parent > * { } /* all children */
 
 /* ####################
    ## 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 */
-    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) */
-
+    
+    /* Units of length can be absolute or relative. */
+    
+    /* Relative units */
+    width: 50%;       /* percentage of parent element width */
+    font-size: 2em;   /* multiples of element's original font-size */
+    font-size: 2rem;  /* or the root element's font-size */
+    font-size: 2vw;   /* multiples of 1% of the viewport's width (CSS 3) */
+    font-size: 2vh;   /* or its height */
+    font-size: 2vmin; /* whichever of a vh or a vw is smaller */
+    font-size: 2vmax; /* or greater */
+    
+    /* Absolute units */
+    width: 200px;     /* pixels */
+    font-size: 20pt;  /* points */
+    width: 5cm;       /* centimeters */
+    min-width: 50mm;  /* millimeters */
+    max-width: 5in;   /* 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 (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); /* quotes inside url() optional */
-
+    color: #F6E;                 /* short hex format */
+    color: #FF66EE;              /* long hex format */
+    color: tomato;               /* a named color */
+    color: rgb(255, 255, 255);   /* as rgb values */
+    color: rgb(10%, 20%, 50%);   /* as rgb percentages */
+    color: rgba(255, 0, 0, 0.3); /* as rgba values (CSS 3) Note: 0 < a < 1 */
+    color: transparent;          /* equivalent to setting the alpha to 0 */
+    color: hsl(0, 100%, 50%);    /* as hsl percentages (CSS 3) */
+    color: hsla(0, 100%, 50%, 0.3); /* as hsla percentages with alpha */
+    
+    /* Images as backgrounds of elements */
+    background-image: url(/img-path/img.jpg); /* quotes inside url() optional */
+    
     /* Fonts */
     font-family: Arial;
-    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 */
+    /* if the font family name has a space, it must be quoted */
+    font-family: "Courier New";
+    /* if the first one is not found, the browser uses the next, and so on */
+    font-family: "Courier New", Trebuchet, Arial, sans-serif;
 }
-
 ```
 
 ## Usage
 
-Save any CSS you want in a file with extension `.css`.
+Save a CSS stylesheet with the extension `.css`.
 
 ```xml
-<!-- you need to include the css file in your page's <head>: -->
+<!-- You need to include the css file in your page's <head>. This is the
+     recommended method. Refer to http://stackoverflow.com/questions/8284365 -->
 <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. -->
+<!-- You can also include some CSS inline in your markup. -->
 <style>
    a { color: purple; }
 </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. -->
 <div style="border: 1px solid red;">
 </div>
-
 ```
 
-## Precedence
+## Precedence or Cascade
 
-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.
+An element may be targeted by multiple selectors and may have a property set on it in more than once. In these cases, one of the rules takes precedence over others. Generally, a rule in a more specific selector take precedence over a less specific one, and a rule occuring later in the stylesheet overwrites a previous one.
+
+This process is called cascading, hence the name Cascading Style Sheets.
 
 Given the following CSS:
 
 ```css
-/*A*/
+/* A */
 p.class1[attr='value']
 
-/*B*/
-p.class1 {}
+/* B */
+p.class1 { }
 
-/*C*/
-p.class2 {}
+/* C */
+p.class2 { }
 
-/*D*/
-p {}
+/* D */
+p { }
 
-/*E*/
+/* E */
 p { property: value !important; }
-
 ```
 
 and the following markup:
 
 ```xml
-<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
-</p>
+<p style='/*F*/ property:value;' class='class1 class2' attr='value' />
 ```
 
-The precedence of style is as followed:
-Remember, the precedence is for each **property**, not for the entire block.
+The precedence of style is as follows. 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`.
+* `E` has the highest precedence because of the keyword `!important`. It is recommended that you avoid its usage.
+* `F` is next, because it is an inline style.
+* `A` is next, because it is more "specific" than anything else. It has 3 specifiers: The name of the element `p`, its class `class1`, an attribute `attr='value'`.
+* `C` is next, even though it has the same specificity as `B`. This is because it appears after `B`.
+* `B` is next.
+* `D` is the last one.
 
 ## 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.
+Most of the features in CSS 2 (and many in CSS 3) are available across all browsers and devices. But it's always good practice to check before using a new feature.
 
-[QuirksMode CSS](http://www.quirksmode.org/css/) is one of the best sources for this.
+## Resources
 
-To run a quick compatibility check, [Can I Use...](http://caniuse.com) is a great resource.
+* To run a quick compatibility check, [CanIUse](http://caniuse.com).
+* CSS Playground [Dabblet](http://dabblet.com/).
+* [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS)
+* [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/)
 
 ## 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/)
+* [Selecting elements using attributes](https://css-tricks.com/almanac/selectors/a/attribute/)
 * [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
+* [SASS](http://sass-lang.com/) and [LESS](http://lesscss.org/) for CSS pre-processing
+* [CSS-Tricks](https://css-tricks.com)