CSS3 Essentials

1. CSS uses level instead of version. Moreover, level 3 have all properties of level 1 and level 2.
2. CSS is cascaded with HTML using inline styling, internal styling or external styling manner. Style→design, sheet→browser sheet.
3. CSS is permissive. If any syntax error exist or browser doesn't support, the browser just ignores it completely and moves on to the next one it finds.
4. Building block :
1. Building block - (1) CSS Properties: Specific value (identifier) determine the specific feature/function for styling . More than 300 properties are available.
2. Building block - (2) CSS Value: Specified property has a predefined set of values which determines the change of properties.
3. Building Block Structure (declaration): property:value; (Example -display:block;).
4. Property and values are case-sensitive and accept lower case.
5. CSS is a declarative language. CSS is flexible because if your one declaration is incorrect the total CSS is ignore the incorrect declaration. Means it's executed without showing any error.
6. CSS Declaration:
1. Property combined (pair separated by :) with a value is a CSS declaration (display:block;).
2. Building block 1 + Building block 2 with colon;
7. CSS declaration block contains list of CSS declaration within bracket { and }. Empty block is valid in CSS.
8. Selector: For styling an HTML element the selector detects the target HTML element on a web page.
9. CSS Statement: Single line or declaration block with selector which generally provide result or output. My personal opinion about statement is when an action or output followed by proper CSS syntax.  Invalid statement is also a statement and they have no result.
10. CSS Property types
1. Shorthand properties basically direction of set of relative properties. Like margin: top left bottom right. Clock wise.
2. Directional properties are top, right, bottom and left.
3. Single Property
11. Types of CSS statement
1. Rulesets/CSS rule
2. At-rule
12. Rulesets/CSS rule: Combination of properties and values are formed a declarations, multiple declarations form into declarations block, while declarations blocks and selectors form into a complete CSS rules. A selector and declaration block are ruleset or rule.
13. At-rule is three types [@identifier (rule);]
1. @rule metadata information
1. @charset
2. @import
2. @rule conditional/nested information
1. All @rules are nested.
3. @rule descriptive information
14. White space in CSS is actual space, tabs, and new line.
15. Shorthand properties
1. Set of several property in a single line[Ref[1]].
2. margin, padding, border, font, background.
16. Cascade style sheet selects the rule based on precedence of three factors
1. Importance
1. a certain declaration will always win over all others: !important.
2. Specificity
1. Measure of how specific a selector is — how many elements it could match. [Ref[1]]
2. Precedence: Internal style > id(#) > class(.) > element selector (like <p>)
3. Mathematical calculation: https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance
3. Source Order
1. Source order follow/applicable only when selectors have the same importance[1] and specificity[2].

2.  h1 {  
     background-color: lightblue;  
    }  
    /* This rule will win over the first one */  
    h2 {  
     background-color: yellow;  
    }  
    /* ### */  
    /* This rule will win */  
    .footnote {  
     background-color: green;  
    }  
    p {  
     color: red;  
    }  
   
4. Rules do not conflict rather properties are conflicted. So, multiple rules apply to a single element, but conflict occurs only when properties are different.
1. p span {  background-color: blue;  color: yellow;}/* specificity: 0002 */
2. span {  text-decoration: underline;  color: green;}/* specificity: 0001 */
3. Color conflicts and p span rule will wins.
17. Inheritance
1. Elements will take some property values from their parents, but not others.
2. inherit
1. Sets the property value applied to a selected element to be the same as that of its parent element.[Ref[1]]
3. initial
1. Same value set for that element in the browser's default style sheet. If no value is set by the browser's default style sheet and the property is naturally inherited, then the property value is set to inherit instead.
4. unset
1. Resets the property to its natural value, which means that if the property is naturally inherited it acts like inherit, otherwise it acts like initial.
5. revert
1. Property's value is set to the user stylesheet's value for the property (if one is set), otherwise, the property's value is taken from the user agent's default stylesheet.
18. Fundamental text and font styling
1. Web safe fonts - Generally certain number of fonts are available across all systems, and can be used frequently. 
2. Font stacks - Availability of the fonts. [like: a{font-family: "Trebuchet MS", Verdana, sans-serif;}].
3. Open Type is a format for scalable computer fonts. [https://en.wikipedia.org]
4. font shorthand propertyfont: font-style | font-variant | font-weight | font-size/line-height | font-family.
   1. font: italic small-caps bold 16px/2 "Fira Sans", serif;
   2. Must include: <font-size>, <font-family>.
   3. Optionally include: <font-style>, <font-variant>, <font-weight>, <line-height>.
5. Font style properties and their values
1. font-style:
1. normal -- Sets text to normal font (turns existing italics off.)
2. italic
3. oblique -- Sets text to use a simulated version of an italic font, created by slanting the normal version.
2. font-weight
3. font-size
1. Value -1: May use absolute value. Like px....
2. Value -2: Inherited from that element's parent element.
4. font-size-adjust — At small sizes, is determined more by the size of lowercase letters than by the size of capital letters.
1. p { font-size: 16px;font-size-adjust: 0.5;}
2. If browser support then small letter font size should be 8px.
3. 0 yields text of zero height (hidden text).
4. Property values
1. none; The size of the font based only on the font-size property.
2. <number>;  Size of the font so that its lowercase letters (as determined by the x-height of the font) are the specified number times the font-size. [Ref[1]]
5. text-transform
1. none
2. uppercase
3. capitalize
4. full-width
6. text-decoration
1. text-decoration: text-decoration-line text-decoration-color text-decoration-style|initial|inherit;
2. text-decoration-color
3. text-decoration-line
4. text-decoration-style
7.  text-underline-position
1. Property text-decoration is set to underline value, then text-underline-position property selects.
2. <auto> - The user agent will use its own algorithm to place the line at or under the alphabetic baseline. [Ref[1]]
3. <under> - Forces the line to be set below the alphabetic baseline, at a position where it won't cross any descenders. [Ref[1]]
4.  <left> - In horizontal writing-modes, it is a synonym of under. 
5. <right> - In horizontal writing-modes, it is a synonym of under.
8. font-variant - mainly two values
1. normal
2. small-caps
3. Font variant shorthand properties
1. font-variant-alternates
2. font-variant-caps
3. font-variant-east-Asian
4. font-variant-ligatures 
5. font-variant-numeric
6. font-variant-position
9. font-kerning — how letters are spaced.
1. auto - The browser determines whether font kerning should be used or not. For example, some browsers will disable kerning on small fonts, since applying it could harm the readability of text.
2. normal - Font kerning information stored in the font must be applied.
3. none - Font kerning information stored in the font is disabled.
10. font-feature-settings - advanced typographic features in Open Type fonts.
11. font-stretch
1. Select how the face of font is like normal, condensed or expanded.
2. Values-1: <ultra-condensed> | <extra-condensed> | <condensed> | <semi-condensed> | <normal> | <semi-expanded> | <expanded> | <extra-expanded> | <ultra-expanded>
3. Value-2: <percentage>
4. Ex -1: p { font-stretch: 100%; }
5. Ex -2: p { font-stretch: expanded; }
6. Text drop shadow
1. Property text-shadow is applied when the text requires a drop shadow effect.
2. Syntax-> text-shadow: horizontal-shadow vertical-shadow blur-radius color |none |initial |inherit;
1. horizontal-shadow — Shadow moves left/right, commonly use px.
2. vertical-shadow — Shadow moves up/down, commonly use px. 
3. blur-radius  — A higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. [Ref[1]]
4. color — Default is black.
3. Multiple shadows
1. text-shadow: -1px -1px 1px #aaa, 0px 4px 1px rgba(0,0,0,0.5), 4px 4px 5px rgba(0,0,0,0.7), 0px 0px 7px rgba(0,0,0,0.4);
7. Text layout properties and their values
1. text-align
1. left
2. right
3. center
4. justify
2. text-align-last
1. How the last line of a block or a line, right before a forced line break, is aligned.
2. <auto> | <start> | <end> | <left> | <right> | <center> | < justify>
3. writing-mode
1. The direction in which block-level containers are stacked (block flow direction), and the direction in which inline-level content flows within a block container. Thus, it also determines the ordering of block-level content. [1]
2. <horizontal-tb> | <vertical-rl> | <vertical-lr> 
4. text-orientation
1. writing-mode is not horizontal-tb is set then text-orientation works.
2. <mixed> | <upright> | <sideways>
5. line-height
1. The font-size is multiplied to get the line-height.
2. Set lines of text to 1.5 times the height of the font set line-height: 1.5;.
6. letter-spacing
1. Spacing between letters in text.
2. p {  letter-spacing: 2px; }
7. word-spacing
1. Spacing between words in text.
2. p { word-spacing: 2px; }
8.  text-indent
1. Empty space that is put before lines of text in a block.
2. Values:
1. <length> - Indentation is specified as an absolute <length>. Negative values are allowed.
2. <percentage> - Indentation is a <percentage> of the containing block's width.
9. text-overflow
1. The text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box). ^[1]
2. <clip> | <ellipsis> | <fade>
3. text-overflow VS overflow VS white-space
4. Value type 1: When text-overflow property have two values. First one for the left end (beginning of the line) and second value for the right end (end of a line).
5. Value type 2: When text-overflow property have one value selects the right end (end of a line).
6. Values: <clip> | <ellipsis> | <string> | <initial> | <inherit>
10. white-space
1. Determines how white space inside an element is handled.
2. Values: <normal> | <nowrap> | <pre> | <pre-wrap> | <pre-line>
11. word-break
1. Normally text word in split inside the content of an element. This property force the word if required.
2. <normal> - Default. No word break/split. Not applicable for Chinese/ Japanese/Korean (CJK) text.
3. <keep-all> - Also applicable for CJK text.
4. <break-all> - To prevent overflow, word breaks should be inserted between any two characters (excluding Chinese/Japanese/Korean text).[1] Means break the word.
5. <word-break> - Try to break after word finish.
12. hyphens
1. Add hyphens when word break require.
2. <none> | <manual> | <auto>
13. overflow-wrap
1.  Line break + prevent overflowing its content box.
2. <normal> | <break-word>
14. line-break
1. Specify how (or if) to break lines when working with punctuation and symbols. [1]
2. <auto> | <loose> | <normal> | <strict>
15. direction
1. ltr - Text and other elements go from left to right. This is the default value. [1]
2. rtl - From right to left.
8. Styling list
1. List specific CSS properties
1. list-style-type
1. Value partial list of types : <disc> | <circle> | <square> | <decimal> | <Georgian> | <cjk-ideographic> | <kannada> | <upper-roman>
2. Value keyword value: <none>
3. Value global values: <inherit> | <initial> | <unset>
2. list-style-position
1. <inside>
2. <outside> -- Default
3. list-style-image
1. <none>
2. <url>
2. Shorthand: list-style: list-style-type list-style-position list-style-image|initial|inherit;
3. Attribute
1. Unordered list customization
1. <ol start="3">
2. Reverse order
1. <ol start="3" reversed>
3. Value attribute
1. <ol><li value="3">...
9. Styling link
19. Styling box
1. CSS Box model
1. Every element within a document is structured as a rectangular box. One box they may have sibling with another box or may have child box like onion (onion layer) inside the document layout.
2. Box model properties
1. width and height of the content box.
2. padding - Outer edge of the content box and inner edge of border.
3. border - Outer edge of the padding and inner edge of margin.
4. margin - Width of the outer area surrounding the CSS box.
3. Total width of a box = property(width + padding-right + padding-left + border-right + border-left)
1. Adding some properties can change the behavior.
2. Changing the box model completely property box-sizing with the value border-box.
4. Box model control property
1. overflow
2. background-clip
3. outline
5. Types of CSS boxes
1. Boxes represent block level elements.
2. Boxes behave differently only when apply display property on an element.
20. Background
21. Border
22. Box shadows
1. Property box-shadow is applied when the box requires a shadow effect.
2. Syntax-> box-shadow: horizontal-shadow vertical-shadow blur-radius color |none |initial |inherit;
3. 1. horizontal-shadow — Shadow moves left/right, commonly use px.
   2. vertical-shadow — Shadow moves up/down, commonly use px. 
   3. blur-radius  — A higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. [Ref[1]]
   4. color — Default is black.
4. Multiple shadows
1. .multiple {  box-shadow: 1px 1px 1px green, 2px 2px 1px blue, ... red;}
5. Filter
1. Apply for graphical effects like blurring or color shifting to an element. [1]
6. Blend Mode
23. Layout 
1. Layout technique
1. Element contained in a webpage
2. Controls 
1. Where they are positioned relative to their default position in normal layout flow
2. The elements around them
3. Their parent container
4. Or the view-port/window
2. Change element behavior on lay out
1. Adjusting their position in that normal flow, or
2. Removing them from it altogether(means apply CSS).
3. Create a layout
1. Moving an element from it's normal flow.
2. Or require normal flow.
3. Well-structured
4. Default individual element boxes are laid out
1. Element's content
2. Surrounding padding, border and margin.
3. Layout model normal flow (block or inline or inline-block).
24. Layout module
1. Normal flow module
1. Elements on a web page lay out in the normal flow.
2. Normal flow behavior changes if CSS has applied.
3. Everything in normal flow has a value of display, uses as the default way that elements they are set on behave. 
4. Always placed inside the browser's view-port.
2. Display property module
3. Flex-box
4. Grid
5. Float -Change from the normal flow.
6. Position - Move from the normal flow.
7. Table layout
8. Multiple-column layout
25. Center behavior inside layout.
26. Div tag analysis
27. CSS Units
1. Absolute Units - fixed size
1. Pixels (px) [1px  = 1/96^th of  1 inch]
1. Fixed but relative with device pattern or category. For mobile ( high density) device 1 unit maybe 8 or 9 pixels, low density device 1 unit may be 1 pixels. Similarly medium density device 1 unit may be 5 pixels.
2. Points (pt) [ 1pt = 1/72^th of 1 inch]
3. Picas (pc) [ 1pc = 12 pt]
4. Inches (in)
5. Centimeters (cm)
6. Millimeters (mm)
2. Relative Units
1. Base on parent dimensions
1. Percentage (%)
2. Base on current font-attributes
1. Font Size
1. em
1. rem
1. Character Size
1. ex
1. ch
3. Base on viewport  - 100 X 100 grid system
1. Max (vmax) Response with height and width.
2. Min (vmin) - Response with height and width.
3. Dimensions (vw & vh) - Always relative with device width and height.
28. Ref:
1. https://developer.mozilla.org
2. https://www.w3.org