Css Tips

Few things as a developer we should always keep in our mind in order to save time. Lot of things can be done with css.

1.Short-hand property.

Instead of writing css like this,

.header {
      background-color: #fff;
      background-image: url(image.gif);
      background-repeat: no-repeat;
      background-position: top left; 
    }

We can write css like this,

.header {
    background: #fff url(image.gif) no-repeat top left; 
    }

2.Avoid superfluous Selectors

Sometimes your CSS declaration can be simpler, meaning if you find yourself coding the following:

ul li { ... }

ol li { ... }

table tr td { ... }

They can be shorten down to just

li { ... }

td { ... }

3.Knowing !important

Any style marked with !important will be taken into use regardlessly if there’s a overwriting rule below it.

.page { background-color:blue !important; 

In the example above, background-color:blue will be adapted because it’s marked with !important, even when there’s a background-color:red; below it.

!important is used in situation where you want to force a style without something overwriting it, however it may not work in Internet Explorer.

4.Centering

This one is always tricky in css.

Text

It can be aligned by using text-align:center.
Whereas for div can be centered by adding block property to it. Here's an example,

#div1{
 display: block; 
 margin: auto; 
 Width: anything under 100%;
}

5.Vertical Alignment

You will use css navigation menu, I can almost guarantee that. The key is to make the height and line-height the same.
Here's an example,

.nav li {
 line-height:50px;
 height: 50px;
}

I hope you guys enjoyed the above post ❤️