What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

[TIPS] Make use of variables


New member
Variables, best defined as CSS variables, reduce the same value across the website on different occasions. You can use it in cases opposite to using the !important keyword.

For example, we use !important when only a couple of properties need to be changed. At the same time, we use variables when only a couple properties are the same (font-size or color) and others differ according to their section. This is not a hard and fast rule but a good way to remember. So consider yourself applying 20px everywhere across the website for different sections as a font-size.

A change in this value can increase the maintenance and debugging cost and waste a lot of time. So instead, we can just declare a variable with a value of 20px and use that variable everywhere. Then, next time any changes occur, we can change the variable value, and all our changes will be reciprocated throughout the page.

The following HTML code implements the same use case as discussed above,

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <title>Position Absolute</title>
:root {
      --my_font: 20px;
      .class1 {
        font-size: var(--my_font);
      .class2 {
        font-size: var(--my_font);
    <h2> I am Heading #1 </h2>
    <h2 class = "class1"> I am Heading #2 </h2>
    <h2 class = "class2"> I am Heading #3 </h2>


CSS variables are an extremely efficient method to make your code more maintainable.