CSS fundamentals for the lazy coders

0. CSS measuring units

relative lengths
Absolute lengths

1. Selecting multiple elements

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

color picker

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

box-sizing
border-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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store