22 Useful CSS Tips and Tricks Every Developer Should Know
Tags: css, webdev, beginners, html
Published: 2023-02-26 21:18:57

**🚨🚨 Note:** All the tips, tricks shared in this article are part of GitHub repository [css tips tricks](https://github.com/devsyedmohsin/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.

```css
.parent{
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}
```

![layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojs8nvly2ugashxwqif8.png)

## 2. The Custom Cursors

Checkout the github repository [css tips tricks](https://github.com/devsyedmohsin/css-tips-tricks) to learn more about it.

```css
html{
  cursor:url('no.png'), auto;
}
```

![image with custom cursor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ba8kist57vp6l9spw8w2.gif)


## 3. Fill Text With Images

```css
h1{
  background-image: url('images/flower.jpg');
  background-clip: text;
  color: transparent;
  background-color: white;
}
```

![Air max](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0a7my28raxr80upv77k1.png)

**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.

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

h1 {
  -webkit-text-stroke: 5px crimson;
  text-stroke: 5px crimson;
}
```

![NETLIFY](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9xcwsh18vxqw1uaj5h3.png)


## 5. Paused Pseudo Class

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

```css
/* 📢 currently, only supported in Safari */

video:paused {
  opacity: 0.6;
}
```

![plam tree on river](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dq1za9uri1a37kqyh1y1.gif)

## 6. Emphasing Text

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

```css
h1 {
  text-emphasis: "⏰";
}
```

![Time is a healer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l1oifo8erkkblsk7ilt.png)

## 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.

```css
 h1::first-letter{
  font-size: 2rem;
  color:#ff8A00;
}
```

![Gitpod.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1jtvgnx1y1xqf0sd9b7.png)

## 8. Fallback values for Variables

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

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

h1 {
  color: var(--black, crimson);
}
```

![crimson colored text "Speak, You Matter"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2477mnixnrwtwn5mqun.png)


## 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.

```html
<h1>Cakes & Bakes</h1>
```

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

h1 {
  writing-mode: sideways-lr;
}
```

![text starting from](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ozqs02sh7edl70cd609a.png)

## 10. Rainbow Animation

Creates a continuously looping color animation for elements to grab user attention. Give a read to [css tips tricks](https://github.com/devsyedmohsin/css-tips-tricks#rainbow-animation) repository to learn when to use `prefer-reduced-motion` media feature

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

@keyframes rainbow-animation {
  to{
    filter: hue-rotate(0deg);
  }
 from{
    filter: hue-rotate(360deg);
  }
}
```

![shop now button changing its color contineously](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60jgrr09vgsckx9h2irl.gif)


## 11. Master Web Development

Subscribe to our [YouTube channel](https://www.youtube.com/@nisarhassan12) to take your web-development skills to the next level. One of the [recent video series](https://www.youtube.com/watch?v=1nchVfpMGSg&list=PLwJBGAxcH7GzdavgKlCACbESzr-40lw3L) goes over creating the following open source [portfolio template](https://github.com/nisarhassan12/portfolio-template). 


![Imon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxid827qfq1ybx2tl3q7.gif)


## 12. Zooming on Hover

```css
/* 📷 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);
 }
```

![crimson colored shopping bag laying on grey tiles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxy8ymu937e0kf14wwbc.gif)


## 13. Attribute Selector

Select HTML elements based on attributes using the attribute selector.

```html
<a href="">HTML</a>
<a>CSS</a>
<a href="">JavaScript</a>
```
```css
/* 🔗 targets all a elements that have a href attribute */

a[href] {
  color: crimson;
}
```
![HTML CSS JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1sq2rhs58a01ayfqzexk.png)

## 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.

```css
div {
  height: 150px;
  width: 150px;
  background-color: crimson;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
```

![triangle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9eqxif34ndhq33xvlpb.png)


## 15. Detect Properties Support

Use CSS `@support rule` to detect support for CSS features directly in your CSS. Checkout the [css tips tricks](https://github.com/devsyedmohsin/css-tips-tricks#check-if-property-is-supported) repository to learn more about feature queries.

```css

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

}
```

![Never break your promise.(Hazrat Ali A.S)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ekr2fmhl4ori47xqgyf.png)



## 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. 

```html
<header class="header">
  <p class="text">Lorem ipsum, dolor</p>
</header>
```

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

.header{

  background-color: salmon;
  
  .text{
    font-size: 18px;
  }

}
```

## 17. The Clamp Function

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

```css
/* Syntax: clamp(minimum, preferred, maximum) */
h1{
  font-size: clamp(2.25rem,6vw,4rem);
}
```

![gif font size changing based on screen size](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upaf9jdlfapezzmufyaa.gif)


## 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.

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

*:optional{
  background-color: green;
}
```

## 19. Word Spacing Property

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

```css
p {
  word-spacing: 1.245rem;
}
```

## 20. Create Gradient Shadows

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

```css
: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;
}
```

![box with gradient shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7korhhx7zaj350nfzmyb.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7t44rugi8gx3ksndq560.gif)


## 22. Creating Text Columns

Craft nice column layouts for text elements using column properties.

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

p{
  column-count: 3;
  column-gap: 4.45rem;          
  column-rule: 2px dotted crimson;
}
```

![css tips and tricks poem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1ryft9s27y56el3ljx4.png)

I hope you enjoyed reading this article. Please checkout the GitHub repository [css tips tricks](https://github.com/devsyedmohsin/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](https://github.com/devsyedmohsin). Thanks and Happy coding ❤️