Difference between revisions of "Cascade Style Sheets"

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

Positioning Elements

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

CSS Menu Maker

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

Back to Web Development

@@ Line 29: / Line 29: @@
 [[Psuedo Elements and Classes]]
-== Cascade ==
+== Cascade and Rule Declarations ==
-Styles passing from higher to lower hierarchy levels.
+[[Cascade and Rule Declarations]]
-=== Cascade Rules ===
+== Styling Fonts and Text ==
-Cascade Rules p57:
+[[Styling Fonts and Text]]
-# Find all declarations that apply to each element and property
-# Sort by order and weight
+== Positioning Elements aka ''The Box'' ==
-# Sort by specificity
-# Sort by order
-==== Weight of declaration ====
+[[Positioning Elements]]
-Define a rule as important using the exclamation point. Marking a tag as important will override the cascade.
+== Basic Page Layout ==
-<pre>p {color:red !important; font-size:12pt;}</pre>
+[[Basic Page Layout]]
-== Rule Declarations ==
+== Tips creating styles ==
-Declarations are made up of a property and value.
+To eliminate the difference between user agents always zero out margins and padding on all elements.
 Example:
-<pre>p {color:red;}</pre>
+<pre>* {margin:0; padding:0;}</pre>
-color = property and red = value
-Values fall into three main types:
+== Helpful links ==
-# Words
-# Numerical values
-# Color values
-=== Numerical values ===
+[http://www.w3.org/Style/CSS/ Cascading Style Sheets home page]
-Use to decribe the "distance" or height, width, depth, length, etc. for many values. p61
+[http://www.w3.org/Style/CSS/current-work Cascading Style Sheets Current Work]
-Two main groups of numerical values:
+[http://www.w3.org/TR/CSS21/ Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification]
-# Absolute
-# Relative
-Absolute value describes a real distance.
+[http://www.w3.org/TR/REC-CSS2/ Cascading Style Sheets, level 2 CSS2 Specification]
-Relative value compared to another.
-Absolute value chart:
+[http://www.w3.org/TR/REC-CSS1 Cascading Style Sheets, level 1 CSS1 Specification]
-{| border="1" cellspacing="0" cellpadding="5" align="center"
+[http://www.cssmenumaker.com/ CSS Menu Maker]
-! Absolute Value
-! Unit Abbreviation
-|-
-| Inches
-| in
-|-
-| Centimeters
-| cm
-|-
-| Millimeters
-| mm
-|-
-| Points
-| pt
-|-
-| Picas
-| pc
-|-
-| Pixels
-| px
-|}
-Relative value chart:
+== Interesting CSS resources ==
-{| border="1" cellspacing="0" cellpadding="5" align="center"
+[https://svgontheweb.com/ SVG on the Web] A Practical Guide
-! Relative Value
-! Unit Abbreviation
-! Note
-|-
-| Em
-| em
-| Width of character in a font.
-|-
-| Ex
-| ex
-| Equivalent to the x-height of the given font.
-|-
-| Percentage
-| %
-|
-|}
-=== Color Values ===
+[https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/ Viewport Units vm vh vmin vmax]
-Hexadecimal format
+[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]
-<pre>#RRGGBB</pre>
-Percentages format
-<pre>R%, G%, B% </pre>
-[[Styling Fonts and Text]]
 <center>[[web development|Back to Web Development]]</center>