Css tricks every beginner should know

HTML and CSS are backbone of web designing.You can create website with HTML. And CSS describese the style of html document. HTML create webpages with the content like images, text and more. CSS is used to design webpage.CSS helps to make web page look beautiful. HTML stand for Hyper Text Markup Language. HTML is very easy to learn. In HTML everything is done through tags. Tags are the elements in html document. In that tag we can create class and id which later we used for CSS. In css its called selector. In the world of mobile responsive website their are some tricks in css which every beginner must know. web page layout, alignment and many more can done through css.CSS has many tricks and tips which make your work less, efficient and easy.Here are some tip and tricks :


1. overriding the style content :

If you want to override some content then you need to use !important after the style.

.heading h2 { background-color : red !important ; }


2. Hover Effect :

hover effect means when you move cursor on content then he change their behaviour

for eg.

.heading { border-color : blue ; }

.heading:hover { border-color : red ; }

here the border color of heading will change from blue to red when the cursor in on content of class heading .



3. Center :

sometime we want to move text to center and sometime entire container so for text there is property of text-align:center which move the text to center but for entire div or container we need to give the margin which is set to auto.

for eg.

.heading h1 { text-align:center ; }

to move entire div

.section {

margin : auto;

width: 80%; // anything under 100%



4. transition effect :

transition effect makes the website seamless and engage the user.

for eg .

.content { background-color : red ; transition : all 0.2 ease ; }


5. css media query :

media query in css make the website reponsive.

syntax :

@media only screen and {

.content { // css style ; }



6. responsive images :

to make images responsive by css following properties are used :

.content { max-width : 100% ; height : auto ; }


7.Removing white space in display:inline-block element :

Here the display:inline-block property is used in css to align item in side by side. but this property take some extra space. So it becomes difficult to make a perfect layout. to solve this issue or remove that extra space used font-size property.


display:inline-block property in css takes extra white space.

To remove this white space make a parent div and their sub div's.

In parent div use font-size:0 css property.

And in sub div's increase font-size to 12px or whatever you want.

font-size:0 property remove extra space in display:inline-block property.







.parent .child1 {


width: 50%;



.parent .child2 {


width: 50%;






Hi, Myself hrushikesh and working at couponmoto as web designer cum content writer

Author's Score
Up Votes
Down Votes
Voted on
1 articles

Comments on Css tricks every beginner should know, Fastest Growing Classifieds Marketplace, #1 Free Classifieds Marketplace
html, html, css, css, web design, web design,

Recent Articles

Many of us tend to make frequent English grammar mistakes. Without the help of a qualified English teacher, we...
Want to make your career in Software testing and Quality Assurance? You might be comfortable writing up codes, but...
ITIL, going beyond improving IT services, also solves business problems. By balancing adaptability and rigor, many...
Isn’t it very obvious that Acoustic Violin and electric violin will have some major differences? Even if...
A career plan records short-and long haul career goals and the moves you can make to accomplish them. Career plans...
Backpage EscortsEscorts Canada, TorontoEscorts VancouverEscorts CalgaryEscorts Ottawa

Copyrights © 2021 Voticle. All Rights Reserved.