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

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:

.with-border{
 border-width:1px;
 border-style:solid;
 border-color:red;
}

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 >THIS IS THE TITLE</h1>

You can just use the text-transform property:

.title {
 text-transform:uppercase;
}

4. Vertical Centering

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

<div >
<div>&check;</div></div>

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

.vcentered {
 display:flex;
 align-items:center;
}

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

Usage:

:.content{
 width:400px;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

The element's width and overflow are required.