7 Important CSS Tips and Tricks That You Can Use For Every Website

Do you want to know CSS Tips and Tricks that help you with every website or web application? This post covers relevant and important tips like centering, sticky elements, and more!

• 01 CSS Tip: CSS Variables
• 02 CSS Tip: Center Block Element Horizontally
• 03 CSS Tip: Center Child Elements
• 04 CSS Tip: Blend Image With Color
• 05 CSS Tip: Apply a Filter to an Image
• 06 CSS Tip: Generate a Tooltip for every Element
• 07 CSS Tip: Sticky Elements on Scroll

Let’s start with a short description of every tip, followed by a short example!

01 CSS Tip: CSS Variables

CSS Variables are really helpful in creating websites because you can store a value that you plan to use multiple times. The benefit of using a variable instead of the value multiple times is that you can change the variable’s value, and it changes in all appearances of the variable.

A really good example of this is a highlight color on a website. Imagine that you use the color in 4 different places and then decide to change the highlight color from red to orange. Without the variable, you first have to find the four places and then change the value in all of them. With the variable, you only have to change it once!

In the following code, you can see that we have to create the variables inside of the root selector like this:

:root {
    --gray-bg: #EEEEEE;
}

And then we can use it in any place like this:

.container {
    background-color: var(--gray-bg);
}

Here we created a simple variable for the color gray and used it inside the container class!

02 CSS Tip: Center Block Element Horizontally

There is one question you always ask yourself when beginning with CSS, and that is:

If this guide is helpful to you and you like what I do, please support me with a coffee!

How do I center this *** element?!

As soon as you know the answer, it is not that hard. To understand it, we will first look at the solution to horizontally center an element and then how to center a child element horizontally and vertically. For the horizontal centering, there is one magic property: margin: auto;

With this simple property, you can center any block element horizontally, as long as margin-left and margin-right are set to auto:

<style>
    .center {
        margin: auto;
    }
</style>



<div class="container">
    <div class="center blue-box"></div>
</div>

03 CSS Tip: Center Child Elements

Flexbox, on the other hand, solved this problem in a much easier way! It is super easy to center an element horizontally and vertically. To do it, you have to set the parent to display: flex; and then define if it’s a row or a column (default: column) and then the child’s behavior. To center it vertically with the inside of a column, you have to set the following properties:

<style>
    .center-flex-v {
        display: flex;
        align-items: center;
    }
</style>



<div class="container center-flex-v">
    <div class="blue-box"></div>
</div>

To center it horizontally, you have to apply these properties:

<style>
    .center-flex-h {
        display: flex;
        justify-content: center;
    }
</style>



<div class="container center-flex-h">
    <div class="blue-box"></div>
</div>

Lastly, to center it vertically and horizontally, you have to apply both properties:

<style>
    .center-flex {
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>



<div class="container center-flex">
    <div class="blue-box"></div>
</div>

04 CSS Tip: Blend Image With Color

The next CSS tips and tricks cover different methods for image manipulation that come in handy if you want to level up the style of your page! How about blending your image with another color? This will give the image a really cool effect, as you can see here in the before and after:

The complete transformation of this image was basically possible with only two lines of code:

.blend {
    background-image: url(path/to/image);

    /* generate blending */
    background-color: #15161a;
    background-blend-mode: overlay;
}

05 CSS Tip: Apply a Filter to an Image

Next up is the image manipulation with different filters. One of the best known is the blur filter, which, as the name suggests, blurs the image:

And this magic trick is possible with only one line of code:

.after-blur {
    filter: blur(5px);
}

But there are more filters! So, here is a list of all the filters that you can apply to your image:

• blur(radius)
• brightness(amount)
• contrast(amount)
• drop-shadow(shadow)
• grayscale(amount)
• hue-rotate(angle)
• invert(amount)
• opacity(amount)
• saturate(amount)
• sepia(amount)

You can find more details on the filters here.

06 CSS Tip: Generate a Tooltip for every Element

With the next tip, you can give your users hints for every element on your page. You can define the HTML title attribute, and from there, you get a tooltip like this:

<div title="Tooltip">Hover over me for a tooltip!</h2>

07 CSS Tip: Sticky Elements on Scroll

Lastly, we have the sticky attribute. This one is really helpful to create a sticky navigation bar or something similar. In fact, if you want to learn how to build a sticky navbar, check out this post!

To create a sticky element, you have to add the property sticky to a selector, and as soon as you scroll over it, it will be attached to the top of your screen.

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
}

Conclusion of CSS Tips and Tricks

In this post, you learned seven CSS Tips and Tricks that you can apply on every website and in every web application! We covered the topics:

• Using Variables
• Center Elements
• Manipulating Images
• Creating Tooltips
• Applying Sticky Elements

I hope this post was helpful and you learned something new! If you have any feedback, more tips, or questions, write a comment! In case you are interested in HTML, CSS, and Javascript, consider subscribing to my Newsletter and receive a free copy of “Master HTML, CSS and JavaScript”!

[convertkit form=2634876]