diff --git a/DESCRIPTION b/DESCRIPTION
index a5d1fbbc..633f4d95 100644
--- a/DESCRIPTION
+++ b/DESCRIPTION
@@ -41,7 +41,7 @@ Config/Needs/check: knitr
 Config/Needs/website: rstudio/quillt, bench
 Encoding: UTF-8
 Roxygen: list(markdown = TRUE)
-RoxygenNote: 7.2.3
+RoxygenNote: 7.3.1
 Collate:
     'colors.R'
     'fill.R'
diff --git a/NEWS.md b/NEWS.md
index e24e5b2e..aeec2449 100644
--- a/NEWS.md
+++ b/NEWS.md
@@ -1,8 +1,12 @@
 # htmltools (development version)
 
+## Improvements
+
+* The fill CSS attached to fillable containers and fill items with `bindFillRole()` now uses a [CSS cascade layer](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers) named `htmltools` to reduce the precedence order of the fill CSS. (#425)
+
 ## Bug fixes
 
-* `bindFillRole()` now attaches its `HTMLDependency()` to fill items, thus reducing the possibility of filling layout breaking due to missing CSS. (#421) 
+* `bindFillRole()` now attaches its `HTMLDependency()` to fill items, thus reducing the possibility of filling layout breaking due to missing CSS. (#421)
 
 
 # htmltools 0.5.7
diff --git a/inst/fill/fill.css b/inst/fill/fill.css
index 74ff612c..841ea9d5 100644
--- a/inst/fill/fill.css
+++ b/inst/fill/fill.css
@@ -1,19 +1,21 @@
-.html-fill-container {
-  display: flex;
-  flex-direction: column;
-  /* Prevent the container from expanding vertically or horizontally beyond its
-     parent's constraints. */
-  min-height: 0;
-  min-width: 0;
-}
-.html-fill-container > .html-fill-item {
-  /* Fill items can grow and shrink freely within
-     available vertical space in fillable container */
-  flex: 1 1 auto;
-  min-height: 0;
-  min-width: 0;
-}
-.html-fill-container > :not(.html-fill-item) {
-  /* Prevent shrinking or growing of non-fill items */
-  flex: 0 0 auto;
+@layer htmltools {
+  .html-fill-container {
+    display: flex;
+    flex-direction: column;
+    /* Prevent the container from expanding vertically or horizontally beyond its
+    parent's constraints. */
+    min-height: 0;
+    min-width: 0;
+  }
+  .html-fill-container > .html-fill-item {
+    /* Fill items can grow and shrink freely within
+    available vertical space in fillable container */
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+  }
+  .html-fill-container > :not(.html-fill-item) {
+    /* Prevent shrinking or growing of non-fill items */
+    flex: 0 0 auto;
+  }
 }