10 Must CSS tricks and tips for beginners

CSS tricks are something everyone should know for productivity and doing their projects fast. Here I have gathered 10 simple and must-know tricks for beginners who are learning to code.

Reset

Some browser applies different styles to each element, so it's considered a best practice to rest your CSS at the very start.

body, div, h1,h2, h3, h4, h5, h6, p,ul {
    margin: 0;
    padding: 0;
}

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;
}

/* Simple way to do this */

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

Use text-transform

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

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

You can jsut use the text-transform property:

.title{
    text-transforom: uppercase;
}

Vertical centring

Let's say you have HTML like this:

<div class="vcentered">
<div>&check;</div> </div>

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

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

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

Condtional comoments

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

<!--[ifIE]>... <![endif] -->

This will only load when the browser browser viewing the page is Internet Explorer.

Drop Caps

You can easily achieve a drop cap by using the CSS pseudo-element :FIRST-LETTER.

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

Truncate text with Ellipsis

Usage:

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

The element's width and overflow are required.

Overriding all the styles

For overriding specific style in CSS you can use the !important after the style.

h2{
    color: blue !important;
}

Hover effects

This is used for button, links and icons. When someone hovers on link it will change colors. We'll use :hover for it.

.first h4{
    font-size:36px;
    color:#000;
    font-weight:800;
}

.first h4:hover{
    color:#f00;
}

This was some basic CSS tricks I think beginners must know. For advanced users also coming.

Need Help

Need help in raising fund to buy a Mechanical Keyboard. This pandemic has affected my family badly so can't ask my DAD for it. Please Help Me.

😎 Thanks For Reading | Happy Coding ⚡