DEV Community

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

Posted on • Updated on

CSS tips and tricks.

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 πŸ“•βœ¨

Top comments (19)

Collapse
 
artydev profile image
artydev

Great :-)

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
 
vulcanwm profile image
Medea

Amazing!

Collapse
 
vlajd profile image
Vlajd

For scrolling I always used some jQuery code, didn't know it's that easy...

Collapse
 
silviuvladut profile image
Silviu Vladut

Wow !!

Thanks for sharing!

Collapse
 
svgatorapp profile image
SVGator

Way to share some knowledge! Awesome πŸ™Œ

Collapse
 
cristowi profile image
Christian Consuelo

Wow! Just so much info!

Collapse
 
fitrifityanto profile image
Fitrifit Yanto

amazing πŸ‘πŸ‘
thanks for sharing

Collapse
 
elijahtrillionz profile image
Elijah Trillionz

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

Collapse
 
josephmungai profile image
Cronos254

Awesome!!