Editing Cascade Style Sheets

== 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.

<pre>h1, h2, h3 {color:red; font-weight:bold;}</pre>

Multiple rules can be applied to the same selector.

<pre>h1, h2, h3 {color:red; font-weight:bold;}

h3 {font-style:italic;}</pre>

== Selectors ==

[[Selectors]]

== Adding Styles to Web pages ==

[[Adding Styles to Web pages]]

== Psuedo Elements and Classes ==

[[Psuedo Elements and Classes]]

== Cascade and Rule Declarations ==

[[Cascade and Rule Declarations]]

== Styling Fonts and Text ==

[[Styling Fonts and Text]]

== Positioning Elements aka ''The Box'' ==

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