Advantages and Drawbacks of Inline Styles in CSS

CSS, or Cascading Style Sheets, are what is used in modern website design to apply the visual look to a page. While HTML creates the structure of the page and Javascript can handle behaviors, the look and feel of a website is the domain of CSS. When it comes to these styles, they are most often applied using external style sheets, but you can also apply CSS styles to a single, specific element by using what are known as “inline styles.”

Inline styles are CSS styles that are applied directly in the page’s HTML. There are both advantages and disadvantages to this approach. First, let’s look at exactly how these styles are written.

How to Write an Inline Style

To create an inline CSS style, you begin by writing your style property similar to how you would in a style sheet, but it needs to be all one line. Separate multiple properties with a semicolon just as you would in a style sheet.

background:#ccc; color:#fff; border: solid black 1px;

Place that line of styles inside the style attribute of the element you want to be styled. For example, if you wanted to apply this style to a paragraph in your HTML, that element would look like this:

<p style="background:#ccc; color:#000; border: solid black 1px;">

In this example, this particular paragraph would appear with a light grey background (that is what #ccc would render), black text (from the #000 color), and with a 1-pixel solid black border around all four sides of the paragraph.

Advantages of Inline Styles

Thanks to the cascade of Cascading Style Sheet inline styles have the highest precedence or specificity in a document. This means they are going to be applied no matter what else is dictated in your external stylesheet (with the one exception being any styles that are given the !important declaration that sheet, but this is not something that should be done in production sites if it can be avoided). The only styles that have higher precedence than inline styles are user styles applied by the readers themselves. If you are having trouble getting your changes to apply, you can try setting an inline style on the element. If you styles still do not display using an inline style, you know there’s something else going on.

Inline styles are easy and quick to add and you do not need to worry about writing the proper CSS selector since you are adding the styles directly to the element you want to change (that element essentially replaces the selector you would write in an external style sheet). You don’t need to create a whole new document (as with external style sheets) or edit a new element in the head of your document (as with internal style sheets). You just add the style attribute that is valid on nearly every HTML element. These are all reasons why you may be tempted to use inline styles, but you must also be aware of some very significant disadvantages to this approach.

Disadvantages of Inline Styles

Because inline styles they are the most specific in the cascade, they can over-ride things you didn’t intend them to. They also negate one of the most powerful aspects of CSS – the ability to style lots and lots of web pages from one central CSS file to make future updates and style changes much easier to manage.

If you had to only use inline styles, your documents would quickly become bloated and very hard to maintain. This is because inline styles must be applied to every element you want them on. So if you want all your paragraphs to have the font family“Arial”, you have to add an inline style to each <p> tag in your document. This adds both maintenance work for the designer and download time for the reader since you would need to change this across every page in your site to change that font-family. Alternatively, if you use a separate stylesheet, you may be able to change it in one spot and have every page receive that update. Truthfully, this is a step backward in web design – back the days of the <font> tag!

Another drawback to inline styles is that it’s impossible to style pseudo-elements and -classes with them. For example, with external style sheets, you can style the visited, hover, active, and link color of an anchor tag, but with an inline style, all you can style is the link itself, because that’s what the style attribute is attached to.

Ultimately, we recommend not using inline styles for your web pages because they cause problems and make the pages a lot more work to maintain. The only time we use them is when we want to check a style quickly during development. Once we’ve got it looking right for that one element, we move it to our external style sheet.