DEV Community

Cover image for 22 Useful CSS Tips and Tricks Every Developer Should Know
Syed Mohsin Raza
Syed Mohsin Raza

Posted on • Edited on

22 Useful CSS Tips and Tricks Every Developer Should Know

#css #webdev #beginners #html

🚨🚨 Note: All the tips, tricks shared in this article are part of GitHub repository css tips tricks A handmade collection of pro css tips tricks for developers. Please checkout the repositiory and Give it a star if you find it useful 🌟

1. Docs Layout

Create a responsive documentation-styled layout with only two lines of CSS.



.parent{
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}
Enter fullscreen mode Exit fullscreen mode

layout

2. The Custom Cursors

Checkout the github repository css tips tricks to learn more about it.



html{
  cursor:url('no.png'), auto;
}
Enter fullscreen mode Exit fullscreen mode

image with custom cursor

3. Fill Text With Images 



h1{
  background-image: url('images/flower.jpg');
  background-clip: text;
  color: transparent;
  background-color: white;
}
Enter fullscreen mode Exit fullscreen mode

Air max

Note: Always specify background-color when using this technique as this will be used as a fallback value in case the image does not load for some reason.

4. Adding Stroke to Text

Make text more legible and visible using text-stroke property it adds a stroke or outline to text.



/* 🎨 Apply a 5px wide crimson text stroke to h1 elements */

h1 {
  -webkit-text-stroke: 5px crimson;
  text-stroke: 5px crimson;
}
Enter fullscreen mode Exit fullscreen mode

NETLIFY

5. Paused Pseudo Class

Use :paused selector to style media elements when in paused state likewise :paused we also have :playing.



/* 📢 currently, only supported in Safari */

video:paused {
  opacity: 0.6;
}
Enter fullscreen mode Exit fullscreen mode

plam tree on river

6. Emphasing Text

Use text-emphasis property to apply emphasis marks to text elements.You can specify any string including emojis as its value.



h1 {
  text-emphasis: "⏰";
}
Enter fullscreen mode Exit fullscreen mode

Time is a healer

7. Style Drop Caps

Avoid unnecessary spans and use pseudo elements instead to style your content likewise first-letter pseudo-element we also have first-line pseudo-element.



 h1::first-letter{
  font-size: 2rem;
  color:#ff8A00;
}
Enter fullscreen mode Exit fullscreen mode

Gitpod.io

8. Fallback values for Variables 



/* 🎨 crimson color will be applied as var(--black) is not defined */

:root {
  --orange: orange;
  --coral: coral;
}

h1 {
  color: var(--black, crimson);
}
Enter fullscreen mode Exit fullscreen mode

crimson colored text

9. Change Writing Mode

You can use writing mode property to specify how text should be laid out on your website i.e vertically or horizontally.



<h1>Cakes & Bakes</h1>
Enter fullscreen mode Exit fullscreen mode 


/* 💡 specifies the text layout direction to sideways-lr  */

h1 {
  writing-mode: sideways-lr;
}
Enter fullscreen mode Exit fullscreen mode

text starting from

10. Rainbow Animation

Creates a continuously looping color animation for elements to grab user attention. Give a read to css tips tricks repository to learn when to use prefer-reduced-motion media feature



button{
  animation: rainbow-animation 200ms linear infinite;
}

@keyframes rainbow-animation {
  to{
    filter: hue-rotate(0deg);
  }
 from{
    filter: hue-rotate(360deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

shop now button changing its color contineously

11. Master Web Development

Subscribe to our YouTube channel to take your web-development skills to the next level. One of the recent video series goes over creating the following open source portfolio template.

Imon

12. Zooming on Hover 



/* 📷 Define the height and width of the image container & hide overflow */

.img-container {
  height: 250px; width: 250px; overflow: hidden;
 }

/* 🖼️ Make the image inside the container fill the container */

.img-container img {
  height: 100%; width: 100%; object-fit: cover; 
  transition: transform 200m ease-in;
 }

 img:hover{
  transform: scale(1.2);
 }
Enter fullscreen mode Exit fullscreen mode

crimson colored shopping bag laying on grey tiles

13. Attribute Selector

Select HTML elements based on attributes using the attribute selector.



<a href="">HTML</a>
<a>CSS</a>
<a href="">JavaScript</a>
Enter fullscreen mode Exit fullscreen mode 


/* 🔗 targets all a elements that have a href attribute */

a[href] {
  color: crimson;
}
Enter fullscreen mode Exit fullscreen mode

HTML CSS JavaScript

14. Clipping Elements

Use the clip-path property, to create interesting visual effects, such as clipping an element to a custom shape like a triangle or hexagon.



div {
  height: 150px;
  width: 150px;
  background-color: crimson;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
Enter fullscreen mode Exit fullscreen mode

triangle

15. Detect Properties Support

Use CSS @support rule to detect support for CSS features directly in your CSS. Checkout the css tips tricks repository to learn more about feature queries.




@supports (accent-color: #74992e) {
/* code that will run if the property is supported */
  blockquote {
    color: crimson;
  }

}
Enter fullscreen mode Exit fullscreen mode

Never break your promise.(Hazrat Ali A.S)

16. CSS Nesting

The CSS working group has been working on figuring out how to add nesting to CSS. With nesting, you'll be able to write CSS that is more intuitive, more organized, and more efficient. 



<header class="header">
  <p class="text">Lorem ipsum, dolor</p>
</header>
Enter fullscreen mode Exit fullscreen mode 


/* 🎉 You can try CSS nesting now in Safari Technology Preview*/

.header{

  background-color: salmon;

  .text{
    font-size: 18px;
  }

}
Enter fullscreen mode Exit fullscreen mode

17. The Clamp Function

Use the clamp()function for responsive and fluid typography.



/* Syntax: clamp(minimum, preferred, maximum) */
h1{
  font-size: clamp(2.25rem,6vw,4rem);
}
Enter fullscreen mode Exit fullscreen mode

gif font size changing based on screen size

18. Styling Optional Fields

You can style form fields like input, select and textarea that dose not have a required attribute on them using the :optional pseudo class.



/* Selects  all optional form fields on the page */

*:optional{
  background-color: green;
}
Enter fullscreen mode Exit fullscreen mode

19. Word Spacing Property

Use word-spacing property to specify length of white space between words.



p {
  word-spacing: 1.245rem;
}
Enter fullscreen mode Exit fullscreen mode

20. Create Gradient Shadows

This is how you can create gradient shadows for an exclusive user experience.



:root{
  --gradient: linear-gradient(to bottom right, crimson, coral);
}

div {
  height: 200px;
  width: 200px;
  background-image: var(--gradient);
  border-radius: 1rem;
  position: relative;
}

div::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--gradient);
  border-radius: inherit;
  filter: blur(25px) brightness(1.5);
  transform: translateY(15%) scale(0.95);
  z-index: -1;
}
Enter fullscreen mode Exit fullscreen mode

box with gradient shadow

21. Change Caption Side

Use the caption-side property to place the table caption (table title) on a specified side of the table.

Changing the tables caption side from top to bottom

22. Creating Text Columns

Craft nice column layouts for text elements using column properties.



/* 🏛️ divide the content of the "p" element into 3 columns  */

p{
  column-count: 3;
  column-gap: 4.45rem;          
  column-rule: 2px dotted crimson;
}
Enter fullscreen mode Exit fullscreen mode

css tips and tricks poem

I hope you enjoyed reading this article. Please checkout the GitHub repository css tips tricks to learn more professional css tips, tricks and don't forget to give the repository a star⭐ This will help other peoples find this repository.

You can show your support by following me on my GitHub account. Thanks and Happy coding ❤️

Top comments (22)

Collapse
 
varshithvhegde profile image
Varshith V Hegde •

Thanks, But you missed centering a div 😂😂

Collapse
 
devsyedmohsin profile image
Syed Mohsin Raza • • Edited

Thanks for pointing out! Actually, I've already included five different ways to center a div in my GitHub repository css tips tricks

Collapse
 
varshithvhegde profile image
Varshith V Hegde •

sure

Collapse
 
moibra profile image
Mohamed Ibrahim •

I think that's need a whole article 😅

Collapse
 
varshithvhegde profile image
Varshith V Hegde •

Yeah Probably🙃😂

Collapse
 
artydev profile image
artydev • • Edited

Great thank you very much

Collapse
 
louiecodes profile image
L O U I S •

Good tips, I've been practicing CSS a little lately, I'll have these in mind 👍

Collapse
 
devsyedmohsin profile image
Syed Mohsin Raza •

Thanks, Louis! Please checkout the GitHub repository css tips tricks and consider giving it a star if you find it useful.

Collapse
 
louiecodes profile image
L O U I S •

Nice, I'll check it out!

Collapse
 
tutrinh profile image
Tu Trinh •

Very useful CSS tips. Thank you for this.

Collapse
 
huylong profile image
huylong •

thank you for share

Collapse
 
captainmor profile image
Moruling James •

Awesome post!

Collapse
 
estriplet profile image
Estriplet •

Thanks for sharing. You make checking out the GitHub CSS tips tricks repository an interesting visit before the day is out.

Collapse
 
jamiebaker profile image
Jamie Baker •

Great read! A few little gems I'd never heard of there

Collapse
 
mobashir10 profile image
Mo Bashir •

great content thanks bro

Collapse
 
goldknow0928 profile image
goldknow0928 • • Edited

Thanks for the useful information!!! Thank you❤

View full discussion (22 comments)

Read next

polipo_gio profile image

Software Engineers Do NOT Want to Be Efficient

Giovanni Proietta -

fedatu profile image

Un T-Rex entre los bits - Historias de un Desarrollador

Fernando -

estifanos_ameha_e94b23bd2 profile image

Express or NestJS? Choosing the Best Framework for Your Backend

Estifanos Ameha -

gladiatorsbattle profile image

Building a 3D AR Profile Card with Real-Time Face Detection

Gladiators Battle -