summaryrefslogtreecommitdiffhomepage
path: root/css.html.markdown
diff options
context:
space:
mode:
authorGeoffrey Liu <main@g-liu.com>2014-09-21 00:22:26 -0700
committerGeoffrey Liu <main@g-liu.com>2014-09-21 00:22:26 -0700
commit1b90e0f41b8222ac3472e427e401073483760bfa (patch)
tree827dec74ae4002beac0a4270f48b9f687a480f75 /css.html.markdown
parentd12bfcdc18a5855fd5281f8a3a3395d8bfae7ab4 (diff)
Update the CSS tutorial
add more properties, formatting, spelling/grammar, more actual examples
Diffstat (limited to 'css.html.markdown')
-rw-r--r--css.html.markdown91
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)
-