The 3 Style Slots

You can put Style Declarations in any of 3 slots. In a Style Attribute, in a Style Tag, and in a Style Sheet. The question is, which should you use?

Style Attribute

Here, each Style Declaration goes into the element's Style Attribute. Scoped to that element. As such, they're called inline styles.

The core con is, not all styles can go into Style Attributes. For example, you can't use Pseudo Styles or Query Styles in a Style Attribute.

If not for those limitations, Style Attributes would've been enough for element-specific styles.

Style Tag

Here, each Style Declaration goes into its Style Rule. And each Style Rule goes into a Style Tag. Scoped to that webpage. As such, they're called embedded styles.

Unlike Style Attributes, there're no limitations to the styles you can put in a Style Tag.

Style Tags are perfect for page-specific styles.

Style Sheet

Here, each Style Declaration goes into its Style Rule. And each Style Rule goes into a separate file called a Style Sheet. As such, they're called external styles.

Like the Style Tag, there're no limitations to the styles you can put in a Style Sheet.

Unlike the Style Attribute and the Style Tag, there's a need for a network request to download a Style Sheet.

In short:

  1. Use a Style Tag for components used within a webpage.

  2. Use a Style Sheet for components used across webpages.

  3. Don't use a Style Attribute as it's not enough by itself.

That said, Style Attribute has a proposed benefit of element-specific styles. While Style Tag and Style Sheet has a challenge of naming rules. To combat those, use a Style Methodology.