diff options
Diffstat (limited to 'css.html.markdown')
| -rw-r--r-- | css.html.markdown | 36 |
1 files changed, 19 insertions, 17 deletions
diff --git a/css.html.markdown b/css.html.markdown index d8f30ca3..4ec95f8b 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -6,20 +6,22 @@ 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. - -CSS helps maintain separation between the content (HTML) and the look-and-feel of a web page. +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 lets you target different elements on an HTML page and assign different visual properties to them. +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 for CSS 2, though CSS 3 is fast becoming popular. +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 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 +30,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 +71,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 +94,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 +105,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 +158,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 +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. 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 (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. @@ -238,10 +240,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 |