2018-10-12 15:37:13 -04:00
---
title: Add Inline Styling to Elements
---
2019-07-24 00:59:27 -07:00
# Add Inline Styling to Elements
2018-10-12 15:37:13 -04:00
2019-07-24 00:59:27 -07:00
---
## Problem Explanation
2019-03-21 10:56:11 -05:00
This challenge introduces the D3 `style` method, which takes 2 arguments: (key, value).
#### Relevant Links
* [style ](https://github.com/d3/d3-selection/blob/master/README.md#selection_style )
2019-07-24 00:59:27 -07:00
---
## Hints
2019-03-21 10:56:11 -05:00
2019-07-24 00:59:27 -07:00
### Hint 1
2019-03-21 10:56:11 -05:00
2019-07-24 00:59:27 -07:00
* Make sure both of your arguments are in quotations, single or double quotes will work
2019-03-21 10:56:11 -05:00
2019-07-24 00:59:27 -07:00
### Hint 2
2019-03-21 10:56:11 -05:00
2019-07-24 00:59:27 -07:00
* In the example, `selection.style` refers to an arbitrary selected element, chain your `style` method to the existing method chain
2019-03-21 10:56:11 -05:00
2019-07-24 00:59:27 -07:00
< details > < summary > Solution 1 (Click to Show/Hide)< / summary >
2019-03-21 10:56:11 -05:00
```javascript
< body >
< script >
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
.text((d) => (d + " USD"))
.style('font-family', 'verdana')
< / script >
< / body >
```
2019-07-24 00:59:27 -07:00
#### Code Explanation
2019-03-21 10:56:11 -05:00
* the `style` method takes 2 arguments, the first is the key and the second the value
* key in the `style` method is the property name that you would use in a CSS declaration
* value is used just as a value would be used in a CSS declaration
* Since we are in JavaScript and `style` is a method we are calling, quotes must be used for the arguments. Otherwise, the function would try to use the value of the **variables** `font-family` and `verdana` , which do not exist and would each throw a ReferenceError
#### Relevant Links
* [style ](https://github.com/d3/d3-selection/blob/master/README.md#selection_style )
* [ReferenceError ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined )
2019-07-24 00:59:27 -07:00
< / details >
2019-03-21 10:56:11 -05:00
