CSS :root

The CSS :root pseudo-class represents the root element of the document. In HTML, it is equivalent to the <html> element. It is commonly used for defining global custom properties (variables) that can be reused throughout your styles.

The syntax for the :root pseudo-class is:

</>
Copy
:root {
    property: value;
}

Where:

ParameterDescription
propertyThe CSS property to define globally.
valueThe value assigned to the CSS property.

Examples

1. Defining and Using CSS Variables

In this example, global custom properties are defined in :root and applied to different elements in the document.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        :root {
            --main-bg-color: lightblue;
            --main-text-color: darkblue;
        }

        body {
            background-color: var(--main-bg-color);
            color: var(--main-text-color);
        }

        h1 {
            color: var(--main-text-color);
        }
    </style>
</head>
<body>
    <h1>Using CSS Variables</h1>
    <p>The background and text colors are defined in :root.</p>
</body>
</html>

2. Defining Theme Colors

Here, theme colors are defined globally using :root, making it easy to switch themes by modifying values.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        :root {
            --primary-color: #3498db;
            --secondary-color: #2ecc71;
        }

        button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px 20px;
        }

        button.secondary {
            background-color: var(--secondary-color);
        }
    </style>
</head>
<body>
    <button>Primary Button</button>
    <button class="secondary">Secondary Button</button>
</body>
</html>

3. Defining Font Sizes Globally

In this example, font sizes are defined globally in :root and used in different elements.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        :root {
            --font-size-large: 24px;
            --font-size-medium: 18px;
            --font-size-small: 14px;
        }

        h1 {
            font-size: var(--font-size-large);
        }

        p {
            font-size: var(--font-size-medium);
        }

        small {
            font-size: var(--font-size-small);
        }
    </style>
</head>
<body>
    <h1>Large Heading</h1>
    <p>Medium paragraph text.</p>
    <small>Small text size.</small>
</body>
</html>

4. Using :root for Spacing Variables

Spacing variables are defined globally in :root, ensuring consistent padding and margins across the site.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        :root {
            --spacing-small: 8px;
            --spacing-medium: 16px;
            --spacing-large: 24px;
        }

        div {
            margin-bottom: var(--spacing-large);
            padding: var(--spacing-medium);
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <div>Box 1</div>
    <div>Box 2</div>
</body>
</html>

5. Creating a Light/Dark Mode Toggle

This example demonstrates how to define light and dark mode styles using :root and toggling classes on the <html> element.

index.html

</>
Copy
<!DOCTYPE html>
<html lang="en" class="light-mode">
<head>
    <meta charset="utf-8">
    <style>
        :root {
            --bg-color: white;
            --text-color: black;
        }

        html.dark-mode {
            --bg-color: black;
            --text-color: white;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
        }

        button {
            margin: 20px;
            padding: 10px;
        }
    </style>
    <script>
        function toggleMode() {
            document.documentElement.classList.toggle('dark-mode');
        }
    </script>
</head>
<body>
    <button onclick="toggleMode()">Toggle Light/Dark Mode</button>
    <p>The background and text colors change based on the mode.</p>
</body>
</html>