Cascade Style Sheets: Difference between revisions
No edit summary |
|||
| (10 intermediate revisions by the same user not shown) | |||
| Line 37: | Line 37: | ||
[[Styling Fonts and Text]] | [[Styling Fonts and Text]] | ||
== Positioning Elements == | == Positioning Elements aka ''The Box'' == | ||
[[Positioning Elements]] | [[Positioning Elements]] | ||
== Basic Page Layout == | |||
[[Basic Page Layout]] | |||
== Tips creating styles == | |||
To eliminate the difference between user agents always zero out margins and padding on all elements. | |||
Example: | |||
<pre>* {margin:0; padding:0;}</pre> | |||
== Helpful links == | |||
[http://www.w3.org/Style/CSS/ Cascading Style Sheets home page] | |||
[http://www.w3.org/Style/CSS/current-work Cascading Style Sheets Current Work] | |||
[http://www.w3.org/TR/CSS21/ Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification] | |||
[http://www.w3.org/TR/REC-CSS2/ Cascading Style Sheets, level 2 CSS2 Specification] | |||
[http://www.w3.org/TR/REC-CSS1 Cascading Style Sheets, level 1 CSS1 Specification] | |||
[http://www.cssmenumaker.com/ CSS Menu Maker] | |||
== Interesting CSS resources == | |||
[https://svgontheweb.com/ SVG on the Web] A Practical Guide | |||
[https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/ Viewport Units vm vh vmin vmax] | |||
[https://medium.com/@aniboaz/animate-svg-4fa7dd00e860 Animate SVGs with CSS] blog led me to [https://jonsuh.com/blog/animate-svg-with-css/ Animate SVG with CSS] | |||
<center>[[web development|Back to Web Development]]</center> | <center>[[web development|Back to Web Development]]</center> | ||
Latest revision as of 20:54, 22 September 2018
Cascade Style Sheets (CSS)[edit | edit source]
A CSS is made up of two parts: the selector and declaration. The selector states which tag the rule applies. The declaration stats what happens when the rule is applied.
The declaration is made up of two elements: a property and value. A declaration must end with a semicolon.
Multiple declarations can be contained in a single rule.
Multiple selectors can be contained in a single rule. A comma must be used after each selector except the last.
h1, h2, h3 {color:red; font-weight:bold;}
Multiple rules can be applied to the same selector.
h1, h2, h3 {color:red; font-weight:bold;}
h3 {font-style:italic;}
Selectors[edit | edit source]
Adding Styles to Web pages[edit | edit source]
Psuedo Elements and Classes[edit | edit source]
Cascade and Rule Declarations[edit | edit source]
Styling Fonts and Text[edit | edit source]
Positioning Elements aka The Box[edit | edit source]
Basic Page Layout[edit | edit source]
Tips creating styles[edit | edit source]
To eliminate the difference between user agents always zero out margins and padding on all elements.
Example:
* {margin:0; padding:0;}
Helpful links[edit | edit source]
Cascading Style Sheets home page
Cascading Style Sheets Current Work
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
Cascading Style Sheets, level 2 CSS2 Specification
Cascading Style Sheets, level 1 CSS1 Specification
Interesting CSS resources[edit | edit source]
SVG on the Web A Practical Guide
Viewport Units vm vh vmin vmax
Animate SVGs with CSS blog led me to Animate SVG with CSS