DEV Community

Cover image for 10 Must CSS tricks and tips for beginners
Rahul
Rahul

Posted on

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;
}
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

Use text-transform

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

<h1 class="title">THIS IS TITLE</h1>
Enter fullscreen mode Exit fullscreen mode

You can jsut use the text-transform property:

.title{
    text-transforom: uppercase;
}
Enter fullscreen mode Exit fullscreen mode

Vertical centering

Let's say you have HTML like this:

<div class="vcentered">
<div>&check;</div> </div>
Enter fullscreen mode Exit fullscreen mode

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

.vcentered{
    display: flex;
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Condtional comoments

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

<!--[ifIE]>... <![endif] -->
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

Truncate text with Ellipsis

Usage:

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

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.


1.png




😎 Thanks For Reading | Happy Coding ⚡

Discussion (14)

Collapse
gsarig profile image
Giorgos Sarigiannidis • Edited on

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>
Enter fullscreen mode Exit fullscreen mode

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

.container .element {
   color: #000;
}
Enter fullscreen mode Exit fullscreen mode

or

p.element {
   color: #000;
}
Enter fullscreen mode Exit fullscreen mode

instead of that:

.element {
   color: #000 !important;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
rahxuls profile image
Rahul Author

That's comfortable to you.

Collapse
gsarig profile image
Giorgos Sarigiannidis • Edited on

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.

Thread Thread
rahxuls profile image
Rahul Author

Sure. This is cool and must know.

Collapse
alexbricepalo profile image
Alex Brice

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

Collapse
olton profile image
Serhii Pimenov

Resetting box-sizing is helpful

*,
*::before,
*::after {
    box-sizing: border-box;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
rahxuls profile image
Rahul Author • Edited on

Very helpful

Collapse
vaishnavs profile image
Vaishnav • Edited on

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

Collapse
eddsaura profile image
Jose E Saura

Hey, take care with indentation!!

Good tips :)

<div class="vcentered">
    <div>&check;</div>
</div>
Enter fullscreen mode Exit fullscreen mode
Collapse
rahxuls profile image
Rahul Author

Oops

Collapse
alexbricepalo profile image
Alex Brice

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

Collapse
rahxuls profile image
Rahul Author

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.

Collapse
promikecoder2020 profile image
ProMikeCoder2020

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

Collapse
rahxuls profile image
Rahul Author

Thank You Mike.