10 lesser known CSS tricks
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
Using viewport units (vw, vh, vmin, vmax) can make font sizes responsive to the viewport size.
h1{
font-size: 5vw;
}
06. :empty for empty elements
This selector targets empty <p> elements and hides them.
p:empty{
display: none;
}
07. Custom properties (variables)
You can define and use custom properties for easier
theming and maintenance.
:root{
--main-color: #3498db;
}
h1{
color: var(--main-color);
}
08. Object-fit property for image control
object-fit controls how the content of replaced elements (like <img>) should be resized.
img{
width: 100px;
height: 100px;
object-fit: cover;
}
09. Grid for simplified layouts
CSS Grid provides a powerful way to create layouts in a more straightforward manner.
.container{
display: grid;
grid-tempalte-columns: 1fr 2fr 1fr;
}
10. :focus-within pseudo class
The :focus-within selects an element if that element contains any children that have :focus.
form:focus-within{
box-shadow: 0 0 5px rgba(0, 0, 0, 0, 0.2);
}