making variables in css code example
Example 1: css set variable
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
Example 2: css variables
:root {
--primary-bg: #8a2be2;
--btn-font-size: 18px;
--btn-padding: 10px 15px;
}
.btn-primary {
background-color: var(--primary);
font-size: var(--btn-font-size);
padding: var(--btn-padding);
color: #E2E2E2;
}
Example 3: css variables
:root {
--blue: #1e90ff;
--white: #ffffff;
}
body { background-color: var(--blue); }
h2 { border-bottom: 2px solid var(--blue); }
.container {
color: var(--blue);
background-color: var(--white);
padding: 15px;
}
button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}