10 lesser known CSS tricks

Creative Byte
2 min readDec 21, 2023

Did you sometimes wonder, if there are more CSS things that you not know yet? Join me on a quick tour through 10 lesser-known CSS tricks that are about to become your secret weapons for leveling up your web design skills. Get ready to learn some new CSS tricks.

01. Smooth scrolling on your website

Add scroll-behavior: smooth to the <html> element to enable smooth scrolling for the whole page.

html{
scroll-behavior: smooth;
}

02. attribute selector for links

This selector targets links with href attributes starting with „https.“

a[href^="https"]{
color: blue;
}

03. ~ for combining siblings

Selects all <p> elements that are siblings following an <h2>.

h2 ~ p{
color: blue;
}

04. the :not() pseudo class

This selector applies styles to list items that do not have the class „special.“

li:not(.special){
font-stlye: italic;
}

05. Viewport units for responsive typography

--

--

Creative Byte

Here to share my journey, knowledge and thoughts about web design and development. 👩🏼‍💻