Difference between revisions of "Cascade Style Sheets"
| (6 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]] | ||
| Line 45: | Line 45: | ||
[[Basic Page Layout]] | [[Basic Page Layout]] | ||
=== Helpful links | == 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/ Cascading Style Sheets home page] | ||
| Line 56: | Line 63: | ||
[http://www.w3.org/TR/REC-CSS1 Cascading Style Sheets, level 1 CSS1 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 17:54, 22 September 2018
Cascade Style Sheets (CSS)
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
Adding Styles to Web pages
Psuedo Elements and Classes
Cascade and Rule Declarations
Styling Fonts and Text
Positioning Elements aka The Box
Basic Page Layout
Tips creating styles
To eliminate the difference between user agents always zero out margins and padding on all elements.
Example:
* {margin:0; padding:0;}
Helpful links
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
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