Blog

Read our thoughts, comments & posts.

All

10 Essential CSS Tricks Every Beginner to Advanced Should Know

May 9, 2019

author:

10 Essential CSS Tricks Every Beginner to Advanced Should Know

If you’ve been working on your developer’s skills for some time now, you’ve probably met a lot of compiled lists of tricks and hacks to help you build the needed design.
However, there are a couple of them which are absolutely essential for your development from the very beginning to the very end.

CSS could be tricky sometimes and if you want to be tricky too, you should absolutely and fully understand the following basic tricks

1. box-sizing: border box;

The problem is that when you set a box to a specific width, and add padding to it, the padding adds to the size of the box. This unwanted behaviour could be easily hacked.
If you want the box to stay the size it is meant to be, just do not forget to use box-sizing: border-box;, and the problem would be negated. This CSS trick is helping a lot of web designers in their everyday work, because there are no layout or padding issues anymore.

2. position: absolute;

Think of your browser window as a big bounding box and imagine you could control exactly where in that box your element could be put. Absolute positioning is the key to that magic.
Just be sure to use top, right, bottom and left, along with pixel values to control all of it.
And sure do not forget to put position: relative to the parent box.

3. Vertical alignment for one text line

Basically, web designers tend to follow the design trends, which means that I can guarantee you will use that at least ones in a CSS navigation menu for example.
What you need to do is to make the height of the menu and the line-height of the text the same.

4. * + selector

The * allows you to select all elements of a particular selector. Let’s take an example. If you use *li and then add CSS styles to that, it would be done to all elements with a <li> tag.
That trick not only saves you a lot of code lines, but enables you to target and change the needed part globally, saving you time and effort.

5. Scaling image proportionally

Most of the time your image will need to fit a needed width, while scaling proportionally. There are only a few simple lines you should remember, when getting up to this.
Just use max width and auto height like here:

img {
max-width: 100%;
height: auto;
}

6. Transitions

If you’re using hover effects (:hover) , for example for text links, buttons, or even block sections and icons of your website, you must be aware of transitions too. Why?
Because when you’re using a hover effect for a button, you don’t want colours to snap too quickly to the final result. You will probably want to ease that change like this:

main-button:hover {
color: #f00;
transition: all 0.3s ease;
}

7. Selecting direct children

I hope this CSS trick will save you a lot of time, if you’re a beginner!
Use “>” to target the direct children of an element, like this:

#nav > a {

}

which is selecting and styling all the active links that are immediately under the Nav ID. It will not select anything else contained in the navigation.

Something even more! If you need to style a specific items of one list, you need to count how many items down the element is that you want to style:

li:nth-child(3) {
font-weight: 800;
color:red;
text-style: underline
}

8. Place an icon before an element

The :before CSS selector is extremely handy in that situation. It allows us to insert some content (in our case – the icon) before every selected element.

p:before {
content: '' '';
display: block;
background: url (“icon.jpg") no-repeat;
width: 20px;
height: 20px;
}

9. View height

In some situations while building a site, you will want a section to fill the entire screen, no matter the screen size. This can be done with the vh trick, or the view height.
It is used with a percentage, so if you want to fill 100% of the screen, you just need to set it to 100.

10. Reset

If you want to have a consistent playground, make sure you put some CSS resets before starting styling anything. It is like building a house, you just need strong foundations.
The CSS reset is a standard starting point for all websites you are going to work on.

Every browser has its own built-in default style settings which are different. So make sure you remove all unwanted default preset margins and paddings, all line heights and borders, and so on.

I am pretty sure there are a lot more tricks you should understand, when designing a masterly piece of work, but with these knowledge in hand, you are ready for the real CSS game.

Don't want to miss anything?


Get weekly updates on the newest design stories,
case studies and tips right in your mailbox.


Need a successful project?