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 - +