Menu icon Foundation
styles not inherited

I'm new to Foundation and don't understand some basics. How do you apply styles to for example a footer? If I do this:

<footer style="font-size:50%"><p>This is my footer.</p></footer>
            

         

the font-size doesn't have any effect. If I define the style within the p element or remove the p, then it does work. Thus, I'm guessing the issue is that the font-size doesn't propagate to child elements. However, text color does propagate. What's going on? What is the recommended way of adding your own styles on top of what Foundation provides?

Note I'm giving the style inline to keep the example simple. I get the same behavior if I use an external style sheet.

Thanks for any help.

stylefooter

I'm new to Foundation and don't understand some basics. How do you apply styles to for example a footer? If I do this:

<footer style="font-size:50%"><p>This is my footer.</p></footer>
            

         

the font-size doesn't have any effect. If I define the style within the p element or remove the p, then it does work. Thus, I'm guessing the issue is that the font-size doesn't propagate to child elements. However, text color does propagate. What's going on? What is the recommended way of adding your own styles on top of what Foundation provides?

Note I'm giving the style inline to keep the example simple. I get the same behavior if I use an external style sheet.

Thanks for any help.

Marc McGee almost 6 years ago

You can also review the actual CSS and better understand how Foundation is handling the typography. There are also special helper classes like .

It appears as though you want a smaller font size in your footer. Simply surround the content within the p tag and you will get the Foundation sizing of .6em – essentially 60% of the font size preference established in the user's browser.

If that's too small, you can certainly change that sizing in the CSS so that the sizing gets applied globally in all instances.

As Wing-Hou Chan mentioned, if you want unique, special situational styling, create your own css style and apply it to the row column or even a specific tag. There are instances when Foundation will override because of the !important, and as well because the typography is intended to be global.

I would make changes carefully as there is a rhyme and reason to the way the typography is defined in the CSS in turn of readability, scalability and overall balance.

The biggest changes that I made to the actual style sheet were to the size and percentage increases for the h tags. I found them too large for a particular size I was working on, and found a very helpful site that allows you to generate various sizes that maintain a harmonious balance with one another. Think of typography as like music. http://modularscale.com

small {
  font-size: 60%;
  line-height: inherit; }

Karl Ward almost 6 years ago

Foundation applies font-size CSS to the <p> element, so technically, it will override anything you set in a parent element <footer>. Technically, it would have to be done like this, although it is poor integration:

<footer><p style="font-size:50%">This is my footer.</p></footer>

You would need to add it as CSS like this, and thats even without considering media queries:

footer p {
   font-size:50%;
}

Wing-Hou Chan almost 6 years ago

Hey Ashish!

Some Foundation styles have !important applied to it. This is to maintain consistency throughout the site among a few possible reasons.

If you wish to make changes with then you can add your own !important rules. With SCSS you could add your own !important rules or directly edit the SCSS itself.

Also bear in mind the order in which your stylesheets are called. The rules in the last stylesheet have precedence over the stylesheets listed first so you should order it like this:

<link href="/css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/css/foundation.css" rel="stylesheet" type="text/css" />
<link href="/css/yourCSS.css" rel="stylesheet" type="text/css" />

Wing-Hou Chan almost 6 years ago

Hey Ashish!

The only way without SCSS is to define your own rules in your own stylesheet and add !important to it if it isn't being applied. !important will override any rules in Foundation CSS even if it has its own !important rules.

Ashish Agarwal almost 6 years ago

Thanks, but isn't there a way to set font-size without getting into SCSS. The Typography section of the documentation doesn't describe any classes for this, which I would have expected.

Ashish Agarwal over 5 years ago

Thanks for all the replies. This has helped, and I'm making progress.