D3 Building Blocks #2: Using D3 to Style Elements
Tags: d3, javascript, css, codenewbie
Published: 2020-11-30 15:29:52

# Using D3 to Style Elements
Now that we can select, add and remove elements from the DOM using D3, we can use additional methods to style those elements. We'll learn how to use the style() and attr() methods in this post.

## style()

The `style()` method allows us to apply inline styling to a selection (or selections) we have made using the `select` or `selectAll` methods. This method takes two arguments: We first need to identify the name of the CSS property that we would like to add or change, and then specify the value of the change we are trying to make.

**`style()` Syntax Examples**
```javascript
d3.select("p")
  .style("color", "red")

// OR //

let p = d3.select("p")

p.style("color", "green")
// Selects the <p> tag, and sets the text color to red
```

In the first example above, we are stringing the style method onto the selection method. Alternatively, we can save the selection to a variable, and call the style method on that variable, like the second example.

With either approach, we can add multiple styles to the same selection, as shown below.

```javascript
d3.selectAll("h1")
  .style("color", "blue")
  .style("font-family", "Times New Roman")
  .style("font-size", "30px")
  .style("text-align", "center")
// Selects all of the <h1> elements, and sets the font to red, Times New Roman, 30px, and centers the text.
```

Beyond styling text, we can use the `style()` method to add styling to other elements such as shapes, lines, and areas. For example:

```javascript
d3.select("span")
  .style("background-color", "yellow")
// selects the <span> element and applies a background color of yellow

d3.selectAll("circle")
  .style("fill", "purple")
//selects all of the circles and applies a purple fill
```

## attr()

Similar to the previous method, the `attr()` method allows us to apply inline styling to specific attributes. As we start working with data in future posts, we'll be using this method to apply attributes to elements based on the values in our data. For now, we'll get comfortable with the syntax by using `attr()` to set basic attributes such as class names and id names.

Just as with `style()`, the `attr()` method takes in two arguments: the name of the attribute we are trying to set, and the value of that attribute.

**`attr()` Syntax Examples**

```javascript
d3.selectAll("div")
  .attr("class", "card")
// Selects all of the <div> tags, and gives them each a class of "card"

d3.select("div")
  .attr("id", "root")
// Selects a div, and assigns it the "root" id attribute
```

As we will explore in future posts, there are many more attributes we can set using the `attr()` method once we start working with shapes and data, such as height, width, x and y coordinate locations, and radius size. In addition, we will learn how to use callback functions as our second argument in order to dynamically set attributes based on data values, which eventually allows to build complex visualizations using these D3 fundamental methods.

We are just scratching the surface with these methods! Use the resources below for a refresher on CSS fundamentals and styles that can be applied using D3: 

MDN Web Docs: 
- [Fundamental text and font styling](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals)

D3 Documentation: 
- [Modifying Elements `attr()` and `style()`](https://github.com/d3/d3-selection/blob/v2.0.0/README.md#modifying-elements)