Selected Reading
Q&A

CSS Box Model

The CSS Box Model
In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: content, padding, borders and margins. The image below illustrates the box model:

Using :root can be advantageous when declaring global variables in CSS.

Syntax

:root {
  // css declarations or property
  --main-color: blue;
  --secondary-color: white;
}

Example

Here is the example that shows usage of :root −

<html>
<head>
<style>
     /* Define global variables */
    :root {
      --main-color: blue;
      --secondary-color: white;
    }
    body {
      background-color: var(--main-color);
    }
    h1 {
      color: var(--secondary-color);
    }
</style>
</head>
<body>
  <h1>Welcome to CSS Root Example</h1>
  <p>This is an example of using CSS root to define and use custom CSS variables.</p>
</body>
</html>

Example

Here is another example that demonstrates the usage of the :root selector for styling different elements −

<html>
<head>
<title>:root Example</title>
<style>
   :root {
      --primary-color: #007bff;
      --secondary-color: #6c757d;
      --background-color: #fcfc90;
   }

   body {
      background-color: var(--background-color);
      color: var(--secondary-color);
      font-family: Arial, sans-serif;
   }
   h1 {
      color: var(--primary-color);
   }
   p {
      margin-bottom: 1rem;
   }

   .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
      background-color: LightYellow;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }
   .button {
      display: inline-block;
      padding: 0.5rem 1rem;
      background-color: var(--primary-color);
      color: white;
      text-decoration: none;
      border-radius: 4px;
      }
</style>
</head>
<body>
   <div class="container">
      <h1>:root Example</h1>
      <p>This is an example of using the <code>:root</code> selector to define global CSS variables.</p>
      <p>The primary color is set to <span style="color: var(--primary-color);">var(--primary-color)</span>.</p>
      <p>The secondary color is set to <span style="color: var(--secondary-color);">var(--secondary-color)</span>.</p>
      <p>The background color is set to <span style="background-color: var(--background-color); color: red;">var(--background-color)</span>.</p>
      <a href="#" class="button">Demo</a>
   </div>
</body>
</html>

Kickstart Your Career

Get certified by completing the course

Get Started