8 Cool CSS Tips & Tricks to use in your next Project

Check out these cool CSS tips and tricks that you can make use in your next project or website.

Reading Time: < 1 minute

1. Reset

Some browsers apply different styles to each element, so it’s considered a best practice to reset your css at the very start.

2. Use Single-Line Property Declaration

Let’s say you want an element to have a border, instead of doing it like this:


you can do something like this:

.with-border {
 border: 1px solid red;

3. Use Text-transform

Instead of using all uppercase or lowercase characters in HTML directly:

<h1 class="title">THIS IS THE TITLE</h1>

You can just use the text-transform property:

.title {

4. Vertical Centering

Let’s say you’ve an HTML like this:

<div class="vcentered">

And you want to vertically center the check, just simply do:

.vcentered {

5. Link Style Order

When setting the style for link states, there are some order rules that you need to remember:

a:link a:visited a:hover a:active

6. Conditional Comments

An ideal way to target IE browsers is to use conditional comments:

<!--[if IE]>... <![endif]-->

This will only load when the browser viewing the page is internet explorer.

7. Drop Caps

You can easily achieve a dropcap by using CSS pseudo-element :first-letter

.content:first-letter {
 font-size: 3rem;

8. Truncate text with Ellipsis


 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;

The element’s width and overflow are required.