How to Set Style to an HTML element using JavaScript

  • 4 min read
  • December 2, 2021
linkedin twitter facebook reddit
linkedin twitter facebook reddit

An HTML element’s style is determined by the CSS applied to the element.

Cascading Style Sheets (CSS) are used to design the layout of a webpage.

You can set an element’s style either in the HTML document itself, by adding an external CSS file, or by using JavaScript.

Setting style with CSS

There are three ways CSS can be applied to an HTML document:

  1. Inline – by using the style attribute inside the HTML elements to be styled
  2. Internal – by using a <style> element in the document’s <head>
  3. External – by using a <link> element which links to an external CSS file

All three are explored below.

Set inline style

To set the inline style, simply set the style attribute on the HTML element as follows:


<h2 class="h2colored" style="color:blue">
    I'm blue

In the example above, the <h2> element’s text will appear blue on the user’s screen.

Note: Inline CSS is the most specific, and thus has precedence over the other two approaches. Inline CSS overrides most other CSS declarations.

Set internal style

To set an internal style that applies to elements in the entire HTML document, you can add a <style> element to the document’s <head> element, as follows:


        .example {
            color: blue;

    <h1 class="example">
        I'm blue

In the example above, every HTML element that has the class “example” will appear blue on the user’s screen.

Note: It is possible to use elements like <h1> under the <style> tag as well.

Set external style

You can also set the document’s CSS by linking to an external stylesheet. To do so, include a link to the CSS file in the document’s <head> element, as follows:


    <link rel="stylesheet" href="/style/style.css">

The href attribute should contain the name and location of the CSS file you wish to add to the document. This CSS file contains information on the styles to be applied to your document – below is an example:


.exmaple {
    color: blue;


Setting style with JavaScript

There are a few ways to set an HTML element’s style with JavaScript.

The most direct method is by using the style property, as follows:


// Enlarge font size of an element


function largeFonts() {
    const el = document.querySelector('p'); = '2rem';


    Difficult to read?

The above code applies a style that makes the <p> element’s text appear larger on the user’s screen.


Below is the syntax for manipulating the style property on an HTML element using JavaScript: = value

Element: An HTML element

CSSproperty: a valid CSS property (e.g. color).

Note: While using the style property, CSS properties are written in camelCase and not with the more standard snake-case.

value: the value must be a string that contains information that matches the expected CSS property requirements.

Note: You can only use the style property on single elements. The document.querySelector() method returns the first element that matches the selector (e.g. p). The return value from this function will always be a single element or, if no matching element is found, null.

Note: Using the style property in this way adds inline styling to the element.

There are two other ways to set style using JavaScript. The first is to use the setAttribute() method. The second is by adding a class using the add() method of the classList property. The class you add can then be handled using external CSS styling.


Related Articles

JavaScript – How to Use setAttribute

JavaScript – How to Set an HTML Element’s Class

JavaScript – How to Get an Input’s Value

Related Posts

How to Get an Object’s Keys and Values in JavaScript

How to Get an Object’s Keys and Values in JavaScript

In JavaScript, getting the keys and values that comprise an object is very easy. You can retrieve each object’s keys, values, or both combined into an

How to Use the Assignment Operator in JavaScript

How to Use the Assignment Operator in JavaScript

The Assignment operator is used to assign a value to a variable. Assignment (=) The assignment operator simply assigns the value of the right operand to

How to Use the for…in Statement in JavaScript

How to Use the for…in Statement in JavaScript

The for…in statement is used to loop through an object’s properties. Basic for…in loop example The following code demonstrates a basic example using the for…in statement