<commit_before>---
id: 5a9d726c424fe3d0e10cad11
title: Create a custom CSS Variable
challengeType: 0
videoUrl: 'https://scrimba.com/c/cQd27Hr'
forumTopicId: 301086
---

## Description
<section id='description'>
To create a CSS variable, you just need to give it a name with two dashes in front of it and assign it a value like this:

```css
--penguin-skin: gray;
```

This will create a variable named <code>--penguin-skin</code> and assign it the value of <code>gray</code>.
Now you can use that variable elsewhere in your CSS to change the value of other elements to gray.
</section>
<commit_msg>replace the word "dashes" with "hyphens" (#37705)<commit_after>---
id: 5a9d726c424fe3d0e10cad11
title: Create a custom CSS Variable
challengeType: 0
videoUrl: 'https://scrimba.com/c/cQd27Hr'
forumTopicId: 301086
---

## Description
<section id='description'>
To create a CSS variable, you just need to give it a name with two hyphens in front of it and assign it a value like this:

```css
--penguin-skin: gray;
```

This will create a variable named <code>--penguin-skin</code> and assign it the value of <code>gray</code>.
Now you can use that variable elsewhere in your CSS to change the value of other elements to gray.
</section>

{'fraction_non_alphanumeric': 0.1030008110300081, 'fraction_numerical': 0.0413625304136253, 'mean_word_length': 4.436123348017621, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4269786', 'n_tokens_mistral': 439, 'n_tokens_neox': 393, 'n_words': 170}