|
CSS libraryI dont like how messy W3schools is, lets do it better. Features: illustrated explanations (solving "is this what you want").
|
window.addeventlistener('scroll', () => {console.log(window.innerHeight)}
window.addeventlistener('scroll', () => {if(window.scrolly + window.innerHeight > document.documentElement.scrollHeight){loadImages()}
Dont use this often, only to override existing css just for this particular item
background: white !important;
padding: 20px !important;
width: 100% !important; (override to make width 100%)
background: #333;
background: #999;
background: #005e9b; (hex code)
background-color:#7A0000;
border-radius: 0.5rem;
border-radius: 10px; (make corners rounded to 10px)
border-radius: 0 0 10px 10px (top left top right nothing, bottom right bottom left 10px)
border-radius: 100px; (half width and height at 200px, it becomes a circle)
box-shadow: 0 0 20px rgba (0,0,0,0)
box-sizing: border-box;
Color: red;
Color: green;
Color: gold;
Color: rgba (0,0,0,0);
Display: Block (maximum width)
Display: Inline (minimum space possible)
Display: Inline-block (set width and height within inline )
Display: None
Display: flex
Display: grid
font-family:
font-size:
font-weight:
font-style:
font-variant:
<img src = "">
<img src = "" height=200px; width 300px > (not very good)
<head>
<style>
img {height: 200px; width: 300px}
</style>
<br> to push it down
<head>
<style>
img {height: 30%; width: 40%}
</style>
percentage based on total screen
line-height: 200px;
Margin: 10px (all around)
Margin: 10px 0px (just top and bottom);
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
Opacity: 0.5;
padding: 100px; (all round)
padding-right: 100px; (only rightside)
padding-top:100px;
padding-left: 100px;
padding-bottom:100px;
padding: 10px 10px 10px 10px; (top, right, bottom, left)
padding: 10px 10px; (top+bottom, left+right)
padding: 2em;
Position: relative; (like a car that's parked relative to the static carpark lines)
position: static; (default position)
position: absolute; (ignores the element, basically used so it cant be moved around)
<style></style> //for used in html documents for styling rest of content
<style> img {width: 100%;} //for making images 100% for that particular post
text-align: center;
Transform: perspective (10rem)
Visibility: visible;
Visibility: hidden;
Width: Auto; (automatically distributing the space according to screen)
Width: 100% (width of the document and have to scroll)
window.addeventlistener('scroll', () => {if(window.scrolly + window.innerHeight > document.documentElement.scrollHeight){loadImages()}
Dont use this often, only to override existing css just for this particular item
background: white !important;
padding: 20px !important;
width: 100% !important; (override to make width 100%)
background: #333;
background: #999;
background: #005e9b; (hex code)
background-color:#7A0000;
border-radius: 0.5rem;
border-radius: 10px; (make corners rounded to 10px)
border-radius: 0 0 10px 10px (top left top right nothing, bottom right bottom left 10px)
border-radius: 100px; (half width and height at 200px, it becomes a circle)
box-shadow: 0 0 20px rgba (0,0,0,0)
box-sizing: border-box;
Color: red;
Color: green;
Color: gold;
Color: rgba (0,0,0,0);
Display: Block (maximum width)
Display: Inline (minimum space possible)
Display: Inline-block (set width and height within inline )
Display: None
Display: flex
Display: grid
font-family:
font-size:
font-weight:
font-style:
font-variant:
<img src = "">
<img src = "" height=200px; width 300px > (not very good)
<head>
<style>
img {height: 200px; width: 300px}
</style>
<br> to push it down
<head>
<style>
img {height: 30%; width: 40%}
</style>
percentage based on total screen
line-height: 200px;
Margin: 10px (all around)
Margin: 10px 0px (just top and bottom);
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
Opacity: 0.5;
padding: 100px; (all round)
padding-right: 100px; (only rightside)
padding-top:100px;
padding-left: 100px;
padding-bottom:100px;
padding: 10px 10px 10px 10px; (top, right, bottom, left)
padding: 10px 10px; (top+bottom, left+right)
padding: 2em;
Position: relative; (like a car that's parked relative to the static carpark lines)
position: static; (default position)
position: absolute; (ignores the element, basically used so it cant be moved around)
<style></style> //for used in html documents for styling rest of content
<style> img {width: 100%;} //for making images 100% for that particular post
text-align: center;
Transform: perspective (10rem)
Visibility: visible;
Visibility: hidden;
Width: Auto; (automatically distributing the space according to screen)
Width: 100% (width of the document and have to scroll)