Menu icon Foundation
Overriding with app.css – how to change body-tag?

Hi,

After years away from CSS, I'm starting a new project and plan to base it on Foundation. But I stumble already at the start. This is probably so obvious that it's embarrassing – but I can't figure it out:

I've an app.css included in foundation.css where I do my customizations. I've changed all header tags as I want, so I know that app.css actually is included when my page is rendered.

But I also want to do some changes to the body-tag, most importantly change the background color. But when I add a body-selector to app.css the background is still white. I've tried to find any other place where the background color is set, but only found the body-selector in foundation.css. And when I do the changes there, I get the background I want.

What am I missing?

Thanks,
Anders

cssvanilla cssstylingapp.css

Hi,

After years away from CSS, I'm starting a new project and plan to base it on Foundation. But I stumble already at the start. This is probably so obvious that it's embarrassing – but I can't figure it out:

I've an app.css included in foundation.css where I do my customizations. I've changed all header tags as I want, so I know that app.css actually is included when my page is rendered.

But I also want to do some changes to the body-tag, most importantly change the background color. But when I add a body-selector to app.css the background is still white. I've tried to find any other place where the background color is set, but only found the body-selector in foundation.css. And when I do the changes there, I get the background I want.

What am I missing?

Thanks,
Anders


Steve Trask gave the most helpful answer for this post
Steve Trask over 5 years ago

ahh, okay I think you might have to use body rather than html because foundation is uses body as below:

html,
body {
  font-size: 100%; }

body {
  background: white;
  color: #222222;
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
  cursor: default; }

Then this should override the foundation styling, let me know how you get on

This post has been closed. No new replies can be added.

Steve Trask over 5 years ago

Are you using a sass project or just normal css?

Steve Trask over 5 years ago

It sounds like the css link order has foundation.css last which is overriding your app.css therefore when you change it in foundation.css it works. just change the order the appear in the

hope this helps

Anders Thoresson over 5 years ago

Normal CSS. And no, app.css is the last stylesheet loaded.

  <!-- If you are using CSS version, only link these 2 files, you may add app.css to use for your overrides if you like. -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/foundation.css">

  <!-- Customizations by Anders Thoresson -->
  <link rel="stylesheet" href="css/app.css">

app.css looks like this:

The styling applied to h1-h6 works, the styling applied to body doesn't.
```CSS

<!-- Customizations by Anders Thoresson -->
html {
background: blue;
}

h1, h2, h3, h4, h5, h6 {
font-weight: 300;
font-style: italic;
}
```

Steve Trask over 5 years ago

ahh, okay I think you might have to use body rather than html because foundation is uses body as below:

html,
body {
  font-size: 100%; }

body {
  background: white;
  color: #222222;
  padding: 0;
  margin: 0;
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
  cursor: default; }

Then this should override the foundation styling, let me know how you get on

Anders Thoresson over 5 years ago

My bad. The code I pasted was what I tested when this didn't work:

<!-- Customizations by Anders Thoresson -->
body {
  background: blue;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
  font-style: italic;
  color: red;
  background-color: blue;
}

Any change I do to h1-h6 are reflected in the rendered page. But nothing I try with the body selector changes the result.

Steve Trask over 5 years ago

No worries, do you have a link that I can view at all and I will figure it out as you are correct it should be working

Thanks

Anders Thoresson over 5 years ago

Oh my. It was I who had forgotten the comment styles in CSS. I'm sorry that I even bothered you with this.

Steve Trask over 5 years ago

No problem at all, just glad it was fixed, happy foundationing!