DEV Community

Cover image for 5 CSS Tricks & Tips That You Should Know πŸš€ + Giveaway
Garvit Motwani for World In Dev

Posted on • Updated on

5 CSS Tricks & Tips That You Should Know πŸš€ + Giveaway

CSS plays a major part in the field of web development and can be easy and at a point, it can also be advanced and tough, throughout CSS's history, numerous tricks have been discovered by the developer community. Today I will tell you a few of them.

So let's get started!


This one is pretty simple, it basically means to reset the whole document's default styling which is given by the browser itself. Most developers make a reset when they want nothing to get in their project's way or maybe for some specific project that needs one! Every developer has their own preference for using which reset as I use:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
Enter fullscreen mode Exit fullscreen mode

Some developers use:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
body {
    line-height: 1;
ol, ul {
    list-style: none;
blockquote, q {
    quotes: none;
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
table {
    border-collapse: collapse;
    border-spacing: 0;
Enter fullscreen mode Exit fullscreen mode

The above reset is and for more, you can just search reset CSS on google to find your own preference.


This is a common trick but it is sometimes not taught in the CSS tutorials or course, so many developers still don't know this trick. It basically capitalizes the first letter of every word in a particular tag. Look at this for example:

As you can see I have not capitalized any letter manually in the HTML, instead, I wrote text-transform: capitalize; and it did it dynamically.


Centering is easy but, in my case, I usually don't remember the code to center text or content. So I use some short code snippets for that which I stored in my notes πŸ˜….

You can use text-align: center; to center the text

To vertically center text in a div, you can use margin: auto;, but to give you a proper example you should take a look at this:

and then you can also add `text-align: center to center it both, horizontally and vertically.

To center an image, you should first of all turn it into a block element and do a margin: auto.

Drop Caps

Remember that 1st big letter in every chapter of your literature book or the start of a novel or a book. You can do that by using this snippet:


Prevent Highlighting

If you don't want the user to select or highlight anything on your website to prevent copying content, or maybe for some personal or any reasons, you can just use this:

Alt Text

⚑️ Giveaway ⚑️

We are giving away any course you need on Udemy. Any price any course.
Steps to enter the giveaway
--> React to this post
--> Subscribe to our Newsletter <-- Very important
--> Follow me on Twitter <-- x2 Chances of winning

The winner will be announced on May 1, Via Twitter

Thank you very much for reading this article.

Comment any tricks & tips you know!


Follow me on Dev and Twitter

Read also:

Subscribe to our newsletter to receive our weekly recap directly on your email!

Join us on Discord to participate in hackathons with us / participate in our giveaways!

Happy Coding.

Discussion (11)

arealsamurai profile image
Info Comment hidden by post author - thread only accessible via permalink
An actual, Real Samurai • Edited on

This is not a good article. Whoever is a beginner and tries to do this, will fail. You're leaving out of context a lot of things and even if I go and edit your code on codepen, I can see that removing margin or adding margin doesn't center anything vertically. What gives the vertically centered view of the text is your padding on the .center class and the margin of the p tag, not adding margin:auto. Please at least try out your own code before you post an article.

anonymouscoder profile image
Ali Fahmi

Great job!

garvitmotwani profile image
Garvit Motwani Author


aycanogut profile image


garvitmotwani profile image
Garvit Motwani Author

Thanks πŸ™

filatovv profile image
Yuri Filatov

Good work!

garvitmotwani profile image
Garvit Motwani Author

Thanks πŸ™

aalphaindia profile image
Pawan Pawar

Good work!!

garvitmotwani profile image
Garvit Motwani Author

Thanks πŸ™

hugekontrast profile image
Ashish Khare😎

Do not need the giveaway but do need tricks and hacks like this.

garvitmotwani profile image
Garvit Motwani Author

Thanks πŸ™ Bro

Some comments have been hidden by the post's author - find out more