FinanceInsuranceMortgageTechBusinessTravelLegalHealth/FitnessSportsFashionRenovationReviews

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{

font-size:0;

background-color:#f9f9f9;

}

.parent .child1 {

font-size:12px;

width: 50%;

display:inline-block;

}

.parent .child2 {

font-size:12px;

width: 50%;

display:inline-block;

}

 

 

 

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

+2
Author's Score
0.2
Up Votes
1
Down Votes
0
Articles
0
Voted on
1 articles
For everything fun and local, you can find it on Fonolive.com, #1 Social Classifieds
Tags:
html, html, css, css, web design, web design,

Recent Articles

As a new writer I find myself constantly looking and researching the endless possibilities on the tricks of the...
Tools of Information and Communication Technologies play an important role in the performance of students. They...
The most demanding and perfect job to become successful is to be an event planner. Usually, people do many efforts...
If you're looking for the "massage benefits" on Google, you'll probably see lists containing words like...
Today you wouldn't think that people would be lonely in the digital age but they are. Here are some ways to cope...


Copyrights © 2019 Voticle. All Rights Reserved.