Most important css properties, concepts, tags?

Here is a list of some of the most important CSS syntax, in no particular order. It’s always good to refresh your CSS knowledge.

.bottom When position is set to absolute or fixed, the bottom property specifies the distance between the element’s bottom edge and the bottom edge of its containing block.

This will put the element at the bottom of the screen:

1
2
3
4
5
6
7
8

<style>
.element { 
    position: absolute;
    bottom: 20px; 
    height: 200px;
    border: 1px solid #000;
}
</style>

2
3
4

<div class="element">
test
</div>

The same goes for left, right and top.

transform: rotate(180deg); Will rotate.

.line-height The line-height CSS property sets the amount of space used for lines, such as in text, paragraphs etc. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.

3
4
5
6
7
8
9
10
11
12
13
14
15

<style>
.element { 
line-height: 1.2em;
font-size:20px;
}
</style>
 
 
<div class="element">
test<br />
test<br />
test
</div>

4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

To put a div on the right bottom of the page:
 
<style>
.element { 
position:absolute;
right:0px;
bottom:0px;
width:100px;
height:100px;
}
</style>
 
 
<div class="element">
test<br />
test<br />
test
</div>

vertical-align only works inside a table.

To align something inside a div, use:

5
6
7
8
9
10
11
12

<style>
.div2{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
</style>

z-index The z-index CSS property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally covers an element with a lower one.

Putting a text over image:

6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<style>
.element_supreme{
	position:relative;
	height:400px;
}
.element1 { 
position:absolute;
z-index:1;
}
 
.element2{
position:absolute;
z-index:2;
}
</style>
 
 
 
<div class="element_supreme">
<div class="element1">
<img src="http://www.fordesigner.com/imguploads/Image/cjbc/zcool/coolphoto/20080722/1216698031.jpg" />
</div>
<div class="element2">
ffff<br />
ffff<br />
ffff
 
</div>
</div>

You need to set the height of the initial div because it won’t know how big the child divs are.

.background. You can set background:red; without background-color. It’s like shorter version, it does the same thing. Also works for images.

background-attachment can make an image to be fixed (as background).

background-color: rgba(255, 0, 0, 0.2); (the best way to set opacity, transparency to a div/text).

background-size:cover; (covers all the width/height). background-size:contain; (keeps aspect ration), cover doesn’t.

box-shadow The box-shadow CSS property describes one or more shadow effects as a comma-separated list.
box-shadow: 60px -16px teal; (x, y, color); Add -1, 1 and so on.

To add blur, use a forth value: box-shadow: 10px 5px 5px black;

A better example with opacity and radius: box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

Clearing floats.
It can be done if you add something like

If it won’t work, use overflow:auto;

Margin with minus (-) will put an element outside of the page.

visibility:hidden; visibility:visible; will hide/show content. If it is hidden, the area will still remain but it will be empty.
This is the difference between visibility and display.
You can also just use display: none or display: block.

caret-color:red; Will make the | when typing inside an input red. (the typing bar that moves when you write something).

opacity. Adding opacity to hover:

7
8
9
10
11
12
13
14
15
16
17
18

<style>
.div1 img{
opacity: 1;
}
.div1 img:hover{
opacity: 0.5;	
}
</style>
 
<div class="div1">
<img src="https://i.pinimg.com/originals/bd/5d/84/bd5d845c980508d41b0329dc21d08d2b.jpg" />
</div>

-moz stands for Mozilla Firefox
-webkit stands for apple / ios

Transform example.

8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<style>
 
.div1 .div2{
opacity: 1;
transition: 1s ease-in-out;
}
.div1 .div2:hover{	
transform: translate(50px, 100px);
}
</style>
 
<div class="div1">
<div class="div2">
<img src="https://i.pinimg.com/originals/bd/5d/84/bd5d845c980508d41b0329dc21d08d2b.jpg" />
</div>
</div>

Notice that the initial div needs to have the transition property. And the second one (hover) needs to have some transform values.

Filter.
You can apply filter:blur(10px); to blur an image.

@font-face can be used to embed a font:

@font-face {
font-family: MyHelvetica;
src: local(“Helvetica Neue Bold”),
local(“HelveticaNeue-Bold”),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}