askvity

What is an Inline Style Sheet?

Published in CSS Fundamentals 4 mins read

An inline style sheet, often referred to simply as an inline style, is a method of applying CSS rules directly to a specific HTML element using the style attribute.

Inline styles are styles that are applied to a specific element within the body section of the webpage. This means the styling information is written right inside the HTML tag for the element you want to style.

Unlike internal styles (which apply to an entire page from the <head> section) or external style sheets (which apply styles across multiple linked pages), the style defined inline will be applied to that individual element only. It does not affect any other element on the page, even if they are of the same type.

How Inline Styles Work

You apply an inline style by adding the style attribute to the opening tag of an HTML element. The value of the style attribute is one or more CSS property-value pairs, separated by semicolons.

Example:

<!DOCTYPE html>
<html>
<head>
<title>Inline Style Example</title>
</head>
<body>

  <h2 style="color: blue; text-align: center;">This Heading Has an Inline Style</h2>

  <p>This paragraph has no inline style.</p>

  <p style="font-size: 16px; margin-left: 20px;">This paragraph has a different inline style.</p>

</body>
</html>

In this example, the <h2> element's text color is set to blue and centered, and the second <p> element's font size and margin are set directly within their respective tags.

Comparison: Inline vs. Other CSS Methods

Inline styles are one of three main ways to add CSS to an HTML document. Understanding the difference is key to good web development practices.

Feature Inline Styles Internal (Embedded) Styles External Style Sheets
Location Within the style attribute of an HTML element in the <body> Within <style> tags in the <head> section of an HTML page In a separate .css file, linked to the HTML page(s)
Scope Applies to that individual element only. Applies to the entire page where defined. Applies to all linked pages.
Syntax <element style="property: value;"> <style> selector { property: value; }</style> selector { property: value; } (in a .css file)
Maintenance Difficult to manage for multiple elements. Manageable for a single page. Easy to manage for large websites.
Precedence Highest specificity; overrides internal and external styles for that specific element. Overridden by inline styles, overrides external styles. Lowest specificity; can be overridden by internal and inline styles.

Practical Considerations and Limitations

While easy to apply for quick, element-specific tweaks, inline styles are generally discouraged for most web development projects for several reasons:

  • Poor Separation of Concerns: Mixing HTML (structure) and CSS (presentation) makes code harder to read, write, and maintain.
  • Maintenance Difficulty: If you need to change the style of multiple elements, you have to edit each style attribute individually, which is time-consuming and error-prone.
  • Lack of Reusability: Styles cannot be easily reused across different elements or pages.
  • Increased File Size: Repeating style information within numerous HTML tags can increase the overall file size.
  • Specificity Issues: Due to their high specificity, inline styles are difficult to override with external or internal style sheets, which can complicate CSS management.

Best Practice: For most styling, use external style sheets (.css files) linked to your HTML documents. Use internal styles for page-specific rules, and reserve inline styles for rare cases where a very specific style needs to be applied only to one element and override other styles (e.g., dynamically generated content or quick testing).

Related Articles