Apply multiple inline CSS styles to an HTML element

# Table of Contents

# Apply multiple inline CSS styles to an HTML element

To apply multiple inline CSS styles to an HTML element:

Set the style attribute on the element.
Specify multiple CSS property-value pairs by separating each pair with a semicolon.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div
      style="
        margin-top: 100px;
        margin-left: 100px;
        background-color: lightgreen;
        padding: 10px 20px;
      "
    >
      bobbyhadz.com
    </div>
  </body>
</html>

apply multiple styles to html element

The code for this article is available on GitHub

The code sample applies multiple styles to the div element.

We set the style attribute on the div element to a string.

The style attribute contains CSS styling declarations to be applied to the element.

The attribute enables you to apply inline styles to the specific element.

index.html

Copied!
<div
  style="
    margin-top: 100px;
    margin-left: 100px;
    background-color: lightgreen;
    padding: 10px 20px;
  "
>
  bobbyhadz.com
</div>

Each CSS property and value are separated by a colon :.

The CSS property-value pairs are separated by a semicolon ;.

You can use a multiline string to make your inline style more readable.

However, you could also set multiple styles on a single line.

index.html

Copied!
<div
  style="margin-top: 100px; margin-left: 100px;"
>
  bobbyhadz.com
</div>

The syntax for applying multiple CSS styles to an element uses the following format.

index.html

Copied!
<div
  style="propertyA: valueA; propertyB: valueB; propertyC: valueC;"
>
  bobbyhadz.com
</div>

However, it should be noted that as this section of the MDN docs states:

It is recommended for styles to be defined in separate file(s).

# Using the `style` tag to apply multiple properties to an element

You can also use the style tag to apply multiple properties to an element.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <style>
      .box {
        margin-top: 100px;
        margin-left: 100px;
        background-color: lightgreen;
        padding: 10px 20px;
      }
    </style>
  </head>

  <body>
    <div class="box">bobbyhadz.com</div>
  </body>
</html>

apply multiple styles with-style tag

The code for this article is available on GitHub

The style tag can be placed in the head tag of your HTML page.

Notice that I set a box class on the div and used the class as a selector when applying the styles.

This approach is a bit more readable than styling the element inline, especially if you have to apply more than a few styles.

# Applying multiple styles to an element by using an external .css file

You can also use an external .css file to apply multiple styles to an element.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

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

  <body>
    <div class="box">bobbyhadz.com</div>
  </body>
</html>

And here is the related style.css file.

style.css

Copied!
.box {
  margin-top: 100px;
  margin-left: 100px;
  background-color: lightgreen;
  padding: 10px 20px;
}

The code for this article is available on GitHub

The code sample produces the same output.

apply multiple styles with external css file

Notice that we used a link tag in the head of the HTML file to load the style.css file.

index.html

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

Your style.css file should contain selectors and blocks of CSS properties and values that are used to style the corresponding element(s).

style.css

Copied!
.box {
  margin-top: 100px;
  margin-left: 100px;
  background-color: lightgreen;
  padding: 10px 20px;
}

This approach is recommended by MDN when it comes to applying multiple styles to an element because it splits your HTML markup and your styles into two files.

Using the inline style attribute is just fine when you only have to apply a few CSS properties or you have to overwrite a global CSS style.

However, if you need to apply more than a few styles, it is much better to use an external CSS file.

This enables you to reuse the styles of the box class in multiple HTML files.

For example, you can load the style.css file in index.html and about.html and apply the box class to elements on both pages.

If you make a change to the box class, it would get applied to index.html and about.html as both HTML pages load your central style.css file.

Conversely, if you only use the inline style attribute, you would have to update all your .html pages separately.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Apply multiple inline CSS styles to an HTML element

# Table of Contents