# Overriding CSS file in a layout

**URL:** <https://talk.jekyllrb.com/t/overriding-css-file-in-a-layout/294>\
**Category:** Help\
**Created:** [March 10, 2017, 10:03pm UTC](https://talk.jekyllrb.com/t/overriding-css-file-in-a-layout/294 "2017-03-10T22:03:25Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![ashmaroli](https://avatars.discourse-cdn.com/v4/letter/a/df705f/32.png) [@ashmaroli](https://talk.jekyllrb.com/u/ashmaroli)\
**Post date:** [March 11, 2017, 3:24am UTC](https://talk.jekyllrb.com/t/overriding-css-file-in-a-layout/294/4 "2017-03-11T03:24:57Z")

</div>

How I would go about this issue is by using what I call layout-ids.

My base layout would contain body element tagged with the page’s layout-name which will then be referenced in the CSS.

```auto
<!-- _layouts/default.html -->

<!DOCTYPE html>
<html>
  {% include head.html %}
  <body id="{{ page.layout }}">
    {{ content }}
  </body>
</html>

```

Now when a page uses a layout that inherits from this base layout, `body` element will be tagged accordingly.

e.g `about.html` generated with a layout called `page` will have the markup as:

```auto
<!DOCTYPE html>
<html>
  <head>
    <title>About</title>
  </head>
  <body id="page">
    <div class="box">
      Content from <code>about.md</code>
    </div>
  </body>
</html>

```

Now in my stylesheets, I can style with greater control

```auto
.box { width: 300px; padding: 15px; }
#page .box { font-weight: 700; background-color: #cdcdcd; }
#post .box { color: #454545; background-color: #eaeaea; }

```

---

_[View the full topic](https://talk.jekyllrb.com/t/overriding-css-file-in-a-layout/294)._