diff --git a/javascript/packages/linter/docs/rules/README.md b/javascript/packages/linter/docs/rules/README.md
index a506bccaf..e00d1a14b 100644
--- a/javascript/packages/linter/docs/rules/README.md
+++ b/javascript/packages/linter/docs/rules/README.md
@@ -24,8 +24,8 @@ This page contains documentation for all Herb Linter rules.
 
 - [`erb-comment-syntax`](./erb-comment-syntax.md) - Disallow Ruby comments immediately after ERB tags
 - [`erb-no-case-node-children`](./erb-no-case-node-children.md) - Don't use `children` for `case/when` and `case/in` nodes
-- [`erb-no-debug-output`](./erb-no-debug-output.md) - Disallow debug output methods (`p`, `pp`, `puts`, `print`, `debug`) in ERB templates
 - [`erb-no-conditional-html-element`](./erb-no-conditional-html-element.md) - Disallow conditional HTML elements
+- [`erb-no-debug-output`](./erb-no-debug-output.md) - Disallow debug output methods (`p`, `pp`, `puts`, `print`, `debug`) in ERB templates
 - [`erb-no-duplicate-branch-elements`](./erb-no-duplicate-branch-elements.md) - Disallow duplicate elements across conditional branches
 - [`erb-no-empty-control-flow`](./erb-no-empty-control-flow.md) - Disallow empty ERB control flow blocks
 - [`erb-no-empty-tags`](./erb-no-empty-tags.md) - Disallow empty ERB tags
@@ -100,11 +100,13 @@ This page contains documentation for all Herb Linter rules.
 - [`html-no-nested-links`](./html-no-nested-links.md) - Prevents nested anchor tags
 - [`html-no-positive-tab-index`](./html-no-positive-tab-index.md) - Avoid positive `tabindex` values
 - [`html-no-self-closing`](./html-no-self-closing.md) - Disallow self closing tags
-- [`html-no-unescaped-entities`](./html-no-unescaped-entities.md) - Disallow unescaped HTML entities
-- [`html-no-unknown-tag`](./html-no-unknown-tag.md) - Disallow unknown HTML tags
 - [`html-no-space-in-tag`](./html-no-space-in-tag.md) - Disallow spaces in HTML tags
+- [`html-no-style-attributes`](./html-no-style-attributes.md) - Disallow inline `style` attributes
+- [`html-no-style-elements`](./html-no-style-elements.md) - Disallow inline `<style>` tags
 - [`html-no-title-attribute`](./html-no-title-attribute.md) - Avoid using the `title` attribute
 - [`html-no-underscores-in-attribute-names`](./html-no-underscores-in-attribute-names.md) - Disallow underscores in HTML attribute names
+- [`html-no-unescaped-entities`](./html-no-unescaped-entities.md) - Disallow unescaped HTML entities
+- [`html-no-unknown-tag`](./html-no-unknown-tag.md) - Disallow unknown HTML tags
 - [`html-require-script-nonce`](./html-require-script-nonce.md) - Require `nonce` attribute on script tags and helpers
 - [`html-tag-name-lowercase`](./html-tag-name-lowercase.md) - Enforces lowercase tag names in HTML
 
diff --git a/javascript/packages/linter/docs/rules/html-no-style-attributes.md b/javascript/packages/linter/docs/rules/html-no-style-attributes.md
new file mode 100644
index 000000000..8cb59eec2
--- /dev/null
+++ b/javascript/packages/linter/docs/rules/html-no-style-attributes.md
@@ -0,0 +1,38 @@
+# Linter Rule: Disallow inline `style` attributes
+
+**Rule:** `html-no-style-attributes`
+
+## Description
+
+Disallow the use of inline `style` attributes on HTML elements. All styling should be applied via external stylesheets or class-based styling.
+
+## Rationale
+
+Inline `style` attributes make templates harder to maintain, promote duplication, and prevent adoption of strict CSP policies (`style-src 'self'`). Using CSS classes and external stylesheets improves maintainability and security.
+
+## Examples
+
+### ✅ Good
+
+```erb
+<button class="btn btn-primary">Submit</button>
+```
+
+```erb
+<div data-controller="hello" data-action="click->hello#greet">Content</div>
+```
+
+### 🚫 Bad
+
+```erb
+<button style="color: red;">Submit</button>
+```
+
+```erb
+<div style="<%= custom_styles %>">Content</div>
+```
+
+## References
+
+- Inspired by [@pushcx](https://bsky.app/profile/push.cx/post/3lsfddauapk2o)
+- [MDN: Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
diff --git a/javascript/packages/linter/docs/rules/html-no-style-elements.md b/javascript/packages/linter/docs/rules/html-no-style-elements.md
new file mode 100644
index 000000000..4faffb6a9
--- /dev/null
+++ b/javascript/packages/linter/docs/rules/html-no-style-elements.md
@@ -0,0 +1,53 @@
+# Linter Rule: Disallow inline `<style>` tags
+
+**Rule:** `html-no-style-elements`
+
+## Description
+
+Disallow the use of inline `<style>` tags in HTML templates. All styling should be applied via external stylesheets.
+
+## Rationale
+
+Inline `<style>` tags make templates harder to maintain, promote duplication, and prevent adoption of strict CSP policies (`style-src 'self'`). Centralizing styles via external stylesheets improves maintainability and security.
+
+This rule enforces:
+
+- No `<style>` tags embedded directly in templates.
+- No `style` tags generated via `content_tag` or `tag` helpers.
+
+## Examples
+
+### ✅ Good
+
+```erb
+<head>
+  <%= stylesheet_link_tag "application" %>
+</head>
+```
+
+### 🚫 Bad
+
+```erb
+<head>
+  <style>
+    .danger { color: red; }
+  </style>
+</head>
+```
+
+```erb
+<%= content_tag :style do %>
+  .danger { color: red; }
+<% end %>
+```
+
+```erb
+<%= tag.style do %>
+  .danger { color: red; }
+<% end %>
+```
+
+## References
+
+- Inspired by [@pushcx](https://bsky.app/profile/push.cx/post/3lsfddauapk2o)
+- [MDN: Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP)
diff --git a/javascript/packages/linter/src/rules.ts b/javascript/packages/linter/src/rules.ts
index 7a4f935b3..6e36f3e23 100644
--- a/javascript/packages/linter/src/rules.ts
+++ b/javascript/packages/linter/src/rules.ts
@@ -13,9 +13,9 @@ import { ActionViewStrictLocalsPartialOnlyRule } from "./rules/actionview-strict
 
 import { ERBCommentSyntax } from "./rules/erb-comment-syntax.js";
 import { ERBNoCaseNodeChildrenRule } from "./rules/erb-no-case-node-children.js"
-import { ERBNoDebugOutputRule } from "./rules/erb-no-debug-output.js"
 import { ERBNoConditionalHTMLElementRule } from "./rules/erb-no-conditional-html-element.js"
 import { ERBNoConditionalOpenTagRule } from "./rules/erb-no-conditional-open-tag.js"
+import { ERBNoDebugOutputRule } from "./rules/erb-no-debug-output.js"
 import { ERBNoDuplicateBranchElementsRule } from "./rules/erb-no-duplicate-branch-elements.js"
 import { ERBNoEmptyControlFlowRule } from "./rules/erb-no-empty-control-flow.js"
 import { ERBNoEmptyTagsRule } from "./rules/erb-no-empty-tags.js"
@@ -85,11 +85,13 @@ import { HTMLNoEmptyHeadingsRule } from "./rules/html-no-empty-headings.js"
 import { HTMLNoNestedLinksRule } from "./rules/html-no-nested-links.js"
 import { HTMLNoPositiveTabIndexRule } from "./rules/html-no-positive-tab-index.js"
 import { HTMLNoSelfClosingRule } from "./rules/html-no-self-closing.js"
-import { HTMLNoUnescapedEntitiesRule } from "./rules/html-no-unescaped-entities.js"
-import { HTMLNoUnknownTagRule } from "./rules/html-no-unknown-tag.js"
 import { HTMLNoSpaceInTagRule } from "./rules/html-no-space-in-tag.js"
+import { HTMLNoStyleAttributesRule } from "./rules/html-no-style-attributes.js"
+import { HTMLNoStyleElementsRule } from "./rules/html-no-style-elements.js"
 import { HTMLNoTitleAttributeRule } from "./rules/html-no-title-attribute.js"
 import { HTMLNoUnderscoresInAttributeNamesRule } from "./rules/html-no-underscores-in-attribute-names.js"
+import { HTMLNoUnescapedEntitiesRule } from "./rules/html-no-unescaped-entities.js"
+import { HTMLNoUnknownTagRule } from "./rules/html-no-unknown-tag.js"
 import { HTMLRequireClosingTagsRule } from "./rules/html-require-closing-tags.js"
 import { HTMLRequireScriptNonceRule } from "./rules/html-require-script-nonce.js"
 import { HTMLTagNameLowercaseRule } from "./rules/html-tag-name-lowercase.js"
@@ -116,11 +118,11 @@ export const rules: RuleClass[] = [
 
   ERBCommentSyntax,
   ERBNoCaseNodeChildrenRule,
-  ERBNoDebugOutputRule,
-  ERBNoEmptyControlFlowRule,
   ERBNoConditionalHTMLElementRule,
   ERBNoConditionalOpenTagRule,
+  ERBNoDebugOutputRule,
   ERBNoDuplicateBranchElementsRule,
+  ERBNoEmptyControlFlowRule,
   ERBNoEmptyTagsRule,
   ERBNoExtraNewLineRule,
   ERBNoExtraWhitespaceRule,
@@ -133,8 +135,6 @@ export const rules: RuleClass[] = [
   ERBNoOutputInAttributePositionRule,
   ERBNoRawOutputInAttributeValueRule,
   ERBNoSilentStatementRule,
-  ERBNoUnusedExpressionsRule,
-  ERBNoUnusedLiteralsRule,
   ERBNoSilentTagInAttributeNameRule,
   ERBNoStatementInScriptRule,
   ERBNoThenInControlFlowRule,
@@ -142,6 +142,8 @@ export const rules: RuleClass[] = [
   ERBNoUnsafeJSAttributeRule,
   ERBNoUnsafeRawRule,
   ERBNoUnsafeScriptInterpolationRule,
+  ERBNoUnusedExpressionsRule,
+  ERBNoUnusedLiteralsRule,
   ERBPreferDirectOutputRule,
   ERBPreferImageTagHelperRule,
   ERBRequireTrailingNewlineRule,
@@ -188,11 +190,13 @@ export const rules: RuleClass[] = [
   HTMLNoNestedLinksRule,
   HTMLNoPositiveTabIndexRule,
   HTMLNoSelfClosingRule,
-  HTMLNoUnescapedEntitiesRule,
-  HTMLNoUnknownTagRule,
   HTMLNoSpaceInTagRule,
+  HTMLNoStyleAttributesRule,
+  HTMLNoStyleElementsRule,
   HTMLNoTitleAttributeRule,
   HTMLNoUnderscoresInAttributeNamesRule,
+  HTMLNoUnescapedEntitiesRule,
+  HTMLNoUnknownTagRule,
   HTMLRequireClosingTagsRule,
   HTMLRequireScriptNonceRule,
   HTMLTagNameLowercaseRule,
diff --git a/javascript/packages/linter/src/rules/html-no-style-attributes.ts b/javascript/packages/linter/src/rules/html-no-style-attributes.ts
new file mode 100644
index 000000000..cbb4790ba
--- /dev/null
+++ b/javascript/packages/linter/src/rules/html-no-style-attributes.ts
@@ -0,0 +1,47 @@
+import { getAttributeName } from "@herb-tools/core"
+import type { ParseResult, ParserOptions, HTMLAttributeNode } from "@herb-tools/core"
+
+import { BaseRuleVisitor } from "./rule-utils.js"
+import type { UnboundLintOffense, LintContext, FullRuleConfig } from "../types.js"
+import { ParserRule } from "../types.js"
+
+class HTMLNoStyleAttributesVisitor extends BaseRuleVisitor {
+  visitHTMLAttributeNode(node: HTMLAttributeNode): void {
+    const attributeName = getAttributeName(node)
+
+    if (attributeName && attributeName.toLowerCase() === "style") {
+      this.addOffense(
+        "Avoid inline `style` attribute. Use CSS classes or an external stylesheet instead.",
+        node.location,
+      )
+    }
+
+    super.visitHTMLAttributeNode(node)
+  }
+}
+
+export class HTMLNoStyleAttributesRule extends ParserRule {
+  static ruleName = "html-no-style-attributes"
+  static introducedIn = this.version("unreleased")
+
+  get defaultConfig(): FullRuleConfig {
+    return {
+      enabled: false,
+      severity: "warning"
+    }
+  }
+
+  get parserOptions(): Partial<ParserOptions> {
+    return {
+      action_view_helpers: true,
+    }
+  }
+
+  check(result: ParseResult, context?: Partial<LintContext>): UnboundLintOffense[] {
+    const visitor = new HTMLNoStyleAttributesVisitor(this.ruleName, context)
+
+    visitor.visit(result.value)
+
+    return visitor.offenses
+  }
+}
diff --git a/javascript/packages/linter/src/rules/html-no-style-elements.ts b/javascript/packages/linter/src/rules/html-no-style-elements.ts
new file mode 100644
index 000000000..feb17551f
--- /dev/null
+++ b/javascript/packages/linter/src/rules/html-no-style-elements.ts
@@ -0,0 +1,59 @@
+import { getTagLocalName, isERBOpenTagNode } from "@herb-tools/core"
+import type { ParseResult, ParserOptions, HTMLElementNode } from "@herb-tools/core"
+
+import { BaseRuleVisitor } from "./rule-utils.js"
+import type { UnboundLintOffense, LintContext, FullRuleConfig } from "../types.js"
+import { ParserRule } from "../types.js"
+
+const STYLESHEET_LINK_TAG_ELEMENT_SOURCE = "ActionView::Helpers::AssetTagHelper#stylesheet_link_tag"
+
+class HTMLNoStyleElementsVisitor extends BaseRuleVisitor {
+  visitHTMLElementNode(node: HTMLElementNode): void {
+    if (getTagLocalName(node) === "style") {
+      this.checkInlineStyle(node)
+    }
+
+    super.visitHTMLElementNode(node)
+  }
+
+  private checkInlineStyle(node: HTMLElementNode): void {
+    if (this.isStylesheetLinkTagElement(node)) return
+
+    this.addOffense(
+      "Avoid inline `<style>` tags. Use `stylesheet_link_tag` to include external stylesheets instead.",
+      node.open_tag!.location,
+    )
+  }
+
+  private isStylesheetLinkTagElement(node: HTMLElementNode): boolean {
+    if (!isERBOpenTagNode(node.open_tag)) return false
+
+    return node.element_source === STYLESHEET_LINK_TAG_ELEMENT_SOURCE
+  }
+}
+
+export class HTMLNoStyleElementsRule extends ParserRule {
+  static ruleName = "html-no-style-elements"
+  static introducedIn = this.version("unreleased")
+
+  get defaultConfig(): FullRuleConfig {
+    return {
+      enabled: false,
+      severity: "warning"
+    }
+  }
+
+  get parserOptions(): Partial<ParserOptions> {
+    return {
+      action_view_helpers: true,
+    }
+  }
+
+  check(result: ParseResult, context?: Partial<LintContext>): UnboundLintOffense[] {
+    const visitor = new HTMLNoStyleElementsVisitor(this.ruleName, context)
+
+    visitor.visit(result.value)
+
+    return visitor.offenses
+  }
+}
diff --git a/javascript/packages/linter/src/rules/index.ts b/javascript/packages/linter/src/rules/index.ts
index 815093506..0ef31033c 100644
--- a/javascript/packages/linter/src/rules/index.ts
+++ b/javascript/packages/linter/src/rules/index.ts
@@ -18,8 +18,8 @@ export * from "./actionview-strict-locals-partial-only.js"
 
 export * from "./erb-comment-syntax.js"
 export * from "./erb-no-case-node-children.js"
-export * from "./erb-no-debug-output.js"
 export * from "./erb-no-conditional-open-tag.js"
+export * from "./erb-no-debug-output.js"
 export * from "./erb-no-duplicate-branch-elements.js"
 export * from "./erb-no-empty-control-flow.js"
 export * from "./erb-no-empty-tags.js"
@@ -87,11 +87,13 @@ export * from "./html-no-empty-headings.js"
 export * from "./html-no-nested-links.js"
 export * from "./html-no-positive-tab-index.js"
 export * from "./html-no-self-closing.js"
-export * from "./html-no-unescaped-entities.js"
-export * from "./html-no-unknown-tag.js"
 export * from "./html-no-space-in-tag.js"
+export * from "./html-no-style-attributes.js"
+export * from "./html-no-style-elements.js"
 export * from "./html-no-title-attribute.js"
 export * from "./html-no-underscores-in-attribute-names.js"
+export * from "./html-no-unescaped-entities.js"
+export * from "./html-no-unknown-tag.js"
 export * from "./html-require-closing-tags.js"
 export * from "./html-require-script-nonce.js"
 export * from "./html-tag-name-lowercase.js"
diff --git a/javascript/packages/linter/test/__snapshots__/cli.test.ts.snap b/javascript/packages/linter/test/__snapshots__/cli.test.ts.snap
index d98da3b67..77e76419b 100644
--- a/javascript/packages/linter/test/__snapshots__/cli.test.ts.snap
+++ b/javascript/packages/linter/test/__snapshots__/cli.test.ts.snap
@@ -109,7 +109,7 @@ test/fixtures/ignored.html.erb:8:8
   Offenses     5 errors | 2 warnings (7 offenses across 1 file)
   Note         3 additional offenses reported (would have been ignored)
   Fixable      7 offenses | 4 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled
+  Rules        83 enabled | 12 not enabled
 
  TIP: Run herb-lint --init to create a .herb.yml and lock the version.
       This ensures upgrading Herb won't enable new rules until you update the version in .herb.yml."
@@ -170,7 +170,7 @@ test/fixtures/test-file-with-errors.html.erb:2:22
   Checked      1 file
   Offenses     2 errors | 1 warning (3 offenses across 1 file)
   Fixable      3 offenses | 2 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled"
+  Rules        83 enabled | 12 not enabled"
 `;
 
 exports[`CLI Output Formatting > GitHub Actions format includes rule codes 1`] = `
@@ -193,7 +193,7 @@ test/fixtures/no-trailing-newline.html.erb:1:29
   Checked      1 file
   Offenses     1 error | 0 warnings (1 offense across 1 file)
   Fixable      1 offense | 1 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled"
+  Rules        83 enabled | 12 not enabled"
 `;
 
 exports[`CLI Output Formatting > GitHub Actions format includes rule codes 2`] = `
@@ -255,7 +255,7 @@ test/fixtures/erb-no-extra-whitespace-inside-tags.html.erb:1:4
   Checked      1 file
   Offenses     4 errors | 0 warnings (4 offenses across 1 file)
   Fixable      4 offenses | 3 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled
+  Rules        83 enabled | 12 not enabled
 
  TIP: Run herb-lint --init to create a .herb.yml and lock the version.
       This ensures upgrading Herb won't enable new rules until you update the version in .herb.yml."
@@ -297,7 +297,7 @@ test/fixtures/ignored.html.erb:6:14
   Checked      1 file
   Offenses     2 errors | 0 warnings | 3 ignored (2 offenses across 1 file)
   Fixable      2 offenses | 2 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled
+  Rules        83 enabled | 12 not enabled
 
  TIP: Run herb-lint --init to create a .herb.yml and lock the version.
       This ensures upgrading Herb won't enable new rules until you update the version in .herb.yml."
@@ -324,7 +324,7 @@ test/fixtures/parser-errors.html.erb:2:16
   Checked      1 file
   Offenses     1 error | 0 warnings (1 offense across 1 file)
   Fixable      0 offenses
-  Rules        83 enabled | 10 not enabled
+  Rules        83 enabled | 12 not enabled
 
  TIP: Run herb-lint --init to create a .herb.yml and lock the version.
       This ensures upgrading Herb won't enable new rules until you update the version in .herb.yml."
@@ -540,7 +540,7 @@ test/fixtures/multiple-rule-offenses.html.erb:4:2
   Checked      1 file
   Offenses     8 errors | 6 warnings (14 offenses across 1 file)
   Fixable      14 offenses | 4 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled
+  Rules        83 enabled | 12 not enabled
 
  TIP: Run herb-lint --init to create a .herb.yml and lock the version.
       This ensures upgrading Herb won't enable new rules until you update the version in .herb.yml."
@@ -638,7 +638,7 @@ test/fixtures/few-rule-offenses.html.erb:6:0
   Checked      1 file
   Offenses     4 errors | 2 warnings (6 offenses across 1 file)
   Fixable      6 offenses | 3 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled
+  Rules        83 enabled | 12 not enabled
 
  TIP: Run herb-lint --init to create a .herb.yml and lock the version.
       This ensures upgrading Herb won't enable new rules until you update the version in .herb.yml."
@@ -678,7 +678,7 @@ test/fixtures/bad-file.html.erb:1:16
   Checked      1 file
   Offenses     2 errors | 0 warnings (2 offenses across 1 file)
   Fixable      2 offenses | 2 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled"
+  Rules        83 enabled | 12 not enabled"
 `;
 
 exports[`CLI Output Formatting > formats GitHub Actions output correctly for clean file 1`] = `
@@ -689,7 +689,7 @@ exports[`CLI Output Formatting > formats GitHub Actions output correctly for cle
   Checked      1 file
   Offenses     0 offenses
   Fixable      0 offenses
-  Rules        83 enabled | 10 not enabled"
+  Rules        83 enabled | 12 not enabled"
 `;
 
 exports[`CLI Output Formatting > formats GitHub Actions output correctly for file with errors 1`] = `
@@ -747,7 +747,7 @@ test/fixtures/test-file-with-errors.html.erb:2:22
   Checked      1 file
   Offenses     2 errors | 1 warning (3 offenses across 1 file)
   Fixable      3 offenses | 2 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled"
+  Rules        83 enabled | 12 not enabled"
 `;
 
 exports[`CLI Output Formatting > formats GitHub Actions output with --format=github option 1`] = `
@@ -784,7 +784,7 @@ test/fixtures/test-file-simple.html.erb:2:22
   Checked      1 file
   Offenses     2 errors | 0 warnings (2 offenses across 1 file)
   Fixable      2 offenses | 2 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled
+  Rules        83 enabled | 12 not enabled
 
  TIP: Run herb-lint --init to create a .herb.yml and lock the version.
       This ensures upgrading Herb won't enable new rules until you update the version in .herb.yml."
@@ -989,7 +989,7 @@ test/fixtures/test-file-with-errors.html.erb:2:22
   Checked      1 file
   Offenses     2 errors | 1 warning (3 offenses across 1 file)
   Fixable      3 offenses | 2 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled
+  Rules        83 enabled | 12 not enabled
 
  TIP: Run herb-lint --init to create a .herb.yml and lock the version.
       This ensures upgrading Herb won't enable new rules until you update the version in .herb.yml."
@@ -1009,7 +1009,7 @@ exports[`CLI Output Formatting > formats simple output correctly 1`] = `
   Checked      1 file
   Offenses     2 errors | 0 warnings (2 offenses across 1 file)
   Fixable      2 offenses | 2 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled
+  Rules        83 enabled | 12 not enabled
 
  TIP: Run herb-lint --init to create a .herb.yml and lock the version.
       This ensures upgrading Herb won't enable new rules until you update the version in .herb.yml."
@@ -1029,7 +1029,7 @@ exports[`CLI Output Formatting > formats simple output for bad-file correctly 1`
   Checked      1 file
   Offenses     2 errors | 0 warnings (2 offenses across 1 file)
   Fixable      2 offenses | 2 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled
+  Rules        83 enabled | 12 not enabled
 
  TIP: Run herb-lint --init to create a .herb.yml and lock the version.
       This ensures upgrading Herb won't enable new rules until you update the version in .herb.yml."
@@ -1043,7 +1043,7 @@ exports[`CLI Output Formatting > formats success output correctly 1`] = `
   Checked      1 file
   Offenses     0 offenses
   Fixable      0 offenses
-  Rules        83 enabled | 10 not enabled
+  Rules        83 enabled | 12 not enabled
 
  TIP: Run herb-lint --init to create a .herb.yml and lock the version.
       This ensures upgrading Herb won't enable new rules until you update the version in .herb.yml."
@@ -1057,7 +1057,7 @@ exports[`CLI Output Formatting > handles boolean attributes 1`] = `
   Checked      1 file
   Offenses     0 offenses
   Fixable      0 offenses
-  Rules        83 enabled | 10 not enabled
+  Rules        83 enabled | 12 not enabled
 
  TIP: Run herb-lint --init to create a .herb.yml and lock the version.
       This ensures upgrading Herb won't enable new rules until you update the version in .herb.yml."
@@ -1093,7 +1093,7 @@ test/fixtures/bad-file.html.erb:1:16
   Checked      1 file
   Offenses     2 errors | 0 warnings (2 offenses across 1 file)
   Fixable      2 offenses | 2 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled
+  Rules        83 enabled | 12 not enabled
 
  TIP: Run herb-lint --init to create a .herb.yml and lock the version.
       This ensures upgrading Herb won't enable new rules until you update the version in .herb.yml."
@@ -1226,7 +1226,7 @@ test/fixtures/disabled-1.html.erb:14:19
   Checked      1 file
   Offenses     2 errors | 6 warnings | 8 ignored (8 offenses across 1 file)
   Fixable      8 offenses | 1 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled
+  Rules        83 enabled | 12 not enabled
 
  TIP: Run herb-lint --init to create a .herb.yml and lock the version.
       This ensures upgrading Herb won't enable new rules until you update the version in .herb.yml."
@@ -1430,7 +1430,7 @@ test/fixtures/disabled-2.html.erb:2:44
   Checked      1 file
   Offenses     6 errors | 7 warnings | 5 ignored (13 offenses across 1 file)
   Fixable      13 offenses | 6 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled
+  Rules        83 enabled | 12 not enabled
 
  TIP: Run herb-lint --init to create a .herb.yml and lock the version.
       This ensures upgrading Herb won't enable new rules until you update the version in .herb.yml."
@@ -1491,5 +1491,5 @@ test/fixtures/test-file-with-errors.html.erb:2:22
   Checked      1 file
   Offenses     2 errors | 1 warning (3 offenses across 1 file)
   Fixable      3 offenses | 2 autocorrectable using \`--fix\`
-  Rules        83 enabled | 10 not enabled"
+  Rules        83 enabled | 12 not enabled"
 `;
diff --git a/javascript/packages/linter/test/rules/html-no-style-attributes.test.ts b/javascript/packages/linter/test/rules/html-no-style-attributes.test.ts
new file mode 100644
index 000000000..462593fdd
--- /dev/null
+++ b/javascript/packages/linter/test/rules/html-no-style-attributes.test.ts
@@ -0,0 +1,95 @@
+import dedent from "dedent"
+import { describe, test } from "vitest"
+
+import { HTMLNoStyleAttributesRule } from "../../src/rules/html-no-style-attributes.js"
+import { createLinterTest } from "../helpers/linter-test-helper.js"
+
+const { expectNoOffenses, expectWarning, assertOffenses } = createLinterTest(HTMLNoStyleAttributesRule)
+
+describe("html-no-style-attributes", () => {
+  test("passes with class attribute", () => {
+    expectNoOffenses(dedent`
+      <button class="btn btn-primary">Submit</button>
+    `)
+  })
+
+  test("passes with data attributes", () => {
+    expectNoOffenses(dedent`
+      <div data-controller="hello" data-action="click->hello#greet">Content</div>
+    `)
+  })
+
+  test("fails with inline style attribute", () => {
+    expectWarning("Avoid inline `style` attribute. Use CSS classes or an external stylesheet instead.")
+
+    assertOffenses(dedent`
+      <button style="color: red;">Submit</button>
+    `)
+  })
+
+  test("fails with ERB tag in style attribute", () => {
+    expectWarning("Avoid inline `style` attribute. Use CSS classes or an external stylesheet instead.")
+
+    assertOffenses(dedent`
+      <div style="<%= custom_styles %>">Content</div>
+    `)
+  })
+
+  test("fails with ERB interpolation within style value", () => {
+    expectWarning("Avoid inline `style` attribute. Use CSS classes or an external stylesheet instead.")
+
+    assertOffenses(dedent`
+      <div style="max-width: <%= yield(:content_max_width).presence || "600px" %>;">Content</div>
+    `)
+  })
+
+  test("fails with url() containing ERB in style attribute", () => {
+    expectWarning("Avoid inline `style` attribute. Use CSS classes or an external stylesheet instead.")
+
+    assertOffenses(dedent`
+      <div style="background-image: url(<%= asset_path('bg.svg') %>); width: 593px;">Content</div>
+    `)
+  })
+
+  describe("Action View helpers", () => {
+    test("passes for tag.div without style", () => {
+      expectNoOffenses('<%= tag.div class: "container" %>')
+    })
+
+    test("fails for tag.div with style", () => {
+      expectWarning("Avoid inline `style` attribute. Use CSS classes or an external stylesheet instead.")
+
+      assertOffenses('<%= tag.div style: "color: red" %>')
+    })
+
+    test("passes for content_tag without style", () => {
+      expectNoOffenses('<%= content_tag :div, "content", class: "main" %>')
+    })
+
+    test("fails for content_tag with style", () => {
+      expectWarning("Avoid inline `style` attribute. Use CSS classes or an external stylesheet instead.")
+
+      assertOffenses('<%= content_tag :div, "content", style: "color: red" %>')
+    })
+
+    test("passes for link_to without style", () => {
+      expectNoOffenses('<%= link_to "About", "/about", class: "link" %>')
+    })
+
+    test("fails for link_to with style", () => {
+      expectWarning("Avoid inline `style` attribute. Use CSS classes or an external stylesheet instead.")
+
+      assertOffenses('<%= link_to "About", "/about", style: "color: red" %>')
+    })
+
+    test("fails for link_to block with style", () => {
+      expectWarning("Avoid inline `style` attribute. Use CSS classes or an external stylesheet instead.")
+
+      assertOffenses(dedent`
+        <%= link_to "https://example.com", style: "display: inline-block;" do %>
+          <span>Click here</span>
+        <% end %>
+      `)
+    })
+  })
+})
diff --git a/javascript/packages/linter/test/rules/html-no-style-elements.test.ts b/javascript/packages/linter/test/rules/html-no-style-elements.test.ts
new file mode 100644
index 000000000..82b98b530
--- /dev/null
+++ b/javascript/packages/linter/test/rules/html-no-style-elements.test.ts
@@ -0,0 +1,65 @@
+import dedent from "dedent"
+import { describe, test } from "vitest"
+
+import { HTMLNoStyleElementsRule } from "../../src/rules/html-no-style-elements.js"
+import { createLinterTest } from "../helpers/linter-test-helper.js"
+
+const { expectNoOffenses, expectWarning, assertOffenses } = createLinterTest(HTMLNoStyleElementsRule)
+
+describe("html-no-style-elements", () => {
+  describe("inline style tags", () => {
+    test("fails with empty style tag", () => {
+      expectWarning("Avoid inline `<style>` tags. Use `stylesheet_link_tag` to include external stylesheets instead.")
+
+      assertOffenses("<style></style>")
+    })
+
+    test("fails with style tag", () => {
+      expectWarning("Avoid inline `<style>` tags. Use `stylesheet_link_tag` to include external stylesheets instead.")
+
+      assertOffenses(dedent`
+        <style>
+          .danger { color: red; }
+        </style>
+      `)
+    })
+
+    test("fails with style tag containing ERB comment", () => {
+      expectWarning("Avoid inline `<style>` tags. Use `stylesheet_link_tag` to include external stylesheets instead.")
+
+      assertOffenses(dedent`
+        <style>
+          <%# preflight %>
+        </style>
+      `)
+    })
+  })
+
+  describe("action view helpers", () => {
+    test("passes with stylesheet_link_tag", () => {
+      expectNoOffenses(dedent`
+        <%= stylesheet_link_tag "application" %>
+      `)
+    })
+
+    test("fails with content_tag helper", () => {
+      expectWarning("Avoid inline `<style>` tags. Use `stylesheet_link_tag` to include external stylesheets instead.")
+
+      assertOffenses(dedent`
+        <%= content_tag :style do %>
+          .danger { color: red; }
+        <% end %>
+      `)
+    })
+
+    test("fails with tag helper", () => {
+      expectWarning("Avoid inline `<style>` tags. Use `stylesheet_link_tag` to include external stylesheets instead.")
+
+      assertOffenses(dedent`
+        <%= tag.style do %>
+          .danger { color: red; }
+        <% end %>
+      `)
+    })
+  })
+})