Some CSS Tricks And Tips 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.!important gives the priorty to that element.

so here h2 element will be in red color.

so this heading will be in red color.

2. Hover Effect :

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

for eg.

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

to move entire div

4. transition effect :

transition effect makes the website seamless and engage the user.when page loads or user scroll the page then transition effect works.

for eg.

5. css media query :

media query in css make the website reponsive.

syntax :

@media only screen and { //set width } {

.content { // css style ; }

}

6. responsive images :

to make images responsive by css following properties are used :

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.

Myself Hrushikesh Patil and works at couponmoto as a web designer and content writer.