CSS Custom Properties

by Naresh

HTML

<script src="https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap"></script>
<div class="badges">
<div class="badge badge-primary">Primary</div>
<div class="badge badge-secondary">Secondary</div>
<div class="badge badge-info">Info</div>
<div class="badge badge-success">Success</div>
<div class="badge badge-warning">Warning</div>
<div class="badge badge-danger">Danger</div>
</div>

CSS

/* We can declare a custom property with "--" prefix */
/* We can use custom properties by passing it's name as a parameter to var() function  */

:root {
  --primary-color: #1e40af;
  --secondary-color: #db2777;
  --success-color: #059669;
  --info-color: #6366f1;
  --warning-color: #D97706;
  --danger-color: #dc2626;
}

body {
  font-family: 'Roboto', sans-serif;
  margin: 2rem;
}

.badges {
  display: grid;
  gap: 1rem;
  grid-column: 6;
}

.badge {
  padding: 0.5rem 2rem;
  text-align: center;
  border-radius: 50px;
}

.badge-primary {
  color: var(--primary-color);
  background-color: #DBEAFE;
}

.badge-secondary {
  color: var(--secondary-color);
  background-color: #FCE7F3;
}

.badge-info {
  color: var(--info-color);
  background-color: #EDE9FE;
}

.badge-success {
  color: var(--success-color);
  background-color: #D1FAE5;
}

.badge-warning {
  color: var(--warning-color);
  background-color: #FEF3C7;
}

.badge-danger {
  color: var(--danger-color);
  background-color: #FEE2E2;
}