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

#beginners #codenewbie #css #tricks

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 ⚡

Top comments (14)

Collapse
 
gsarig profile image
Giorgos Sarigiannidis • • Edited

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
 
alexbricepalo profile image
Alex Brice •

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

Collapse
 
rahxuls profile image
Rahul •

That's comfortable to you.

Collapse
 
gsarig profile image
Giorgos Sarigiannidis • • Edited

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 •

Sure. This is cool and must know.

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 • • Edited

Very helpful

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 •

Oops

Collapse
 
vaishnavs profile image
Vaishnav • • Edited

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

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 •

Thank You Mike.

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 •

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.

View full discussion (14 comments)

Read next

codemaker2015 profile image

The ultimate guide to Retrieval-Augmented Generation (RAG)

Vishnu Sivan -

arshisaxena26 profile image

Demystifying hashCode() and equals(): The Backbone of Java Hash Collections

Arshi Saxena -

djames profile image

No Designer? No Problem! Craft Logos Effortlessly with Imagine AI Logo Generator

Blog Post -

martygo profile image

⛳️ Top 5 AWS Services Every Frontend Should Know 💎🧪

Martins Gouveia -