Top 7 CSS Tricks every beginner must use

Top 7 CSS Tricks every beginner must use

CSS is cool. Once you are done with the CSS basics, you immediately want to go to the next level. However, apart from being cool, CSS is tricky as well. So, you too should get tricky. Here we have compiled a list of some very useful CSS tricks and techniques. These hacks are really going to help you in building your design.

CSS Trick 1:

Absolute positioning

Want to control where an element is going to live on your website? You can make this happen by using absolute positioning. See the browser as a big bounding box. With this CSS trick, you can exactly control the position of the element. You can use left, right, top and bottom with some pixel value to position the element.

position:absolute;

top:15px;

right:15px

You can use this CSS trick inside div. as well.

CSS Trick 2:

*+selector

* allows you to select all elements of a selector. Consider *p as an example. Simply add some CSS style to *p and you will find that all elements of the selector in the document are affected.

CSS Trick 3:

Overriding all styles

Use this trick only when required. If you are using it every time, this is going to create problems for you in the long run. When you want to override some CSS style, you can use !important with the style.

For example:

.section h1 {color:blue !important;}

CSS Trick 4

Centering

This CSS trick is tricky. It greatly depends on what you want to center. Let’s see some examples:

Text

Text-align:center;

Content

If you want to center div or some other element, you need to add block property and then use auto margins.

#div{

display:block;

margin:auto;

…….

…….

}

CSS Trick 5

Vertical Alignment

You are going to use this CSS trick in a CSS navigation menu. This is used to make the line-height of the text and the height of the menu the same.

.nav li {

line-height:40px;

height:50px;

}

CSS Trick 6

Hover effects

The hover effect is used for text links, buttons, icons, back sections of the website and more. This effect changes the color of an element when the mouse is hovered over it. You can add :hover to that CSS.

For example:

.entry h1{

font-size:24px;

color:#000;

font-weight:600;

}

.entry h1:hover{

color:#f00;

}

As the mouse hovers to h1 tag, its color is changed from black to red.

Transition

With transition, these changes will be eased gradually.

.entry h1:hover{

color:#f00;

transition: all 0.4s ease;

}

So, all changes will happen over .2 seconds.

CSS Trick 7

Link States

A lot of designers miss using this trick. Not using this trick creates usability issues with the website users. The :link pseudo-class handles the styling of the links that are not clicked by the website user. The :visited pseudo-class controls the styling of links that are visited by the website user. With link state, you can let the user know that he has already visited a particular link.

a:link {

color: blue;

}

a:visited {

{

color: purple:

}

Leave a Reply

Your email address will not be published. Required fields are marked *