[css/en] several fixes

- Reduced almost all lines to less than 80 characters in length.
- ie -> e.g.
- occuring -> occurring (line 209)
This commit is contained in:
Jacob Ward 2016-03-16 10:37:27 -06:00
parent 319d426507
commit c7a157948b

View File

@ -7,17 +7,23 @@ contributors:
- ["Connor Shea", "https://github.com/connorshea"] - ["Connor Shea", "https://github.com/connorshea"]
- ["Deepanshu Utkarsh", "https://github.com/duci9y"] - ["Deepanshu Utkarsh", "https://github.com/duci9y"]
- ["Tyler Mumford", "https://tylermumford.com"] - ["Tyler Mumford", "https://tylermumford.com"]
filename: learncss.css 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. The main focus of this article is on the syntax and some general tips.
## Syntax ## Syntax
@ -67,7 +73,7 @@ div { }
[otherAttr~='foo'] { } [otherAttr~='foo'] { }
[otherAttr~='bar'] { } [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; } [otherAttr|='en'] { font-size:smaller; }
@ -114,7 +120,8 @@ selector:first-child {}
/* any element that is the last child of its parent */ /* any element that is the last child of its parent */
selector:last-child {} 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 */ /* matches a virtual first child of the selected element */
selector::before {} selector::before {}
@ -133,9 +140,9 @@ selector::after {}
#################### */ #################### */
selector { selector {
/* Units of length can be absolute or relative. */ /* Units of length can be absolute or relative. */
/* Relative units */ /* Relative units */
width: 50%; /* percentage of parent element width */ width: 50%; /* percentage of parent element width */
font-size: 2em; /* multiples of element's original font-size */ font-size: 2em; /* multiples of element's original font-size */
@ -144,14 +151,14 @@ selector {
font-size: 2vh; /* or its height */ font-size: 2vh; /* or its height */
font-size: 2vmin; /* whichever of a vh or a vw is smaller */ font-size: 2vmin; /* whichever of a vh or a vw is smaller */
font-size: 2vmax; /* or greater */ font-size: 2vmax; /* or greater */
/* Absolute units */ /* Absolute units */
width: 200px; /* pixels */ width: 200px; /* pixels */
font-size: 20pt; /* points */ font-size: 20pt; /* points */
width: 5cm; /* centimeters */ width: 5cm; /* centimeters */
min-width: 50mm; /* millimeters */ min-width: 50mm; /* millimeters */
max-width: 5in; /* inches */ max-width: 5in; /* inches */
/* Colors */ /* Colors */
color: #F6E; /* short hex format */ color: #F6E; /* short hex format */
color: #FF66EE; /* long hex format */ color: #FF66EE; /* long hex format */
@ -162,10 +169,10 @@ selector {
color: transparent; /* equivalent to setting the alpha to 0 */ color: transparent; /* equivalent to setting the alpha to 0 */
color: hsl(0, 100%, 50%); /* as hsl percentages (CSS 3) */ color: hsl(0, 100%, 50%); /* as hsl percentages (CSS 3) */
color: hsla(0, 100%, 50%, 0.3); /* as hsl percentages with alpha */ color: hsla(0, 100%, 50%, 0.3); /* as hsl percentages with alpha */
/* Images as backgrounds of elements */ /* Images as backgrounds of elements */
background-image: url(/img-path/img.jpg); /* quotes inside url() optional */ background-image: url(/img-path/img.jpg); /* quotes inside url() optional */
/* Fonts */ /* Fonts */
font-family: Arial; font-family: Arial;
/* if the font family name has a space, it must be quoted */ /* 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 ## 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. This process is called cascading, hence the name Cascading Style Sheets.
@ -225,18 +238,25 @@ and the following markup:
<p style='/*F*/ property:value;' class='class1 class2' attr='value' /> <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. * `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'`. * `A` is next, because it is more "specific" than anything else. It has 3
* `C` is next, even though it has the same specificity as `B`. This is because it appears after `B`. 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. * `B` is next.
* `D` is the last one. * `D` is the last one.
## Compatibility ## 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 ## Resources