# How to add multiple CSS styles using JavaScript By Atta Ur Rehman Shah (https://attacomsian.com/about). Published Mar 3, 2020, updated Oct 15, 2022. Topics: JavaScript. Canonical URL: https://attacomsian.com/blog/javascript-add-multiple-css-styles > A quick guide to learn how to add multiple CSS styles to an element using vanilla JavaScript. In a previous article, we looked at different ways to [set CSS styles](https://attacomsian.com/blog/javascript-set-css-styles) to an element using vanilla JavaScript. In this article, you'll learn about another thing: adding multiple CSS styles at once to an element with JavaScript. ## Adding Multiple Inline Styles The DOM [style](https://attacomsian.com/blog/javascript-dom-style-property) property is the simplest way to set and get CSS styles from an HTML element in JavaScript. Usually, when you want to add multiple CSS properties to an element, you have to set them *individually* as shown below: ```javascript const btn = document.querySelector('.btn') // set inline CSS styles btn.style.width = '150px' btn.style.height = '40px' btn.style.color = 'blue' ``` However, this approach is **not** very flexible. If you decide to make any modifications in the future, you need to update the code at more than one location. One way to solve this issue is by using the `cssText` attribute provided by the `style` property, as shown below: ```javascript btn.style.cssText = 'width: 150px; height: 40px; color: blue' ``` The above example code should work perfectly. The only drawback, however, is that it overwrites all other inline styles applied to the element. Another way to apply multiple CSS styles right away is by using the `Object.assign()` function: ```javascript const btn = document.querySelector('.btn') // create styles object const styles = { width: '150px', height: '40px', color: 'white', backgroundColor: 'black' } // apply styles to the button Object.assign(btn.style, styles) ``` The above code is more readable and maintainable. Also `Object.assign()` doesn't overwrite all existing inline styles. Instead, it will only update those properties that match the keys in the `styles` object. ## Adding Multiple Global Styles I already discussed [three](https://attacomsian.com/blog/javascript-set-css-styles#global-styles) different methods to add multiple global styles in the previous article; `