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.
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 class="title">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 class="vcentered"> <div>✓</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.
Comments