DEV Community

Cover image for CSS tips and tricks.
Syed Mohsin Raza
Syed Mohsin Raza

Posted on • Updated on

CSS tips and tricks.

#css #webdev #beginners #codenewbie

As we are done with HTML and JavaScript tricks now its time to cover CSS Tips and Tricks 💖✨

The print media queries

You can style the printable version of your sites using print media queries.

@media print {

  * {
    background-color: transparent;
    color: #000 ;
    box-shadow: none;
    text-shadow: none;
  }

}
Enter fullscreen mode Exit fullscreen mode

The gradient text 

h1{
  background-image: linear-gradient(to right, #C6FFDD, #FBD786, #f7797d);
  background-clip: text;
  color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

Text with two colors using css gradient

Improve media defaults

When writing css reset add these properties to improve media defaults.

img, picture, video, svg {
  max-width: 100%;
  object-fit: contain;  /* preserve a nice aspect-ratio */
}
Enter fullscreen mode Exit fullscreen mode

Centering with positioning

In case you don't know grid or flex this is the way to center a div vertically and horizontally.

div{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
Enter fullscreen mode Exit fullscreen mode

The comma separated list

This is the code required to craft a comma separated list.

li:not(:last-child)::after{
  content: ',';
}
Enter fullscreen mode Exit fullscreen mode

A comma seprated list with three items

The smooth scrolling

You are just one line away from smooth scrolling.

 html {
  scroll-behavior: smooth;
}
Enter fullscreen mode Exit fullscreen mode

website scrolling smoothly

The hyphens

Set hyphens property on your text content to make it hyphenated when text wraps across multiple lines.

A paragraph with hyphens for text that wraps across multiple lines

The first letter

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

 h1::first-letter{
   color:#ff8A00;
}
Enter fullscreen mode Exit fullscreen mode

first letter of text styled diffrently

The accent color

Instead of using builtin default colors customize your form controls colors using accent color this has builtin color contrast accessibility features.

checboxe with diffrent colors

The Image filled text 

h1{
  background-image: url('illustration.webp');
  background-clip: text;
  color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

text filled with illustration

The placeholder pseudo-element

Use placeholder pseudo-element to style placeholders.

::placeholder{
  font-size:1.5em;
  letter-spacing:2px;
  color:green;
  text-shadow:1px 1px 1px black;
}
Enter fullscreen mode Exit fullscreen mode

The colors animation

Change elements colors with hue-rotate filter.


button{
  animation: colors 1s linear infinite;
}

@keyframes colors {
  0%{
    filter: hue-rotate(0deg);
  }
  100%{
    filter: hue-rotate(360deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

Button with text shop now changing colors

Centering with margin 

.parent{
  display: flex;  /* display: grid; also works */
}

.child{
  margin: auto;
}
Enter fullscreen mode Exit fullscreen mode

The clamp function

Use clamp function for responsive and fluid typography.

h1{
  font-size: clamp(5.25rem,8vw,8rem);
}
Enter fullscreen mode Exit fullscreen mode

font size changing based on scree size

The selection pseudo element

Set styles on content selection.

::selection{
  color:coral;
}
Enter fullscreen mode Exit fullscreen mode

text color changing on selection

The decimal leading zero

Set list style type to decimal leading zero to append leading zero to your ordered list items.

li{
  list-style-type:decimal-leading-zero;
}
Enter fullscreen mode Exit fullscreen mode

ordered list items with appended leading zero before starting number

Centering with flex 

.parent{
  display: flex;
  justify-content: center;
  align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

The caret color

You can customize your text input cursor color using caret color property.

input{
  caret-color:coral;
}
Enter fullscreen mode Exit fullscreen mode

input field with text cursor blinking in custom color defined

The resize property

Set resize property to none to avoid the resizing of textarea

textarea{
  resize:none;
}
Enter fullscreen mode Exit fullscreen mode

The only child

Only child pseudo-class selects an element if it is only child of its parent.

li:only-child{
  color:lightgrey;
}
Enter fullscreen mode Exit fullscreen mode

ordered list with only one list item

The text indent

Text indent property allows us to indent the first line of text we can also use negative values.

p{
  text-indent:5.275rem;
}
Enter fullscreen mode Exit fullscreen mode

A paragraph with first line indented to right

The list style type

You can set a emoji as a list style type.

li{
  list-style-type:'🟧';
}
Enter fullscreen mode Exit fullscreen mode

emoji as a list style type with three list item an orange box emoji

Hope you enjoyed reading this article! if you have something to say or have any questions feel 💯 free to comment below.

Happy Coding 📕✨

Latest comments (19)

Collapse
 
gikdev profile image
Mohammad Mahdi Bahrami •

Way to go man! Amazing.
Just 1 question: can I translate your article in Persian for my compatriots in Iran? I would really appreciate your agreement.
Tnx!

Collapse
 
viyash profile image
viyashdoss •

XD

Collapse
 
artydev profile image
artydev •

Great :-)

Collapse
 
diogosoaress profile image
DiogoSoaress •

Dudeeeee such great content!!! 🤩

Collapse
 
andresbecker profile image
Andres Becker •

Nice work

Collapse
 
m4g33k profile image
M4G33k •

This is the type of content that really makes me want to make my work better, and what a great way to present all the points, short and clear, love it!

Collapse
 
amivian profile image
Vivian Akpoke •

super great

Collapse
 
cristowi profile image
Christian Consuelo •

Wow! Just so much info!

Collapse
 
sadeedpv profile image
Sadeedpv🥇 •

This is lit 🙌 Let me save this one for the future.

Collapse
 
fitrifityanto profile image
Fitrifit Yanto •

amazing 👏👏
thanks for sharing

Collapse
 
josephmungai profile image
Cronos254 •

Awesome!!

Collapse
 
svgatorapp profile image
SVGator •

Way to share some knowledge! Awesome 🙌

Collapse
 
louiseann93 profile image
Lou Willoughby •

I love this! Thank you 🙂

Collapse
 
kevincp17 profile image
kevincp17 •

Nice stuff👍

Collapse
 
elijahtrillionz profile image
Elijah Trillionz •

Wow.
My cart is filled with useful tips. Thanks to you.

View full discussion (20 comments)

Read next

wiliamvj profile image

Using migrations with Golang

Wiliam V. Joaquim -

rounit08 profile image

Web Performance Optimization Techniques

Rounit Ranjan Sinha -

mayankvishwakarmadev profile image

Simplifying React Router Query Parameter Management with Custom Hooks

Mayank vishwakarma -

alecbsherman profile image

Wizard's Toolkit Demo

Alec -