2018-10-12 15:37:13 -04:00
|
|
|
---
|
|
|
|
title: Create a custom CSS Variable
|
|
|
|
---
|
2019-07-24 00:59:27 -07:00
|
|
|
# Create a custom CSS Variable
|
2018-10-12 15:37:13 -04:00
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
---
|
|
|
|
## Problem Explanation
|
2018-10-17 15:17:39 +04:00
|
|
|
We need to create a variable name ```--penguin-skin``` and give it a value of ```gray``` in the ```penguin``` class.
|
2018-10-12 15:37:13 -04:00
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
**Example:**
|
2018-10-12 15:37:13 -04:00
|
|
|
|
2018-10-17 15:17:39 +04:00
|
|
|
```css
|
|
|
|
--variable-name: value;
|
|
|
|
```
|
|
|
|
|
2019-07-24 00:59:27 -07:00
|
|
|
|
|
|
|
---
|
|
|
|
## Solutions
|
|
|
|
|
|
|
|
<details><summary>Solution 1 (Click to Show/Hide)</summary>
|
2018-10-17 15:17:39 +04:00
|
|
|
|
|
|
|
In the ```penguin``` class we create a variable name ```--penguin-skin``` and give it a value of ```gray```:
|
|
|
|
|
|
|
|
```css
|
|
|
|
--penguin-skin: gray;
|
|
|
|
```
|
2019-07-24 00:59:27 -07:00
|
|
|
</details>
|