Merge remote-tracking branch 'adambard/master'

1 files changed, 92 insertions, 22 deletions

diff --git a/css.html.markdown b/css.html.markdown
index 8ee4f4b9..3b378d44 100644
--- a/css.html.markdown
+++ b/css.html.markdown
@@ -6,17 +6,24 @@ contributors:
     - ["Geoffrey Liu", "https://github.com/g-liu"]
     - ["Connor Shea", "https://github.com/connorshea"]
     - ["Deepanshu Utkarsh", "https://github.com/duci9y"]
+    - ["Brett Taylor", "https://github.com/glutnix"]
     - ["Tyler Mumford", "https://tylermumford.com"]
 filename: learncss.css
 ---
 
-Web pages are built with HTML, which specifies the content of a page. CSS (Cascading Style Sheets) is a separate language which specifies a page's **appearance**.
+Web pages are built with HTML, which specifies the content of a page.
+CSS (Cascading Style Sheets) is a separate language which specifies
+a page's **appearance**.
 
-CSS code is made of static *rules*. Each rule takes one or more *selectors* and gives specific *values* to a number of visual *properties*. Those properties are then applied to the page elements indicated by the selectors.
+CSS code is made of static *rules*. Each rule takes one or more *selectors* and
+gives specific *values* to a number of visual *properties*. Those properties are
+then applied to the page elements indicated by the selectors.
 
-This guide has been written with CSS 2 in mind, which is extended by the new features of CSS 3.
+This guide has been written with CSS 2 in mind, which is extended by the new
+features of CSS 3.
 
-**NOTE:** Because CSS produces visual results, in order to learn it, you need to try everything in a CSS playground like [dabblet](http://dabblet.com/).
+**NOTE:** Because CSS produces visual results, in order to learn it, you need to
+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.
 
 ## Syntax
@@ -66,7 +73,7 @@ div { }
 [otherAttr~='foo'] { }
 [otherAttr~='bar'] { }
 
-/* or contains a value in a dash-separated list, ie, "-" (U+002D) */
+/* or contains a value in a dash-separated list, e.g., "-" (U+002D) */
 [otherAttr|='en'] { font-size:smaller; }
 
 
@@ -113,7 +120,8 @@ selector:first-child {}
 /* any element that is the last child of its parent */
 selector:last-child {}
 
-/* Just like pseudo classes, pseudo elements allow you to style certain parts of a document  */
+/* Just like pseudo classes, pseudo elements allow you to style certain parts of
+    a document  */
 
 /* matches a virtual first child of the selected element */
 selector::before {}
@@ -132,9 +140,9 @@ selector::after {}
    #################### */
 
 selector {
-    
+
     /* 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 */
@@ -143,14 +151,14 @@ selector {
     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 */
     color: #F6E;                 /* short hex format */
     color: #FF66EE;              /* long hex format */
@@ -161,10 +169,17 @@ selector {
     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 hsl percentages with alpha */
-    
+
+    /* Borders */
+    border-width:5px;
+    border-style:solid;
+    border-color:red;      /* similar to how background-color is set */
+    border: 5px solid red; /* this is a short hand approach for the same */
+    border-radius:20px;    /* this is a CSS3 property */    
+
     /* Images as backgrounds of elements */
     background-image: url(/img-path/img.jpg); /* quotes inside url() optional */
-    
+
     /* Fonts */
     font-family: Arial;
     /* if the font family name has a space, it must be quoted */
@@ -178,10 +193,10 @@ selector {
 
 Save a CSS stylesheet with the extension `.css`.
 
-```xml
+```html
 <!-- 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' />
+<link rel='stylesheet' type='text/css' href='path/to/style.css'>
 
 <!-- You can also include some CSS inline in your markup. -->
 <style>
@@ -195,7 +210,13 @@ Save a CSS stylesheet with the extension `.css`.
 
 ## Precedence or Cascade
 
-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. Rules with a more specific selector take precedence over a less specific one, and a rule occuring later in the stylesheet overwrites a previous one.
+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. Rules with a more specific selector take precedence over a less specific
+one, and a rule occurring later in the stylesheet overwrites a previous one
+(which also means that if two different linked stylesheets contain rules for an
+element and if the rules are of the same specificity, then order of linking
+would take precedence and the sheet linked latest would govern styling) .
 
 This process is called cascading, hence the name Cascading Style Sheets.
 
@@ -220,22 +241,71 @@ p { property: value !important; }
 
 and the following markup:
 
-```xml
-<p style='/*F*/ property:value;' class='class1 class2' attr='value' />
+```html
+<p style='/*F*/ property:value;' class='class1 class2' attr='value'>
 ```
 
-The precedence of style is as follows. 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 that you avoid its usage.
+* `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`.
+* `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.
 
+## Media Queries
+
+CSS Media Queries are a feature in CSS 3 which allows you to specify when certain CSS rules should be applied, such as when printed, or when on a screen with certain dimensions or pixel density. They do not add to the selector's specificity.
+
+```css
+/* A rule that will be used on all devices */
+h1 {
+  font-size: 2em;
+  color: white;
+  background-color: black;
+}
+
+/* change the h1 to use less ink on a printer */
+@media print {
+  h1 {
+    color: black;
+    background-color: white;
+  }
+}
+
+/* make the font bigger when shown on a screen at least 480px wide */
+@media screen and (min-width: 480px) {
+  h1 {
+    font-size: 3em;
+    font-weight: normal;
+  }
+}
+```
+
+Media queries can include these features:
+`width`, `height`, `device-width`, `device-height`, `orientation`, `aspect-ratio`, `device-aspect-ratio`, `color`, `color-index`, `monochrome`, `resolution`, `scan`, `grid`. Most of these features can be prefixed with `min-` or `max-`.
+
+The `resolution` feature is not supported by older devices, instead use `device-pixel-ratio`.
+
+Many smartphones and tablets will attempt to render the page as if it were on a desktop unless you provide a `viewport` meta-tag.
+
+```html
+<head>
+  <meta name="viewport" content="width=device-width; initial-scale=1.0">
+</head>
+```
+
 ## Compatibility
 
-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.
+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.
 
 ## Resources