gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Responsive Web Design: Added hint to Change a Variable for a Specific… (#19601)

Browse Source 
* Responsive Web Design: Added hint to Change a Variable for a Specific Area

Added hint to Change a Variable for a Specific Area (https://guide.freecodecamp.org/certifications/responsive-web-design/basic-css/change-a-variable-for-a-specific-area)

* Added correct solution
This commit is contained in:
Gregory Gubarev
2018-10-24 03:41:31 +04:00
committed by Tom
parent 84afac12d7
commit 93e53a66b4
1 changed files with 38 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
guide/english/certifications/responsive-web-design/basic-css/change-a-variable-for-a-specific-area/index.md
View File

@ -3,8 +3,42 @@ title: Change a variable for a specific area
--- ---
## Change a variable for a specific area ## Change a variable for a specific area
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/basic-css/change-a-variable-for-a-specific-area/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds --> <!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
Cascading CSS variables officially called custom properties are entities which behave similarly to traditional variables. In that variables allow for data to be stored and updated to reflect new values later.
When maintaining complex CSS documents, it is not only beneficial to use CSS Variables but also smart. When making future updates instead of searching potential hundreds of lines of code, one only needs to update the necessary CSS variable.
### Syntax
Declaring the variable:
```css
--custom-name: value
```
Using the variable:
```css
var(--custom-name)
```
### Solution
We need to reassign the ```--penguin-belly``` variable to ```white``` in the ```penguin``` class:
```css
.penguin {
/* add code below */
--penguin-belly: white;
/* add code above */
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
}
```
### Sources
1. [Visit MDN's Cascading CSS Variables page for more information.](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)
2. [Perna, Maria Antonietta. "A Practical Guide to CSS Variables (Custom Properties)" *sitepoint*. August 01, 2018. Accessed: October 5, 2018](https://www.sitepoint.com/practical-guide-css-variables-custom-properties/)