Files
freeCodeCamp/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md
Laurent Labine 8e22962523 fix(curriculum) replace single-line blocks with multi-line blocks for… (#41526)
* fix(curriculum) replace single-line blocks with multi-line blocks for issue 51418

Data visualization and Coding Interview Prep portions.

* Update execute-a-markov-algorithm.md

Implemented as inline code blocks as discussed

* Adding missed blocks

* Last file added
2021-03-25 07:43:13 -07:00

77 lines
1.4 KiB
Markdown

---
id: 587d7fa7367417b2b2512bc6
title: Add Inline Styling to Elements
challengeType: 6
forumTopicId: 301475
dashedName: add-inline-styling-to-elements
---
# --description--
D3 lets you add inline CSS styles on dynamic elements with the `style()` method.
The `style()` method takes a comma-separated key-value pair as an argument. Here's an example to set the selection's text color to blue:
```js
selection.style("color","blue");
```
# --instructions--
Add the `style()` method to the code in the editor to make all the displayed text have a `font-family` of `verdana`.
# --hints--
Your `h2` elements should have a `font-family` of `verdana`.
```js
assert($('h2').css('font-family') == 'verdana');
```
Your code should use the `style()` method.
```js
assert(code.match(/\.style/g));
```
# --seed--
## --seed-contents--
```html
<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"))
// Add your code below this line
// Add your code above this line
</script>
</body>
```
# --solutions--
```html
<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>
```