diff options
Diffstat (limited to 'css.html.markdown')
| -rw-r--r-- | css.html.markdown | 64 |
1 files changed, 34 insertions, 30 deletions
diff --git a/css.html.markdown b/css.html.markdown index 9e8664b3..811767e6 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -4,22 +4,23 @@ 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 --- -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 +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 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. @@ -77,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'] { } @@ -88,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 */ @@ -124,7 +125,7 @@ selected:focus {} #################### */ selector { - + /* Units */ width: 50%; /* in percent */ font-size: 2em; /* times current font-size */ @@ -137,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 */ @@ -149,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 */ @@ -170,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> @@ -185,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: @@ -216,32 +217,35 @@ 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. -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 |