From 4d0c340347925651c8c0e4db560130f9a918d460 Mon Sep 17 00:00:00 2001 From: Denis Malinochkin Date: Mon, 16 Feb 2015 12:44:33 +0300 Subject: [css/en] Fix typos --- css.html.markdown | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'css.html.markdown') diff --git a/css.html.markdown b/css.html.markdown index e058d691..b93c2842 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -37,7 +37,7 @@ selector { property: value; /* more properties...*/ } /* the selector is used to target an element on page. -You can target all elments on the page using asterisk! */ +You can target all elements on the page using asterisk! */ * { color:red; } /* @@ -49,7 +49,7 @@ Given an element like this on the page: /* you can target it by its name */ .some-class { } -/*or by both classes! */ +/* or by both classes! */ .some-class.class2 { } /* or by its element name */ @@ -89,7 +89,7 @@ div.some-parent > .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. +/* warning: the same selector without space has another meaning. can you say what? */ div.some-parent.class-name {} @@ -152,7 +152,7 @@ selector { /* Fonts */ font-family: Arial; - font-family: "Courier New"; /* if name has spaaace it appears in single or double quotes */ + 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 */ } @@ -230,7 +230,7 @@ Remember, the precedence is for each **property**, not for the entire block. ## 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 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. -- cgit v1.2.3 From e1667cc836cc1b5f43404c0d54c02d38d9480ec8 Mon Sep 17 00:00:00 2001 From: awalGarg Date: Thu, 19 Feb 2015 00:15:12 +0530 Subject: corrected definition of ~ selector, added | [attr~='foo'] will not select , it will only select Also added definition for [attr|='pre'] style selector Refs: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors, http://jsfiddle.net/awalGarg/72k3ptsk/ --- css.html.markdown | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'css.html.markdown') diff --git a/css.html.markdown b/css.html.markdown index b93c2842..9e8664b3 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -43,7 +43,7 @@ You can target all elements on the page using asterisk! */ /* Given an element like this on the page: -
+
*/ /* you can target it by its name */ @@ -70,8 +70,11 @@ div { } /* or ends with (CSS3) */ [attr$='ue'] { font-size:smaller; } -/* or even contains a value (CSS3) */ -[attr~='lu'] { font-size:smaller; } +/* or select by one of the values from the whitespace separated list (CSS3) */ +[otherAttr~='foo'] { font-size:smaller; } + +/* or value can be exactly “value” or can begin with “value” immediately followed by “-” (U+002D) */ +[otherAttr|='en'] { font-size:smaller; } /* and more importantly you can combine these together -- there shouldn't be -- cgit v1.2.3 From 8d48ba536a00f72cd8b960c16f5c9fcaa0badab7 Mon Sep 17 00:00:00 2001 From: Nora Demeter Date: Thu, 1 Oct 2015 16:17:58 -0400 Subject: Fixed some grammatical issues/typos --- css.html.markdown | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'css.html.markdown') diff --git a/css.html.markdown b/css.html.markdown index 9e8664b3..7224d80a 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -7,19 +7,19 @@ contributors: 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. +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 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. -- cgit v1.2.3 From a009095c2f408928e3c75ed64ff31094230f0827 Mon Sep 17 00:00:00 2001 From: connorshea Date: Sun, 4 Oct 2015 18:53:55 -0600 Subject: Added some Further Reading Links for CSS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit And changed CanIUse to “Can I Use…” --- css.html.markdown | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'css.html.markdown') diff --git a/css.html.markdown b/css.html.markdown index 7224d80a..e217906f 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -4,6 +4,7 @@ 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 --- @@ -238,10 +239,13 @@ 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 -- cgit v1.2.3 From 960ee4a1856db8eadb96277bb2422edfa8f2a81c Mon Sep 17 00:00:00 2001 From: Gabriel Halley Date: Wed, 7 Oct 2015 23:11:24 -0400 Subject: removing whitespace all over --- css.html.markdown | 56 +++++++++++++++++++++++++++---------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) (limited to 'css.html.markdown') diff --git a/css.html.markdown b/css.html.markdown index e217906f..811767e6 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -8,19 +8,19 @@ contributors: 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 +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 languages, CSS has many versions. Here we focus on CSS2.0, +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 consists of visual effects, in order to -learn it, you need try everything 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. @@ -78,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'] { } @@ -89,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 */ @@ -125,7 +125,7 @@ selected:focus {} #################### */ selector { - + /* Units */ width: 50%; /* in percent */ font-size: 2em; /* times current font-size */ @@ -138,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 */ @@ -150,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 */ @@ -171,13 +171,13 @@ Save any CSS you want in a file with extension `.css`. - -
@@ -186,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: @@ -217,24 +217,24 @@ and the following markup:

``` -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. -- cgit v1.2.3 From 689bb106f5e0a4da882e84a30633c6cab370d771 Mon Sep 17 00:00:00 2001 From: duci9y Date: Sat, 10 Oct 2015 14:59:30 +0530 Subject: [css/en] Fixed grammar, increased clarity. Also fixed extraneous whitespace, code mistakes, made sure line width was <80 characters. --- css.html.markdown | 258 ++++++++++++++++++++++++++---------------------------- 1 file changed, 123 insertions(+), 135 deletions(-) (limited to 'css.html.markdown') 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: -
+
*/ -/* 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 - + - + - +
- ``` -## 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 -

-

+

``` -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) -- cgit v1.2.3 From 622d4485ab9efd265be83d16abbe8cb12da7934c Mon Sep 17 00:00:00 2001 From: Kara Kincaid Date: Sat, 10 Oct 2015 08:20:03 -0400 Subject: [css/en] Added more pseudo-classes and pseudo-elements examples --- css.html.markdown | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'css.html.markdown') diff --git a/css.html.markdown b/css.html.markdown index 811767e6..4c459f7f 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -119,6 +119,19 @@ selected:link {} /* or an input element which is focused */ selected:focus {} +/* any element that is the first child of its parent */ +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 */ + +/* matches a virtual first child of the selected element */ +selector::before {} + +/* matches a virtual last child of the selected element */ +selector::after {} /* #################### ## PROPERTIES -- cgit v1.2.3 From 341b92141c28b13cac8b41913f25a50a0a8b6066 Mon Sep 17 00:00:00 2001 From: Tyler Date: Sun, 25 Oct 2015 17:15:23 -0600 Subject: Update CSS for clarity. - More relevant introduction - More consistent and clear wording - More consistent formatting --- css.html.markdown | 35 ++++++++++++++++++----------------- 1 file changed, 18 insertions(+), 17 deletions(-) (limited to 'css.html.markdown') diff --git a/css.html.markdown b/css.html.markdown index d8f30ca3..8ee4f4b9 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -6,20 +6,21 @@ contributors: - ["Geoffrey Liu", "https://github.com/g-liu"] - ["Connor Shea", "https://github.com/connorshea"] - ["Deepanshu Utkarsh", "https://github.com/duci9y"] + - ["Tyler Mumford", "https://tylermumford.com"] filename: learncss.css --- -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. +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 helps maintain separation between the content (HTML) and the look-and-feel of a web page. +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 lets you target different elements on an HTML page and assign different visual properties to them. +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 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/). +**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 + ```css /* comments appear inside slash-asterisk, just like this line! there are no "one-line comments"; this is the only comment style */ @@ -28,7 +29,7 @@ The main focus of this article is on the syntax and some general tips. ## SELECTORS #################### */ -/* the selector is used to target an element on a page. +/* the selector is used to target an element on a page. */ selector { property: value; /* more properties...*/ } /* @@ -69,7 +70,7 @@ div { } [otherAttr|='en'] { font-size:smaller; } -/* You can concatenate different selectors to create a narrower selector. Don't +/* You can combine different selectors to create a more focused selector. Don't put spaces between them. */ div.some-class[attr$='ue'] { } @@ -92,7 +93,7 @@ div.some-parent.class-name { } .i-am-any-element-before ~ .this-element { } /* There are some selectors called pseudo classes that can be used to select an - element when it is in a particular state */ + element only when it is in a particular state */ /* for example, when the cursor hovers over an element */ selector:hover { } @@ -103,7 +104,7 @@ selector:visited { } /* or hasn't been visited */ selected:link { } -/* or an element in focus */ +/* or an element is in focus */ selected:focus { } /* any element that is the first child of its parent */ @@ -156,10 +157,10 @@ selector { 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: 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 */ + color: hsla(0, 100%, 50%, 0.3); /* as hsl percentages with alpha */ /* Images as backgrounds of elements */ background-image: url(/img-path/img.jpg); /* quotes inside url() optional */ @@ -194,7 +195,7 @@ 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. 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. +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. This process is called cascading, hence the name Cascading Style Sheets. @@ -238,10 +239,10 @@ Most of the features in CSS 2 (and many in CSS 3) are available across all brows ## Resources -* 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/) +* [CanIUse](http://caniuse.com) (Detailed compatibility info) +* [Dabblet](http://dabblet.com/) (CSS playground) +* [Mozilla Developer Network's CSS documentation](https://developer.mozilla.org/en-US/docs/Web/CSS) (Tutorials and reference) +* [Codrops' CSS Reference](http://tympanus.net/codrops/css_reference/) (Reference) ## Further Reading -- cgit v1.2.3 From fc1dd9d6af6f1e99c29655a766fda19d78440ee3 Mon Sep 17 00:00:00 2001 From: Rajat Gupta Date: Fri, 29 Jan 2016 11:34:28 +0530 Subject: Update css.html.markdown Updated CSS for clarity. --- css.html.markdown | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'css.html.markdown') diff --git a/css.html.markdown b/css.html.markdown index 8ee4f4b9..01fdbf4f 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -7,6 +7,7 @@ contributors: - ["Connor Shea", "https://github.com/connorshea"] - ["Deepanshu Utkarsh", "https://github.com/duci9y"] - ["Tyler Mumford", "https://tylermumford.com"] + - ["Rajat Gupta","httpd://github.com/rajat-explorer"] filename: learncss.css --- @@ -195,7 +196,7 @@ 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 occuring later in the stylesheet overwrites a previous one (which also means that if two different linked stylesheets contain rules for a block and if the rules below don't differentiate them, 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. -- cgit v1.2.3 From e85f9bf8f247becb78dda2d798e8ed173e1d041b Mon Sep 17 00:00:00 2001 From: Rajat Gupta Date: Fri, 5 Feb 2016 13:44:40 +0530 Subject: Update css.html.markdown --- css.html.markdown | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'css.html.markdown') diff --git a/css.html.markdown b/css.html.markdown index 01fdbf4f..4ec95f8b 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -7,7 +7,7 @@ contributors: - ["Connor Shea", "https://github.com/connorshea"] - ["Deepanshu Utkarsh", "https://github.com/duci9y"] - ["Tyler Mumford", "https://tylermumford.com"] - - ["Rajat Gupta","httpd://github.com/rajat-explorer"] + filename: learncss.css --- @@ -196,7 +196,7 @@ 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 (which also means that if two different linked stylesheets contain rules for a block and if the rules below don't differentiate them, then order of linking would take precedence and the sheet linked latest would govern styling) . +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 (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. -- cgit v1.2.3 From c7a157948bf54b15cb2eb4e5635218c101aead2e Mon Sep 17 00:00:00 2001 From: Jacob Ward Date: Wed, 16 Mar 2016 10:37:27 -0600 Subject: [css/en] several fixes - Reduced almost all lines to less than 80 characters in length. - ie -> e.g. - occuring -> occurring (line 209) --- css.html.markdown | 58 +++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 39 insertions(+), 19 deletions(-) (limited to 'css.html.markdown') diff --git a/css.html.markdown b/css.html.markdown index 4ec95f8b..5dae06ca 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -7,17 +7,23 @@ contributors: - ["Connor Shea", "https://github.com/connorshea"] - ["Deepanshu Utkarsh", "https://github.com/duci9y"] - ["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 @@ -67,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; } @@ -114,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 {} @@ -133,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 */ @@ -144,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 */ @@ -162,10 +169,10 @@ 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 */ - + /* 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 */ @@ -196,7 +203,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 (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) . +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. @@ -225,18 +238,25 @@ and the following markup:

``` -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. ## 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 -- cgit v1.2.3 From 36ab227827c371721066ebfbc954ce3eaeaf2aa3 Mon Sep 17 00:00:00 2001 From: Nimit Shah Date: Fri, 8 Jul 2016 23:42:03 +0530 Subject: [CSS/en] Adding border related styleguides (#2301) * Adding border related styleguides Adding border related styleguides. Most of the modern designs have borders for their elements. * Spacing the comments like the rest of the file --- css.html.markdown | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'css.html.markdown') diff --git a/css.html.markdown b/css.html.markdown index 5dae06ca..fc07fce4 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -169,6 +169,13 @@ 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 */ -- cgit v1.2.3 From 5252f94a17dc63f8fddaeb0d206bb0c30d4cfb70 Mon Sep 17 00:00:00 2001 From: Brett Taylor Date: Tue, 6 Sep 2016 20:30:22 +1200 Subject: [css/en] Add media queries section, demonstrating basics of print and mobile media queries. (#1637) Also improved link to Can I Use Change HTML snippets to HTML 5 Fix minor whitespace issues Add myself as a contributor --- css.html.markdown | 52 +++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 47 insertions(+), 5 deletions(-) (limited to 'css.html.markdown') diff --git a/css.html.markdown b/css.html.markdown index fc07fce4..1952d21f 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -6,8 +6,8 @@ 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 --- @@ -193,10 +193,10 @@ selector { Save a CSS stylesheet with the extension `.css`. -```xml +```html - +