0. CSS measuring units
1. Selecting multiple elements
If you are styling multiple elements the same way then you can select them all, instead of writing the same css code over and over.
CSS is written in rules. Each rules consists of a selector and a declaration block. So select the element you want to style and declare the styling.
2. font-family: first choice, second choice
If user’s browser doesn’t have your first choice of the font, then the browser can use the second choice by listing the second one after a comma.
3. color: hex or rgba
When you can hover over around the color square, the color picker will appear. You can slide the color hue or the transparency bar around and select the color.
4. Selecting the html class tag or the id tag
class
.className{
}id (not recommended)
#id{
}
(not recommended)Don’t use #id selector!
Using id is not recommended because the rulers are too tightly coupled with the HTML and there’s no possibility of reuse.
5. Margin, padding, width, height
margin : outside of the box
padding: inside of the box
Using box-sizing: border-box, the width of an element is exactly the width we defined.
6. HTML: Block element
Block elements use the full available width and forces line breaks.
7. HTML: Inline element
8. Beginning of CSS * margin and padding
*{box-sizing: border-box;margin: 0;padding: 0;/* border: 1px solid red; */}
There are default margin and padding so using asterick, select all element on the page. Then set margin and padding at zero. Then use margin-bottom for individual h1, body, or footer elements.
9. width and centering the element
.container {width: 75%; margin-left: auto;margin-right: auto;}
10. float and clear
The float property is to put block elements side-by-side.
.other-posts{
width: 25%;
float: left;
}.clearfix:after {
content: "";
display: table;
clear: both;
}
11. margin
margin: top right bottom left;margin: auto 20px auto 20px;
12. multiple element can share same class name
//html
<div className = "other">
</div><div className = "other">
</div><div className = "other">
</div>//css
.other {
margin-top: 30vh;
}
this will have all the other element boxes will have top margin at 30vh.
13. select image
.other img{
}
This select img inside of the other box
14. border-radius
50% is circle
15. image original ratio
.img { height: 80vh; width: auto;
}
16. relative / absolute box location
.parent {
position: relative;
}.child{
position: absolute;
top: 10px;
right: 30px;
}
when you want the child box on the top right corner or at a designated location, the parent box has to be relative and change the child’s top, right, left or bottom measure.
