10 Must CSS tricks and tips for beginners

Subscribe to my newsletter and never miss my upcoming articles

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></div> </div>

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

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

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.

1.png


šŸ˜Ž Thanks For Reading | Happy Coding āš”

No Comments Yet