css.csv

link the html-file to the css-file;"<link rel=""stylesheet"" href=""css/style.css"">";css
comment in css;/* comment */;css
syntax of the css statement / rule;"p {
    color: red;                                 /* (p => selector, color:red; => declaration) */
}                                               /* color => property, red => value) */";css
set rule with 2 declerations for p red and bold;"p {
    color: red;
    font_weight: bold;
}";css
Cascade Rules (but Specificity overrules - see below);"p {                                             /* cascading rules (from top to bottom, step by step) */
    color: red;                                 /* output is blue+bold */
    font_weight: bold;
}
p {
    color: blue;
}";css
Define red color for element;"color: red;";css
Define color with hex code;"color: #FF0000;";css
Defome color with rgb code (4th parameter is opaque - 0.5. means half transparent, 1 no transparent);"color: rgba(255,0,0,1);";css
define color per hsla value;"color: hsla(0, 100%, 50%,1);";css
Font bold;"font_weight: bold;";css
Define when a font is downloaded from eg. google fonts;"font_weight: 700;";css
Define font size with 25 pixel;"font-size: 25px;";css
Font italic / cursive;"font-style: italic;";css
Defines line-height as 1.5 of the normal height;"line-height: 1.5;";css
Define text decoration a red underline;"text-decoration: underline red;";css
Define text with line-through;"text-decoration: line-through;";css
Center text / or list-entries in ul;"text-align: center;";css
Display text as blocktext (left and right in a line);"text-align: justify;";css
Make text uppercased;"text-transform: uppercase;";css
Define background color;"background-color: #e2b007;";css
"Define border of element (width, style, color) - ""shorthand""-method";"border: 3px solid #FFA500;";css
"Define border of element (width, style, color) - ""shorthand""-method";"border: thin solid red;";css
"Define only the bottom-border - ""longhand""-method";"border-bottom: 6px dashed #FFA500;";css
"Define only the bottom-border-width - ""longhand""-method";"border-bottom-width: 12px;";css
"Define a border radius with 5 pixel - ""shorthand""-method";"border-radius: 5px;";css
"Define the border radius for top right corner  - ""longhand""-method";"border-top-right-radius: 5px;";css
Define border color with red;"border-color: red;";css
Define border width with 1px/2px (clockwise => up-rigth-down-left);"border-width: 1px 2px 1px 2px;";css
Define border style;"border-style: solid;";css
Height of the box;"height: 100px;";css
"Margin of the box (outside the border, for all 4 sites) - ""shorthand""-setting";"margin: 20px;";css
Margin of the box (10 pixel for top/bottom and 20 pixel for left/right);"margin: 10px 20px;";css
Margin of the box (clockwise from tom) => 10px top, 20px right, 0px bottom, 115px left;"margin: 10px 20px 0 15px;";css
Margin of the box => will do this clockwise for top+right and bottom-left => 100px for top+bottom, 0 for right+left;"margin: 100px 0;";css
Set the margin automatc - wg. when the width is set to a percentage;"margin: auto;";css
Center the content horizontal;"margin: 0 auto;";css
"Setting the margin to 10 pixel - ""longhand""-method";margin-top: 10px;css
Padding on all sides;"padding: 20px;";css
Padding only on the bottom side (values are going clockwise starting at the top);"padding: 0 0 20px 0;";css
Padding on the left and right - no padding at top and bottom;"padding: 0 10px;";css
"Setting the padding to 6 pixel - ""longhand""-method";padding-left: 6px;css
Define width in percent (relative to the width of the parent element);"width: 50%;";css
Define width (calculated on elements font size - when font-size=14px - the width would be 70px (5*14);"width: 5em;";css
Define width (and reserve additional 10px for eg. the margin of each element);width: calc(33.3% - 20px);css
Define height of element;"height: 200px;";css
Resize something eg. img;"max-width:20%;";css
Prevents the eg. image from getting bigger than its original size;"max-width:100%;";css
Resize something eg. img;"max-height:20%;";css
no bullets in unordered list (using at ul-element);"list-style-type: none;";css
disc (for Bullet), circle, square, decimal, lower-alpha,;list-style-type: xyz;css
hide element;"disply: none;";css
show element in line - eg. horizontal li-elements - or wrap border only around a paragraph p (and not the whole block);"display: inline;";css
show element as a block (max width of the window) - eg. wrap border around a span element over the whole window (and not only the span);"display: block;";css
show elements in the block in a line - eg. all p-elements in a div-element;"display: inline-block;";css
show elements in the block in the flex system;"display: flex;";css
Define floating for an image (text will float her on the right side of the image);"float: left;";css
Clear floating (for left and right);"clear: both;";css
Change the background fading in for 5 seconds	(eg. going from white to dark blue);"transistion: background 5s;";css
Static element - is not positioned in any way (position tags top-bottom-left-rigth will have no effect);"position: static;";css
With the position tags (top, botom, left, right) the element is shifted away from its normal position;"position: relative;";css
Element stays according the position tags - but will not change the place even if the windows is scrolled;"position: fixed;";css
Default-value - we can see the content when it overflows;"overflow: visible;";css
Hides the overflow (can not see the text which is outside the box);"overflow: hidden;";css
Shows a scrollbar when the content is overflowing;"overflow: auto;";css
Can overlap other elements - element with the highest z-index in front;"z-index: 2;";css
Make a picture darker;"filter: brightness(40%);";css
Make cursor a pointer when going over the element;"cursor: pointer;";css
Disable highlighting of text selection;"user-select: none;";css
Make copyright-sign;&copy;css
center an unordered list;"ul {
   text-align: center;					# center the whole ul in the block
}
ul li {
   display: inline-block;				# arrange list elements vertically
   list-style-type: none;			   	# not dots for the list elements
}";css
show sepeartor between unordered list;"li + li:before{
    content: "" | "";
    padding: 0 3px;
}";css
resize a block element and center it;"(if using only ""width"" => when the window is to small - the browser resolves this with a horizontal scrollbar)
(so its better to use ""max-width"" => this reduces the width when the windows is / becomes to small)
    max-width: 600px;
    margin: 0 auto;";css
let a image float right - and let the text float around it in the left and bottom area around the picture;"img {
  float: right;
  margin: 0 0 1em 1em;
}";css
when floating and the image is bigger then the element use this so the element is adjusted to the image heigth;".clearfix {
  overflow: auto;
}";css
nav menue on the left side - with several section beside the nav in the right area;"(with a percentage parameter - better then fixed px-amounts especially when using smaller windows)
nav {
  float: left;
  width: 25%;}
section {
  margin-left: 25%;
}";css
show all elements in a div-block flexible as inline;"div {
    display: inline-block;
    width: 300px;
    height: 100px;
    margin: 1em;
}";css
size div automatically according to the content;height: fit-content;css
styling link based on state;"a:link {...}		=> format link when not allready clicked
a:visited {...}		=> format link when allready clicked
a:hover {...}		=> format link when hovered over with the mouse";css
center the whole site in the middle;"body {
	width: 75%;						# space which can be taken by the body
	margin: 0 auto;}				# rest of the space (=25%) will be splitted left and right";css
make media scalable;"img, video, canvas {
	max-width: 100%;}";css
show different images depending on browser width;"<picture>
  <source srcset=""img_smallflower.jpg"" media=""(max-width: 600px)"">
  <source srcset=""img_flowers.jpg"" media=""(max-width: 1500px)"">
  <source srcset=""flowers.jpg"">
  <img src=""img_flowers.jpg"" alt=""Flowers"" style=""width:auto;"">
</picture>";css
define variable at the very beginning:;":root {
  --primary-color: #047aed
}";css
use the variable somewhere in the css:;"background-color: var(--primary-color);";css
no border when entering an input field;"input:focus {
  outline: none;
}";css
button attention (makes button during hovering a little bit smaller);"transform: scale(0.98);";css
button / picture attention (shift button / pic up for 15px when hoovered);"transform: translateY(-15px);}				# shift up element for 15px when hoovered
transition: 1.5s ease;						# make smooth transisition (with ease => slow - than fast - than slow again)";css
make a obliquely line;".element::before					# define area before the element
.element::after						# define area after the element
	height: 100px;					# define heigth for the element
	transform (skeyY(-3deg);		# make it oblique before / after the element";css
taken from google fonts for example (take fonts and then create link in upper right corner for the link;"<head>                     # define in html in the header
    <link href=""https://fonts.googleapis.com/css2?familiy=Source+Sans+Pro:wght@300;400;700&display=swap"" rel=""stylessheet"">
</head>";css
Helvetica and sans-serif are the fallback fonts when Source Sans Pro is not loading;"p {
    font-family: ""Source Sans Pro"", ""Helvetica"", sans-serif;
	font-weight: 700;				# how thick / bold the font is
}";css
Using icons directly from https://fontawesome.com/;"<head>      # Definition in the head
	<script src=""https://kit.fontawesome.com/bf5e040b82.js""
        crossorigin=""anonymous""></script>
</head>
<i class=""fas fa-search"">		# use icon in css (change size, color)";css
Using svg-files;"put full svg-code (source) of the svg in a svg-tag
		like: <svg enable-background=""new 0 0 515.91 728.5""
            height=""512"" id=""Layer_1"" version=""1.1""
            xmlns=""http://www.w3.org/2000/svg""...</svg>
		change all fill=""#123456"" entries to fill=currentColor
put a div-wrapper around the svg-element (and probably a a-tag for a link around the wrapper too)
		like: <div class=""wrapperSVG""> ... </div>
format the svg:						# for sizing the svg-icon with width and height
	svg {
		width: 1.4%;
		height: 1%;}
format the div-wrapper:				# for coloring and positioning the svg-icon (in the wrapper)
	div.wrapperSVG {
		color: var(--darkest);
		display: inline;
		position: relative;
		top: 3px;
	}";css
direct parent/child relationship;"<section>
    <p>hello, twitch!</p>
</section>                 # direct parent relationsship > child connection with "">""
section > p {              # direct child connection (only the p which are direct unter section
    color:red;             # p is the direct child of section
}";css
normal parent/child realtionship;"<section>
    <article>
        <p>hello, twitch!</p>
    </article>
</section>                 # normal parent child connection (ignores deepeness)
section p {                # all connections above (when there is a p - somewhere on a level - in the section)
    color:red;             # p is the grandchild of section / somewhere a child of section
}";css
Sibling Relationship;"<section>
    <p>Hello, Twitch!</p>
	<p>Hello, YouTube!</p>
</section>				   # previous sibling + next sibling
p + p {					   # format is used when two <p>s are after each other
	color: red;			   # only the second p will get red
}";css
Type Selector - Select one specific type;h1 {...};css
Universal Selector - Select everything;* {...};css
Class Selector - Select specific class;.box {...};css
ID Selectors - Select specific ID;#unique {...};css
"Attribute Selectors - Select elements which have the attribute ""title""";Attribute selector	a[title] {...};css
Pseudo Class Selector - Select elements with special state (eg. first-child, hover, focus, clicked,...);p:first-child {...};css
Pseudo Elements Selector - Style a specific part of the selected element (eg. first-letter, first-line,...);p::first-line {...};css
Descendant combinator - all connections above (when there is a p - somewhere on a level - in the article);article p;css
Child Combinator - direct child connection (only the p which are direct unter article);article > p;css
Adjacent Sibling - format is used when a p-element is following directly after a h1-element;h1 + p;css
General Sibling - selects any p-element which is following somewhere after a h1-element;h1 ~ p;css
selects any span-element that is inside a p-element, which is inside an article-element;article p span {...};css
selects any p-element that comes directly after a ul-element, which comes directly after an h1-element;h1 + ul + p {...};css
"select elements with class ""special"" which are somwhere after p which is directly after h1 which is somewhere in the body";body h1 + p .special {...};css
class is used for formating many different elements;"<section>
	<p class=""robot"">Hello, Twitch!</p>
	<p id=""zebra"" class=""bob"">Hello, YouTube!</p>
	<p class=""bob"">Goodbye!</p>
</section>
.bob {
	color: red;
}";css
both classes have to be in the SAME element;.class1.class2 {...};css
both classes have to be in the SAME element - only for p-elements;p.class1.class2 {...};css
the parent-element has to be class1 and the child-element class2;.class1 .class2 {...};css
the parent-element section has to be class1 and the child-element h2 class2;section.class1 h2.class2 {...};css
one of the classes have to be in the element;.class1,.class2 {...};css
rule is for p with class1+class2 or a with class2;p.class1.class2, a.class2 {...};css
h2, which have class2+classe3 in h2, their parent has class1, and the parent is in body;body article.class1 h2.class2.class3 {...};css
rule for h3 which have a parent-element aside with class aExtra;aside.aExtra h3;css
id is used for formating unique elements;"<section>
	<p>Hello, Twitch!</p>
	<p id=""zebra"">Hello, YouTube!</p>
</section>";css
can used only ONE time - only one id per element - nothing else can have this id;"#zebra {color: red;}";css
one of the ids have to be in the element;#class1,#class2 {...};css
h2, which has id=rhino, the parent has class=top and the parent is in body;body section.top h2#rhino {...};css
rule for h2 which have a parent-element section with id aMilk;section#aMilk h2;css
!important;".bob {
	color: red !important;						# with !important this style get the maximum priority / overwrites everything
}												# not often used - eg. in cases of immediate urgency to show something - when a error is not found cxurrently";css
defines the priority which styles can overwrite which style;"priority has the style which came later - but only when the specificity is equal or higher!
1 point for tags
10 points for classes
100 points for ids
1000 points for Inline Style";css
1 point (1 tag);p{};css
100 points (1 id);#zebra{};css
11 points (1 tag + 1 class);section .bob { };css
1010 points (1 class + 1 other);.bob{ !important };css
11 points (1 tag + 1 class) for section1 and for section2;section1,section2 .bob { };css
special classes which are dinamically populated as a result of user actions of document structure;"a:link{...}								=> format link when not clicked
a:visited{...}							=> format link when allready clicked
a:hover{...}							=> format link when hoovered over it
li:first-child							=> Selects an element that is the first within a parent
li:last-child							=> Selects an element that is the last within a parent
p:first-of-type							=> Selects an element that is the first of its type within a parent
p:last-of-type							=> Selects an element that is the last of its type within a parent
div p:nth-child(2)						=> Select the second p-child in the div-element";css
eg. h1, p - break to new line, fill the maximum available space, width and heigth will be respected;block boxes;css
eg. a, span, em, strong - will not break to new line, use only the minium space, width/heigth will not apply;inline boxes;css
With this statement every sizing is included with the border;*{box-sizing: border-box};css
example1 - without cass all the elements will be positoned from top to bottom;"Positioning Content
<header>...</header>
<section>...</section>
<aside>...</aside>
<footer>...</footer>

section {									# with that css-command section and aside will be on the same level
	float:left;								# section on the left side and aside on the right side
}
aside {
	float:right;
}

section {									# with that css-command section and aside will be on the same level
	float:left;								# section on the left side with 63% of the space and aside with 30% of the space
	margin 0 1.5%;							# both have a margin outside the element
	width: 63%
}
aside {
	float:right;
	margin 0 1.5%;
	width: 30%
}
footer {
	clear: both;							# after the float - the floats have to be cleared to get the old normal vertically float
}";css
example2 - without cass all the elements will be positoned from top to bottom;"<header>...</header>
<section>...</section>
<section>...</section>
<section>...</section>
<footer>...</footer>

section {									# with that all 3 section elements will float left
	float: left								# so they are horizontal alligned side by side
	margin 0 1.5%;							# width has to be adjusted accordingly
	width: 30%
}
footer {
	clear: both;							# after the float - the floats have to be cleared to get the old normal vertically float
}";css
Initialize flexcontainer (parent element as a block);"display: flex;";css
Initialize flexcontainer (as inline-element - not as block);"display: inline-flex;";css
Items are placed horizontal from left to right (DEFAULT);"flex-direction: row;";css
Items are placed horizontal from rigth to left (main axis is horizontal and cross axis is vertical);"flex-direction: row-reverse;";css
Items are placed vertical top to bottom;"flex-direction: column;";css
Items are placed vertical top to bottom (main axis is vertical and cross axis is horizontal);"flex-direction: column-reverse;";css
No wrapping - shows all items in one line (overwrites element width) (DEFAULT);"flex-wrap: nowrap;";css
Wrap elements to next line in the flexcontainer section (according to the width);"flex-wrap: wrap;";css
Wrap elements but start at the bottom left corner(and going from left to right);"flex-wrap: wrap-reverse;";css
Combination from direction + row (same as flex-direction:	row and flex-wrap: wrap);"flex-flow: row wrap;";css
Give every element equal space / proportion;"flex: 1;";css
One element or all elements should have 2 proportions - eg. more space for a specific item;"flex: 2;";css
Defines the order of the specific element (if > 0 then put it at the end - when < 0 put it at the very beginning);"order: 1;";css
Show every item in a single line in the flexcontainer section;"flex-wrap: nowrap;";css
Wrap elements to next line in the flexcontainer section;"flex-wrap: wrap;";css
Combination from direction + row (same as flex-direction:	row and flex-wrap: wrap);"flex-flow: row wrap;";css
Put elements to the max left/top (for the main axis) (DEFAULT);"justify-content: flex-start;";css
Put elements to the max right/bottom (for the main axis=;"justify-ccontent: flex-end;";css
Center the elements (for the main axis);"justify-content: center;";css
Place elements with equal space around the elements (for the main axis);"justify-content: space-around;";css
Place elements with equal space between the elements (for the main axis);"justify-content: space-between;";css
Stretches the elements on the cross axis (DEFAULT);"align-items: stretch;";css
Align elements from the top or left (for the cross axis);"align-items: flex-start;";css
Align elements from the bottom or right (for the cross axis);"align-items: flex-end;";css
Center the elements (for the cross axis);"align-items: center;";css
Align elements on the baseline of the elements (for the cross axis) - eg. when there are different font-sizes in the flex-items;"align-items: baseline;";css
Align individual element at the bottom or right (for the cross axis) - overwrittes the align-items-setting for the single item;"align-self: flex-end;";css
Gives the flex-item 1 proportion value (when there are 3 items - every item gets the same space);"flex: 1 200px;";css
Give the element 5times the overall room - eg. 3 items get 1 spaces and 1 item get 5 spaces (8 spaces overall);"flex: 5;";css
Gives the 3rd item 2 proportion (item 1+2 get 1/4 of the space - item 3 gets 1/2 of the space);"article:nth-of-type(3) { flex: 2 200px; }";css
Overwrites the vertical position of the item in the flexcontainer;"button:first-child { align-self: flex-end; }";css
Change the order of the first item (everything has order 0 - with 1 it goes to the very right position);"button:first-child { order: 1; }";css
Change the order of the last item (everything has order 0 - with -1 it goes to the very first position);"button:last-child { order: -1; }";css
flex-basis, flex-grow, flex-shrink (longhanded values for flex);"flex: 10 5 400px								# means 10 for flex-grow, 5 for flex-shrink, 400px for flex-basis
	=> flex-basis: set the basis width of the flex-element
	=> flex-grow: how to deal with the extra-space (in the main axis)
	=> flex-grow: when there is extra space would should be done with them - DEFAULT is 0 => do nothing
	=> flex-grow: when set to 1 for one element the whole extra-space will be taken for this element
	=> flex-shrink: what to do when there is not enough space when the window gets shrinked
	=> flex-shrink: DEFAULT is 0 - when there is not enough space the elments get shrinked equally";css
Define grid for the layouting as block);"display: grid;";css
Define grid as inline-block;"display: inline-grid;";css
Define 3 fixed columns with 200px each;"grid-template-columns: 200px 200px 200px;";css
Define 3 flexible columns with fr-units (define 3 columns with max possible place);"grid-template-columns: 1fr 1fr 1fr;";css
2nd way: Define 3 flexible columns with fr-units (define 3 columns with max possible place);"grid-template-columns: repeat(3, 1fr);";css
3rd way: Define 3 flexible columns with auto;"grid-template-columns: auto auto auto;";css
"Define 3 flexible columns with fr-units (4 spaces - 1st column takes 2; 2nd+3rd colujmn take 1)";"grid-template-columns: 2fr 1fr 1fr;";css
Create as many columns as will fit into the container;"grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));";css
Define gap between the elements (20 px for rows and columns);"grid-gap: 20px;";css
Define gap between the elements (10px for the row-gap and 50px for the column-gap);"grid-gap: 10px 50px;";css
Define the gap only for the rows;"grid-row-gap: 30px;";css
Define the gap only for the columns;"grid-column-gap: 20px;";css
Define heigth of the row;"grid-auto-rows: 100px;";css
Define heigth of the row (100px is minimum, auto expand to fit the content);"grid-auto-rows: minmax(100px, auto);";css
Use for element grid-columns 1 - 3;"grid-column 1 / 3;";css
Use for element gird columns 1 and 2;"grid-column 1 / span 2;";css
Use for element grid-row 1;"grid-row: 1;";css
Use for element area => grid-row-start / grid-column-start / grid-row-end / grid-column-end;"grid-area: 1 / 2 / 5 / 6;";css
Arrange grid elements (horizontally) with equal space around every element;"justify-content: space-evenly;";css
Same space around every grid;"justify-content: space-around;";css
Same space between the elements;"justify-content: space-between;";css
Center the elements;"justify-content: center;";css
Arrange the elements on the starting left side;"justify-content: start;";css
Arrange the elements on the ending right side;"justify-content: end;";css
Arrange grid elements (vertically) - center the elements;"align-content: center;";css
Same options as horizontaly with justify-content;align-content: start, space-around,...;css
Element spans from 1st column to thue 3rd column;"grid-column-start: 1
grid-column-end: 4";css
Element spans from the 1st row to the 2nd row in the 3rd column;"grid-column: 3;
grid-row-start: 1;
grid-row-end: 3;";css
Name all items;".item1 { grid-area: header; }					# Name the different areas
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }
.gid-container {
  grid-template-areas:
    'header header header header header header' # Define where the areas should be displayed in the grid
    'menu main main main right right'
    'menu footer footer footer footer footer';
}";css
Running the page on different / smaller devices;"- Fluid - everything sized with percentage (no fixed measures)
	=> looks more or less good on every windows-size
- Elastic - using em and rem (em looks at the parents fontsize and use this as a base / rem looks at the html-element)
	(set a standard font-size as a base for the whole document)
	=> em: the change has only to be done at the one font-size decleration
	=> rem: the change has only to be done at the font-size from the html
	=> font-size: 62.5%; /* font-size 1em = 10px bei normaler Browser-Einstellung */
	(so everything would response to the default font size from the actual user)
	(only changing the font-size central when changes)
- Content Decision - Mobile First or Desktop to Mobile
	=> first think about the design on mobile (and then bigger and bigger from Tablet to fully desktop)
	=> or make it the other way (desktop design first and then shrinking to mobile version)
	=> decide what should be shown on mobile devices and what not
	=> using media queries";css
Make YouTube-Video responsive;".financeToolsDetail .videoContainer {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.financeToolsDetail .videoContainer iframe {
    position: absolute;
    top: 0;
    left: 15%;											# Position the video in the middle of the div-box
    width: 60%;											# Defines how big the video should be displayed (width)
    height: 55%;										# Defines how big the video should be displayed (height)
}";css
smartphones: this rule get only be used when the device width is between 0 and 600 pixel;"@media screen and (max-width: 600px) {
	h1 { color: blue; }              }";css
tablets: this rule is used when the width is greater 600px;"@media screen and (min-width: 600px) {
    .middle{color: yellow; }         }";css
desktop: this rule is used when the width is greater 900px;"@media screen and (min-width: 900px) {
    .middle{color: yellow; }         }";css
this rule is used when the width is between 600px and 900px;"@media screen and (min-width: 600px) and (max-width: 900px){
	img {border: 2px solid red;}     }";css
use the full length of the width;"section {
	height: 200px;
	border 1px solid black;
	flex: 1;
}";css
arranges elements in main and class bottom with flex-system;"main,.bottom {
	display: flex;
}";css
Important addition to the template-columns:;"<meta name=""viewport"" content=""width=device-width, initial-scale=1"">
	=> enables the windows to be zoomed
	(never set initial-scale to none - zooming would be not possible)";css
combines the follwing 6 rules;"transform: matrix(1,2,3,4,5,6);";css
move left/right, up/down4kode;"transform: translate (120px, 50%);";css
change the scale of the object;"transform: scale (2, 0.5);";css
rotate object (possible for any axes (rotateX, rotateY, rotateZ);"transform: rotate (0.5turn);";css
skew object;"transform: skew(30deg, 20deg);";css
combine some transformations;transform: scale(0.5) translate(-100%,-100%);css
responsible for the animation - is corresponding to a class definition (see below);"@keyframes xyzAction{
	0% {transform: rotateZ(0deg)};				# at 0% of the animation nothing should change on the z-axe
	50% {transform: rotateZ(180deg)};			# at 50% of the antimaton the z-axe should rotate 180deg
	100% {transform: rotateZ(360deg)};			# at 100% of the antimaton the z-axe should rotate 360deg
}";css
define the class for the @keyframe above;.letRip{};css
Name of the keyframe (puts together the setup to the keyframe);"animation-name: xyzAction;";css
How many times the animation runs (infinite or eg. 5 for 5 times);"animation-iteration-count: infinite;";css
Lenght of one duration of the animation eg. 500ms or 0.5sec;"animation-duration: 500ms;";css
Animation is progressing linear;"animation-function: linear;";css
Animation is progressing faster to the end;"animation-function: easy-in-out;";css
Animation is progressing in steps (not smooth);"animation-function: step(5,end);";css
Possible values are runnning or pause (can be used with javacript to start/stop);"animation-play-state: running;";css
How long the start of the animation delays;animation-delay;css
Control of the progression - forward, backward, alternate;animation-direction:;css
Animation fill mode;animation-fill-mode;css
Define variables in css;":root {											# Highest possible level of setting a variable
	--var1: 10px;								# Define variable and initialize with 10px
	--var2: #ffd166;							# Define variable and initialize with color hex code
	--var3: 20%;								# Define variable and initialize with percentage value
}";css
Use variables in in css;"img {											# Eg. using for image-rule
	padding: var(--var1)						# Using Variable
	background: var(--var2)
	max-width: var(--var3)
}
(Changing variable in JS have a look at JS Learning Path / Cheatsheet)";css
live the selected element in the browser;select the width or heigth - press rigth strg - up/down;css
Installation of haml;gem install haml;css
Compile the .haml-file to html;haml index.haml index.html;css
Installation of Sass;gem install sass;css