CloseTag | الشروحات | CSS | المتغيرات في لغة CSS | CSS Variables

<!DOCTYPE html>
<html>
<head>
<style>
:root {
  --base: #e84393;
  --white: #ffffff;
}

body
{
  background-color: var(--base);
  color:var(--white);
}

h1 
{
  border-bottom: 2px solid var(--base);
}

.container {
  --template: #0984e3;
  color: var(--template);
  background-color: var(--white);
  padding: 15px;
  margin-top:10px;
}
	
button {
  background-color: var(--base);
  color: var(--white);
  border: 1px solid var(--base);
  padding: 5px;
}
</style>
</head>
<body>

<h1>Before CSS variables</h1>

<div class="container">
  <h2>Title Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <button>More</button>
</div>

<div class="container">
  <h2>Title Lorem Ipsum</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.</p>
  <button>More</button>
</div>

</body>
</html>