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 centering

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 were 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 ⚡

Comments

[Giorgos Sarigiannidis]

Use of !important should be discouraged. Instead, if you want to override a previously declared style, you can make the selector more specific. For example, suppose we have this markup:

<div class="container">
   <p class="element">Some text</p>
</div>

To override the styles assigned to .element, it is better to do this:

.container .element {
   color: #000;
}

or

p.element {
   color: #000;
}

instead of that:

.element {
   color: #000 !important;
}

[Rahul]

That's comfortable to you.

[Giorgos Sarigiannidis]

It's not about comfort or convenience, as use of !important is considered a bad practice and should be avoided. Quoting from MDN:

Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with a greater specificity will be applied.

It's good for novice developers to know that !important exists, as they might eventually need it at some point, but they should also know that it should be the last resort.

[Rahul]

Sure. This is cool and must know.

[Alex Brice]

The need for !important is usually a sign of poorly written code.

[Serhii Pimenov]

Resetting box-sizing is helpful

*,
*::before,
*::after {
    box-sizing: border-box;
}

[Rahul]

Very helpful

[Vaishnav]

Hey, Suggestions here
for resetting margin and padding
'* {
margin:0;
padding: 0
}'
(less typing!)

[Jose E Saura]

Hey, take care with indentation!!

Good tips :)

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

[Rahul]

Oops

[Alex Brice]

There are many typos in this post. A quick proofread would bring a bit more credibility to your article.

[Rahul]

I agree with you sir. I blog via phone so it becomes really hard to see. From next time I will surely keep this in mind. I'm sorry.

[ProMikeCoder2020]

Amazing article as always :-) Really appreciate you spreading knowledge. The trick that surprised me most was the internet explorer one.

[Rahul]

Thank You Mike.