diff options
Diffstat (limited to 'css.html.markdown')
| -rw-r--r-- | css.html.markdown | 137 |
1 files changed, 104 insertions, 33 deletions
diff --git a/css.html.markdown b/css.html.markdown index d8f30ca3..1c569d04 100644 --- a/css.html.markdown +++ b/css.html.markdown @@ -6,20 +6,28 @@ 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 --- -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 +36,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...*/ } /* @@ -65,11 +73,11 @@ 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; } -/* 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 +100,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 +111,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 */ @@ -112,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 {} @@ -131,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 */ @@ -142,28 +151,35 @@ 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 */ 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 */ + /* 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 */ - + /* Fonts */ font-family: Arial; /* if the font family name has a space, it must be quoted */ @@ -177,10 +193,10 @@ selector { Save a CSS stylesheet with the extension `.css`. -```xml +```html <!-- You need to include the css file in your page's <head>. This is the recommended method. Refer to http://stackoverflow.com/questions/8284365 --> -<link rel='stylesheet' type='text/css' href='path/to/style.css' /> +<link rel='stylesheet' type='text/css' href='path/to/style.css'> <!-- You can also include some CSS inline in your markup. --> <style> @@ -194,7 +210,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. 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 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. @@ -219,29 +241,78 @@ p { property: value !important; } and the following markup: -```xml -<p style='/*F*/ property:value;' class='class1 class2' attr='value' /> +```html +<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. -* `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. +## Media Queries + +CSS Media Queries are a feature in CSS 3 which allows you to specify when certain CSS rules should be applied, such as when printed, or when on a screen with certain dimensions or pixel density. They do not add to the selector's specifity. + +```css +/* A rule that will be used on all devices */ +h1 { + font-size: 2em; + color: white; + background-color: black; +} + +/* change the h1 to use less ink on a printer */ +@media print { + h1 { + color: black; + background-color: white; + } +} + +/* make the font bigger when shown on a screen at least 480px wide */ +@media screen and (min-width: 480px) { + h1 { + font-size: 3em; + font-weight: normal; + } +} +``` + +Media queries can include these features: +`width`, `height`, `device-width`, `device-height`, `orientation`, `aspect-ratio`, `device-aspect-ratio`, `color`, `color-index`, `monochrome`, `resolution`, `scan`, `grid`. Most of these features can be prefixed with `min-` or `max-`. + +The `resolution` feature is not supported by older devices, instead use `device-pixel-ratio`. + +Many smartphones and tablets will attempt to render the page as if it were on a desktop unless you provide a `viewport` meta-tag. + +```html +<head> + <meta name="viewport" content="width=device-width; initial-scale=1.0"> +</head> +``` + ## 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 -* 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 |