How to use Inline CSS: Beginner’s Web Development Tutorial

When it comes to changing how your website looks, inline CSS can be a real lifesaver when used properly.

In this tutorial, we’re going to quickly show you how you can use inline CSS to quickly apply your styles from your main webpage. We’ll also help you understand when to use inline CSS – since it isn’t the best choice in many situations.

If you’re ready to add a new tool to your web development kit, let’s jump in!

Table of contents

A Quick Overview of HTML & CSS

While HTML provides the essential structure and content of your website, CSS (Cascading Style Sheets) provides the look and feel. Without CSS, modern websites would not function as they do. When developing a website, there are three ways to apply CSS styling: inline, internal, and external. The focus of this tutorial is to show you, by example, how to apply Inline CSS directly to individual HTML elements. Not only that, but we’ll help you understand appropriate use cases between the three – so you can use inline CSS with newfound confidence, skills, and in ways that work for your personal responsive website!

Applying CSS Styles: An Overview

Inline CSS styles are applied by assigning a string directly to an HTML element’s style attribute. It allows you to style an individual HTML element directly within your HTML document without any impact to other elements on your web page.

Since Inline CSS is applied directly to an HTML element, there is no requirement to first define CSS selectors like Internal and External style sheets (by which we mean there’s no separate CSS file).

Let’s illustrate the differences by applying a single style to a header <h1> HTML tag on a super simple website. Here is our website with no CSS.

<!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body>
    <h1>My Super Simple Website</h1>
  </body>
</html>

Inline CSS: HTML Style Attribute

Notice the style attribute on the <h1> header element. We define the style by assigning the attribute a string containing normal CSS properties. Multiple CSS rules can be applied but it’s important that each rule end with a semi-colon.

<head>
</head>
<body>
  <h1 style="text-align:center;">My Super Simple Website</h1>
</body>

Our header is now centered on the page.

Internal CSS: HTML <Style> Element

Internal CSS is applied inside HTML <Style> Elements placed in the <head> section of the HTML website file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      h1 {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h1>My Super Simple Website</h1>
  </body>
</html>

Notice that our web page looks the same. The key difference, other than the <style> element in the <head> section is that we are required to first select the HTML element (h1) and enclose the CSS rule to center the text inside curly braces.

External CSS: Link to Stylesheet

External CSS is coded inside a separate file with a specific file extension (.css). The CSS stylesheet is referenced from the <head> section of the HTML website file using HTML <link> element with a href attribute set to a string containing a relative path/filename of the stylesheet. Two other attributes are used: rel set to the string “stylesheet” and type set to the string “text/css”.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <h1>My Super Simple Website</h1>
  </body>
</html>

h1 {
  text-align: center;
}

Notice that our web page looks the same. The other important thing to notice is that the CSS rules inside the external stylesheet are coded in the exact same syntax as the internal stylesheet.

Inline CSS: Beginners Guide

When to Use Inline CSS

Use Inline CSS primarily for testing new styling of specific HTML elements that would otherwise be difficult to isolate by modifying existing CSS stylesheets which could have unwanted or unpredictable consequences to other HTML elements across your website.

While too much Inline CSS may impact performance, there may be certain use-cases where initial page load of “critical CSS” can be cautiously considered as a candidate for limited use of Inline CSS.

When to Avoid Inline CSS

Avoid using Inline CSS when you have more than a few CSS rules to apply to a specific HTML element because it can get very messy, very quickly and become difficult to read and maintain.

Importantly, avoid using Inline CSS as your main source of styling. Using Inline CSS on too many HTML elements will not only become very messy, difficult to read, and impossible to maintain but will lead to significant repetition of styling, huge refactoring headaches as well as negate the many benefits of applying consistent styling across your website enabled by CSS stylesheets.

It’s also worth noting that CSS has advanced significantly in recent years with the addition of CSS Grid and CSS Flexbox which provide significant power but also involve setting more properties than would be feasible to put within a simple string assigned to an HTML element’s style property. So in other words, you can’t avoid a separate CSS file forever to add CSS to your page.

Order of Precedence

CSS is an acronym for Cascading Style Sheets and the order of precedence is very important in CSS regardless of which technique you use. Generally, order matters – the last style rule applied for any given element wins. Since Internal CSS can apply to an entire web page while External CSS can apply to an entire website across many pages it is not always obvious what CSS rule will apply to a specific HTML element. The very nature of cascading styles is simultaneously the power and curse of CSS. Over time various techniques have been developed to help better predict and control the application of styles but it remains a topic that requires thoughtful consideration and a consistent approach.

While Inline CSS is generally not considered a good practice for an entire website or even a web page, the one thing you can count on is whatever Inline CSS style you set on an HTML element will override style properties set in both Internal and External Stylesheets.

How to Use Inline CSS

Let’s consider once again the simple example of styling a header HTML tag. Let’s assume we are trying out new styles for the main header of our website and want absolute control over three styles for this header: its font-style must be italic, its color must be blue and the header text must be centered on the page. We are aware that CSS rules affecting the style of this header are already set within the web page’s Internal Stylesheet and the linked External Stylesheet and within the website HTML file the reference to Internal styles comes after the link to External styles. Furthermore, we don’t want to touch either the Internal or External CSS as our focus is simply testing new styles for this one HTML element and we don’t want to affect anything else on our website.

This scenario satisfies the advice provided above of when to use Inline Styles and when to avoid Inline Styles so let’s get started.

The External Stylesheet contains the following rules regarding <h1> header tags.

h1 {
  font-style: none;
  color: red;
  text-align: left;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" type="text/css" />
  </head>
  <body>
    <h1>My Super Simple Website</h1>
  </body>
</html>

At this point our web page header looks like this:

Since we want our new design to have font-style of italic, a color of blue and text aligned to the center on the page none of our criteria is met by our External Stylesheet.

Next, let’s consider the <h1> header styles in our Internal Stylesheet. Notice that the External styles remain so we can better understand the Order of Precedence described previously.

h1 {
  font-style: none;
  color: red;
  text-align: left;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <style>
      h1 {
        font-style: none;
        color: green;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <h1>My Super Simple Website</h1>
  </body>
</html>

Notice that with the inclusion of our Internal Stylesheet after the reference to the External Stylesheet has altered our design completely but still does not resemble the style we want.

Keeping both the Internal and External Stylesheets as is, let’s now add Inline CSS to the <h1> header tag providing the exact design styles we want to this HTML element. Again, those styles are: font-style of italic, a color of blue and text aligned to the center on the page.

h1 {
  font-style: none;
  color: red;
  text-align: left;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <style>
      h1 {
        font-style: none;
        color: green;
        text-align: right;
      }
    </style>
  </head>
  <body>
    <h1 style="font-style: italic; color: blue; text-align: center">
	My Super Simple Website
    </h1>
  </body>
</html>

Notice that we have applied our Inline CSS to the <h1> header by setting its style attribute to a string containing three CSS rules separated by semi-colons.

Learning Resources

Learn more about including CSS in a web page (Inline, Internal and External) from CSS expert Kevin Powell in these two video lessons Introduction to CSS and External CSS.

Continue your CSS learning with this free HTML & CSS 101 – Web Development Fundamentals course or take your skills to the next level in just over an hour with this free COMPLETE COURSE – Learn HTML and CSS in 80 MINUTES. You might also consider trying this HTML Tutorial for Beginners from Programming with Mosh or decide to master the foundations of all web development with this premium Full-Stack Web Development Mini-Degree.

Conclusion

By applying proper syntax for Inline CSS to our website’s <h1> header HTML tag (including applying multiple styles), we were able to test a new design for our website’s <h1> header tag. We also considered the proper use of Inline CSS and the Order of Precedence in relation to Internal and External CSS Stylesheets, so we were able to target a single HTML element without impacting the CSS styling of any other HTML elements on our website.

While there are plenty of cases to not use Inline CSS, it is still a useful tool that can help you out of tough situations as you build your websites. Nevertheless, we do encourage you to learn other CSS skills including how to make an external CSS file, what each CSS property does, how to create a unique style, and so forth. After all, it’s better to use a separate CSS file if the alternative is a messy block of code.

We hope you take these newfound skills to the next level, and master the art of CSS so you can get your sites to look exactly how you’d like them too!

BUILD GAMES