Add CSS
1. External CSS
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2. Internal CSS
<style> .zz{ font-size:20px; } </style>
3. Inline CSS
<h1 style="color:blue;text-align:center;">This is a heading</h1>
Align center
1.horizon center
margin:0 auto;
2. Flex (for parent)
.parent { display:flex; align-items: center;/*vertical*/ justify-content: center;/*horizonly*/ width:100%; /* necessary */ height:100%; /* necessary, if use percentage, parent height will as per child (child spread parent height) */ }
3. Transform (for the align element)
.parent{ width:200px; /* need to be fixed height, cannot be percentage */ height:200px; /* can be percentage */ position:relative; } .content{ left:50%; top:50%; /*change postion based on parent */ transform:translate(-50%,-50%); /* change position based on itslef */ }
Browser specific
1. IE only
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .ng-star-inserted { flex-basis: auto !important; } }
2.Edge only
@supports (-ms-ime-align:auto) { .ng-star-inserted { flex-basis: auto !important; } }
Color
1.Color values
color: Lime; /* Color Names */ color: #00ff00; /* Hex */ color: rgb(0, 255, 0); /* RGB */ color: rgba(0, 255, 0, 1); /* RGBA */ color: hsl(120, 100%, 50%); /* HSL or HSV */
Display
1. block
<div> <h1> <p> <ul> <li>
occupy entire line, can include both block and inline elements
text-align: left/right/center; /*default:left, used for block to align horizontally for its child block or inline elements */ max-height: 50px; /*if greater than 50px, will trigger overflow, only work for block */
2. inline
<span> <a> <img> <input> <button>
not using new line, can only include inline elements
"height"(can use line-height),"width"(can use padding-left/right),padding(however change the border)/margin to top and bottom not working
vertical-align:bottom/top/middle/50px /*used for inline element align vertically, need to work with line-height */
3. inline-block
inherit all function for both block and inline elements
Flex
display:flex will influence how this div's children being displayed, not itself (container)
1.1. posiont:absolute/fixed will disable display:flex
To use flex you need have a outter div of it and put position:absolute/fixed to it (also set 100%)
1.2. flex will disable "float, clear and vertical-align" of its children
1.3.flex-direction
(default) row /row-reverse/ column/ column-reverse
1.4. flex-wrap
flex-wrap: nowrap; /*default value, will not use new line, width of elements will stop working if too big */ flex-wrap: wrap; /* will wrap the elements to new lines based on the width of each element */
1.5. flex-flow
flex-flow: row wrap; /*flex-flow = flex-direction + flex-wrap */
1.6. justify-content
justify-content: center; /* allocate in center with no gap between */ justify-content: flex-start; /* default, allocate from very left and no gap between */ justify-content: flex-end; justify-content: space-around; /* allocate whole row with gap before between and after */ justify-content: space-between; /* allocate whole row with gap between*/
1.7. align-items
"flex-start | flex-end | center | baseline | stretch"
align-items: stretch; /*default, children will fill all the contatiner, div height is working, but div still hold that space*/ align-items: baseline;/*the first line of text for each div will set on the same baseline */
1.8. align-content
"flex-start | flex-end | center | space-between | space-around | stretch", this only works when there are multiple rows
align-content: stretch; /*default, children will fill all the contatiner, div height is working, but div still hold that space*/
These settings are used by the children of flex container
2.1 order
<div style="display:flex"> <div style="order: 3">1</div> <div style="order: 2">2</div> <div style="order: 4">3</div> <div style="order: 1">4</div> </div> <!-- output: 4 2 1 3 -->
2.2 flex-grow
(default 0) define how children share the spare space(if any), first calculate spare space (1000-100-100-100=700px), then assign space as per all flex-grow values
<div class="flex-container"> /* 1000px*/ <div style="flex-grow: 4">1</div> /* 100px, grow = 400px*/ <div>2</div> /* 100px, grow = 0px*/ <div style="flex-grow: 3">3</div> /* 100px, grow = 300px*/ </div>
2.3 flex-shrink
(default 1), define how children shrink if total width exceed the parent width, now total=200, all children with default flex-shrink=1, so their width will not work, 50px for all
<div class="flex-container"> /*200 px*/ <div>1</div> /*100 px =>50px*/ <div>2</div> /*100 px =>50px*/ <div>3</div> /*100 px =>50px*/ <div>4</div> /*100 px =>50px*/ </div>
however when shrink, if a child div is spread by it's children (170px), it will not shrink smaller than its children, but also not greater than its own width (100px, high priority)
<div class="flex-container"> /*200 px*/ <div>1</div> /*100 px =>15px*/ <div><div style="wdith:170px"></div></div> /*100 px =>100px (children spread parent to parent size)*/ <div><div style="wdith:70px"></div></div> /*100 px =>70px (parent shrink to children size)*/ <div>4</div> /*100 px =>15px*/ </div>
if all children of flex container is spread by their own children, and total width greater than flex container, container will overflow (200px=>400px)
<div class="flex-container"> /*200 px*/ <div><div style="wdith:200px"></div></div> /*100 px =>100px(children spread parent to parent size)*/ <div><div style="wdith:200px"></div></div> /*100 px =>100px(children spread parent to parent size)*/ <div><div style="wdith:200px"></div></div> /*100 px =>100px(children spread parent to parent size)*/ <div><div style="wdith:200px"></div></div> /*100 px =>100px(children spread parent to parent size)*/ </div>
you can change the flex-shrink to control how it shrink, assume x is compress ratio, 100*2x+100*3x+100*2x+300*x=200px, so x=0.2
so children 100*2*0.2=40px,100*3*0.2=60px,100*2*0.2=40px,300*0.2=60px
<div class="flex-container"> /*200 px*/ <div style="flex-shrink: 2">1</div> /*100 px =>40px*/ <div style="flex-shrink: 3">2</div> /*100 px =>60px*/ <div style="flex-shrink: 2">3</div> /*100 px =>40px*/ <div>4</div> /*300 px =>60px*/ </div>
you can use flex-shrink=0, to not shrink the div all the time, so it will always be its width, if exceed container will overflow (at least 300px, other div will use their children width)
<div class="flex-container"> /*200 px*/ <div style="flex-shrink: 0">1</div> /*300 px =>300px*/ <div>2</div> /*100 px =>its children size, if no children spread, then 0*/ <div>3</div> /*100 px =>its children size, if no children spread, then 0*/ <div>4</div> /*100 px =>its children size, if no children spread, then 0*/ </div>
2.4 flex-basis
same as "width"(if both defined, flex-basis has high prioity, if either is auto, the other one is high priority), if div width/flex-basis is not defined or set to "auto", then its size depands on its content size.
2.5 flex
flex: 0 0 200px /* flex-grow, flex-shrink, and flex-basis */
2.6 align-self
has same parameter of align-items for flex container, this will override the align-items
Font family
1. Set font family
/*first use Roboto, if not found use Times New Roman, if not found use default font in sans-serif*/ font-family: 'Roboto,Times New Roman, sans-serif'
2. Default font for generic family
sans-serif (Arial) serif (Times New Roman)
3. Built-in font family
https://en.wikipedia.org/wiki/Font_family_(HTML)
4. Use online font
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
https://fonts.google.com/?selection.family=Roboto
Other online fonts
https://fontlibrary.org/en/font/trueno
Font size
1. Default html font size (16px)
2. pt
(1 pt = 4/3 px; 1 px = 0.75 pt)
3. 150% or 1.5 em
(1.5 times of parent font size)
4. 1.5 rem
(1.5 times of html font size)
Margin/Padding
margin: 25px 50px 75px 100px; /*top right bottom left */ margin: 25px 50px 75px; /*top right bottom */ margin: 25px 50px; /* top,bottom:25px; right/left: 50px */ margin: 25px; /* all 4 margin is 25px */
Media
1. Screen size
****you need stick to this order in case the rule after will overrite the rule before
/* Extra small devices (phones, 600px and down) */ @media only screen and (max- 600px) {...} /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min- 600px) {...} /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min- 768px) {...} /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min- 992px) {...} /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min- 1200px) {...}
screen (computer display); print (printers); all (all devices, default setting); only (keyword to prevent old browser rendering the css in bracket)
2. Orientation
@media only screen and (orientation: landscape) {...} @media only screen and (orientation: portrait) {...}
3. Resolution
@media (min-resolution: 72dpi) {...} @media (max-resolution: 300dpi) {...} /* Exact resolution, this should be very end in case overrite by others */ @media (resolution: 150dpi) {...}
DPI (dot per inch) = PPI (pixel per inch)
4K resolution on 55 inch TV = 84 dpi
4K resolution on 21 inch PC = 177 dpi
Iphone x = 463 dpi
4. Multiple conditions
/* When (the width is between 600px and 900px OR above 1100px) AND orientation is not landscape */ @media screen and ((max- 900px) and (min- 600px), (min- 1100px)) and not {orientation: landscape} {...}
use 'and' ',' and 'not' for logic, and remember to use brackets correctly
5. Use media rule in css reference
<link rel="stylesheet" media="screen and (min- 900px)" href="widescreen.css">
Naming
1. Class name
use dash(-) to connect: .nav-first-tab{...} .home-piechart-title
2. BEM (Block Element Modifier)
Block + 2 underscore + Element + 2 dashes + Modifier: .form__submit--disabled {...}
Position
1. static vs relative
relative position can work with "top, bottom, left, right, z-index" (but will still hold the original space in the file stream, you only move them visually), static will ignore all those
relative need to be declared as the parent of absolute
2.relative vs absolute
relative can have any parent, absolute need to has relative as parent (if direct parent is not relative, will check upwards to find nearest parent with relative)
absolute will not appear in file stream, meaning that it will not hold any space, you need use padding/margin/empty div as placeholder
"top bottom left right" for absolute will base on the (0,0) on the left top corner of html element, if no declared, will use the position of parent with relative
3. fixed vs abosolute
fixed use (0,0) on the left top corner of viewpoint, will float even when scrolling
4. z-index
default z-index = 0
the higher the forward it is for same parent, for different parent, compare parent z-index, if parent same then compare their index
5. overflow
overflow: visible /*default value, content not crop, show outside div */
overflow: hidden /*content will crop, not showing content outside div */
overflow: auto /*content will crop, show scroll bar if necessary */
overflow: scroll /*content will crop, show scroll bar all the time */
Sass/ Scss
Selector
Transform
Transition
1. use transiton with action function (hover/focus...)
transition: width .35s ease-in-out .5s; /*property, duration, effect, delay */ transition: width 2s, height 2s, transform 2s; /*multiple transition */ /*transition need work with ation function: hover/focus... */ div:hover { width: 500px; } input:focus { width: 500px; } div:hover { transform: translateX(500px) translateY(500px) scale(0.8) rotate(360deg); }
2. transition-property
width/height/all: Specifies the name of the CSS property the transition effect is for
3. transition-timing-function
ease (default, slow start and end), linear, ease-in (slow start), ease-out (slow end)
Var()
declare var with 2 dash as --xxx and use it as var(--xxx), declare in :root (same as html{})
:root { --main-bg-color: coral; } #div1 { background-color: var(--main-bg-color); }
Width or height
1. vh and vw
(0-100, percentage of the viewpoint area size)