More than 20 years experience in IT and Finance. I will automate your business with python tools, make excel templates and collect all the data you need from the internet!
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 }
show sepeartor between unordered list
li + li:before{ content: " | "; padding: 0 3px; }
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;
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; }
when floating and the image is bigger then the element use this so the element is adjusted to the image heigth
.clearfix { overflow: auto; }
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%; }
show all elements in a div-block flexible as inline
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
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
make media scalable
img, video, canvas { max-width: 100%;}
show different images depending on browser width
define variable at the very beginning:
:root { --primary-color: #047aed }
use the variable somewhere in the css:
background-color: var(--primary-color);
no border when entering an input field
input:focus { outline: none; }
button attention (makes button during hovering a little bit smaller)
transform: scale(0.98);
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)
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
FONT DEFINITION
taken from google fonts for example (take fonts and then create link in upper right corner for the link
# define in html in the header
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 }
ICON USE
Using icons directly from https://fontawesome.com/
# Definition in the head
# use icon in css (change size, color)
Using svg-files
put full svg-code (source) of the svg in a svg-tag like: 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
.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
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