CSS Cheatsheet

Using svg-files

put full svg-code (source) of the svg in a svg-tag
		like: 
            xmlns="http://www.w3.org/2000/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: 
 ... 

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;
	}

PARENT CHILD RELATIONSHIP

direct parent/child relationship

    
hello, twitch!

                 # 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
}

normal parent/child realtionship

    

        
hello, twitch!

    

                 # 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
}

Sibling Relationship

    
Hello, Twitch!

	
Hello, YouTube!

				   # previous sibling + next sibling
p + p {					   # format is used when two 
s are after each other
	color: red;			   # only the second p will get red
}

SELECTORS AND COMBINATIONS

Type Selector – Select one specific type

h1 {...}

Universal Selector – Select everything

* {...}

Class Selector – Select specific class

.box {...}

ID Selectors – Select specific ID

#unique {...}

Attribute Selectors – Select elements which have the attribute “title”

Attribute selector	a[title] {...}

Pseudo Class Selector – Select elements with special state (eg. first-child, hover, focus, clicked,…)

p:first-child {...}

Pseudo Elements Selector – Style a specific part of the selected element (eg. first-letter, first-line,…)

p::first-line {...}

Descendant combinator – all connections above (when there is a p – somewhere on a level – in the article)

article p

Child Combinator – direct child connection (only the p which are direct unter article)

article > p

Adjacent Sibling – format is used when a p-element is following directly after a h1-element

h1 + p

General Sibling – selects any p-element which is following somewhere after a h1-element

h1 ~ p

selects any span-element that is inside a p-element, which is inside an article-element

article p span {...}

selects any p-element that comes directly after a ul-element, which comes directly after an h1-element

h1 + ul + p {...}

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 {...}

CLASSES

class is used for formating many different elements

	
Hello, Twitch!

	
Hello, YouTube!

	
Goodbye!


.bob {
	color: red;
}

both classes have to be in the SAME element

.class1.class2 {...}

both classes have to be in the SAME element – only for p-elements

p.class1.class2 {...}

the parent-element has to be class1 and the child-element class2

.class1 .class2 {...}

the parent-element section has to be class1 and the child-element h2 class2

section.class1 h2.class2 {...}

one of the classes have to be in the element

.class1,.class2 {...}

rule is for p with class1+class2 or a with class2

p.class1.class2, a.class2 {...}

h2, which have class2+classe3 in h2, their parent has class1, and the parent is in body

body article.class1 h2.class2.class3 {...}

rule for h3 which have a parent-element aside with class aExtra

aside.aExtra h3

ID

id is used for formating unique elements

	
Hello, Twitch!

	
Hello, YouTube!

can used only ONE time – only one id per element – nothing else can have this id

#zebra {color: red;}

one of the ids have to be in the element

#class1,#class2 {...}

h2, which has id=rhino, the parent has class=top and the parent is in body

body section.top h2#rhino {...}

rule for h2 which have a parent-element section with id aMilk

section#aMilk h2

INLINE STYLE

!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

SPECIFICITY

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

1 point (1 tag)

p{}

100 points (1 id)

#zebra{}

11 points (1 tag + 1 class)

section .bob { }

1010 points (1 class + 1 other)

.bob{ !important }

11 points (1 tag + 1 class) for section1 and for section2

section1,section2 .bob { }

PSEUDO CLASSES

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

BOX MODEL

eg. h1, p – break to new line, fill the maximum available space, width and heigth will be respected

block boxes

eg. a, span, em, strong – will not break to new line, use only the minium space, width/heigth will not apply

inline boxes

With this statement every sizing is included with the border

*{box-sizing: border-box}

LAYOUTS, FLOATING

every element is a box – box in the middle
box has a heigth and width – eg. 100px*100px
padding outside the box – between box and border (top,right,bottom,left)
border (outside padding) (top,right,bottom,left)
margin (outside border) (top,right,bottom,left)
element tries to got as much up to the top – and as much left (or right according if floated left or right)
normaly everything will float to the left
example1 – without cass all the elements will be positoned from top to bottom

Positioning Content
...

...




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
}

example2 – without cass all the elements will be positoned from top to bottom

...

...

...

...



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
}

LAYOUT FLEXBOX

Initialize flexcontainer (parent element as a block)

display: flex;

Initialize flexcontainer (as inline-element – not as block)

display: inline-flex;

Items are placed horizontal from left to right (DEFAULT)

flex-direction: row;

Items are placed horizontal from rigth to left (main axis is horizontal and cross axis is vertical)

flex-direction: row-reverse;

Items are placed vertical top to bottom

flex-direction: column;

Items are placed vertical top to bottom (main axis is vertical and cross axis is horizontal)

flex-direction: column-reverse;

No wrapping – shows all items in one line (overwrites element width) (DEFAULT)

flex-wrap: nowrap;

Wrap elements to next line in the flexcontainer section (according to the width)

flex-wrap: wrap;

Wrap elements but start at the bottom left corner(and going from left to right)

flex-wrap: wrap-reverse;

Combination from direction + row (same as flex-direction: row and flex-wrap: wrap)

flex-flow: row wrap;

Give every element equal space / proportion

flex: 1;

One element or all elements should have 2 proportions – eg. more space for a specific item

flex: 2;

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;

Show every item in a single line in the flexcontainer section

flex-wrap: nowrap;

Wrap elements to next line in the flexcontainer section

flex-wrap: wrap;

Combination from direction + row (same as flex-direction: row and flex-wrap: wrap)

flex-flow: row wrap;

Put elements to the max left/top (for the main axis) (DEFAULT)

justify-content: flex-start;

Put elements to the max right/bottom (for the main axis=

justify-ccontent: flex-end;

Center the elements (for the main axis)

justify-content: center;

Place elements with equal space around the elements (for the main axis)

justify-content: space-around;

Place elements with equal space between the elements (for the main axis)

justify-content: space-between;

Stretches the elements on the cross axis (DEFAULT)

align-items: stretch;

Align elements from the top or left (for the cross axis)

align-items: flex-start;

Align elements from the bottom or right (for the cross axis)

align-items: flex-end;

Center the elements (for the cross axis)

align-items: center;

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;

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;

Gives the flex-item 1 proportion value (when there are 3 items – every item gets the same space)

flex: 1 200px;

Give the element 5times the overall room – eg. 3 items get 1 spaces and 1 item get 5 spaces (8 spaces overall)

flex: 5;

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; }

Overwrites the vertical position of the item in the flexcontainer

button:first-child { align-self: flex-end; }

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; }

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-tricks.com: Complete Guide To Flexbox
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

LAYOUT GRID

Define grid for the layouting as block)

display: grid;

Define grid as inline-block

display: inline-grid;

Define 3 fixed columns with 200px each

grid-template-columns: 200px 200px 200px;

Define 3 flexible columns with fr-units (define 3 columns with max possible place)

grid-template-columns: 1fr 1fr 1fr;

2nd way: Define 3 flexible columns with fr-units (define 3 columns with max possible place)

grid-template-columns: repeat(3, 1fr);

3rd way: Define 3 flexible columns with auto

grid-template-columns: auto auto auto;

Define 3 flexible columns with fr-units (4 spaces – 1st column takes 2; 2nd+3rd colujmn take 1)

grid-template-columns: 2fr 1fr 1fr;

Create as many columns as will fit into the container

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

Define gap between the elements (20 px for rows and columns)

grid-gap: 20px;

Define gap between the elements (10px for the row-gap and 50px for the column-gap)

grid-gap: 10px 50px;

Define the gap only for the rows

grid-row-gap: 30px;

Define the gap only for the columns

grid-column-gap: 20px;

Define heigth of the row

grid-auto-rows: 100px;

Define heigth of the row (100px is minimum, auto expand to fit the content)

grid-auto-rows: minmax(100px, auto);

Use for element grid-columns 1 – 3

grid-column 1 / 3;

Use for element gird columns 1 and 2

grid-column 1 / span 2;

Use for element grid-row 1

grid-row: 1;

Use for element area => grid-row-start / grid-column-start / grid-row-end / grid-column-end

grid-area: 1 / 2 / 5 / 6;

Arrange grid elements (horizontally) with equal space around every element

justify-content: space-evenly;

Same space around every grid

justify-content: space-around;

Same space between the elements

justify-content: space-between;

Center the elements

justify-content: center;

Arrange the elements on the starting left side

justify-content: start;

Arrange the elements on the ending right side

justify-content: end;

Arrange grid elements (vertically) – center the elements

align-content: center;

Same options as horizontaly with justify-content

align-content: start, space-around,...

Element spans from 1st column to thue 3rd column

grid-column-start: 1
grid-column-end: 4

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;

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';
}

RESPONSIVE DESIGN

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

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)
}

MEDIA QUERIES

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; }              }

tablets: this rule is used when the width is greater 600px

@media screen and (min-width: 600px) {
    .middle{color: yellow; }         }

desktop: this rule is used when the width is greater 900px

@media screen and (min-width: 900px) {
    .middle{color: yellow; }         }

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;}     }

use the full length of the width

section {
	height: 200px;
	border 1px solid black;
	flex: 1;
}

arranges elements in main and class bottom with flex-system

main,.bottom {
	display: flex;
}

Important addition to the template-columns:

	=> enables the windows to be zoomed
	(never set initial-scale to none - zooming would be not possible)

ANIMATING, TRANSFORM

combines the follwing 6 rules

transform: matrix(1,2,3,4,5,6);

move left/right, up/down4kode

transform: translate (120px, 50%);

change the scale of the object

transform: scale (2, 0.5);

rotate object (possible for any axes (rotateX, rotateY, rotateZ)

transform: rotate (0.5turn);

skew object

transform: skew(30deg, 20deg);

combine some transformations

transform: scale(0.5) translate(-100%,-100%)

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
}

define the class for the @keyframe above

.letRip{}

Name of the keyframe (puts together the setup to the keyframe)

animation-name: xyzAction;

How many times the animation runs (infinite or eg. 5 for 5 times)

animation-iteration-count: infinite;

Lenght of one duration of the animation eg. 500ms or 0.5sec

animation-duration: 500ms;

Animation is progressing linear

animation-function: linear;

Animation is progressing faster to the end

animation-function: easy-in-out;

Animation is progressing in steps (not smooth)

animation-function: step(5,end);

Possible values are runnning or pause (can be used with javacript to start/stop)

animation-play-state: running;

How long the start of the animation delays

animation-delay

Control of the progression – forward, backward, alternate

animation-direction:

Animation fill mode

animation-fill-mode

VARIABLES

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
}

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)

TEMPLATE

PERFORMANCE ORGANIZATION

CHROME HACKS

live the selected element in the browser

select the width or heigth - press rigth strg - up/down

PREPROCESSORS

Installation of haml

gem install haml

Compile the .haml-file to html

haml index.haml index.html

SASS

Installation of Sass

gem install sass