I'm having a serious problem (probably going to turn out to be my total lack of understanding though!) regarding over-riding text colors when using Foundation 5.
Currently I have this code :
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css"/>
<script src="js/vendor/modernizr.js"></script>
<link href="http://fonts.googleapis.com/css?family=Oswald|Lato:300,400,300italic,400italic" rel="stylesheet" type="text/css">
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<section class="">
<div class="row text-center">
<div class="columns medium-12">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Column title</h3>
<h4>Heading 4</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</section>
<section>
<div class="row text-right">
<div class="columns medium-12">
<h1>Heading 1</h1>
<h3>Column title</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</section>
<section style="background-color: #ff9900;">
<div class="row">
<div class="columns medium-12">
<h1>Powerful Distribution<br>Networks</h1>
<h3>Road, Air, Rail or Sea<br>We've got it covered!</h3>
<p>Providing 1st class logistics services worldwide. This is trucking powerful niche template which will show your users what they can get from some very simple classes and typography styling!</p>
</div>
</div>
</section>
<section class="">
<div class="row">
<div class="columns medium-12">
<h3>Column title</h3>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</section>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
All very standard so far.
Now what I'd like to be able to do is have different coloured backgrounds for different sections and then within those sections any text in there I should be able to set the colour of that too.
Placing a class on one of the sections and giving it a background-color of say #ff9900 works fine but if I try to then find a way of setting the text inside these sections to a color then I keep on getting stopped by the fact that the standard Foundation framework has set that color already.
I'll need to be able to make different sections different colours and then also any text that is inside them a certain colour too but at the moment most things I try just aren't working. I know it's a specificity problem but just can't seem to get anything to work well. The only thing I can change fairly easily is p tags but I want to be able to change all text in a section easily.
If I take out the foundation css stylesheet so that the page is just using standard html code with no css set from the outside then if I say added a class to a section say class="black" (bad I know ;-) ) and then placed a css style tag in the page with that style declared I would then be able to set both the background colour and also the text colour of that one section in one fell swoop. Having the Foundation stylesheet in there means that if I do that it only ever over-rides the p tags in that section whereas I want to be able to set all the text in that section regardless.
This in standard html would work :
<style type="text/css">
<!--
.black {
background: #000;
color: #fff;
}
-->
</style>
<section class="black">
<div class="row text-center">
<div class="columns medium-12">
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Column title</h3>
<h4>Heading 4</h4>
<p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
</div>
</div>
</section>
If I do this with the Foundation stylesheet added to the page though then only p tags would get set to white and not any of the header tags.
I believe it's to do with the fact that Foundation has set a color: #222; to all headers in its stylesheet and this is over-riding whatever I do.
Am I therefore safe to just take out that style declaration from Foundation or will it cause me more headaches down the line?
Any help with this would be greatly appreciated.
Many thanks,
Mark
This is because ZURB Foundation has specifically defined font colors for headlines but not for paragraph - color for paragraph is inherited from body.
If you define font color generally for the section you change color of paragraph then because it is more specific than color for body and will be inherited for the paragraph. Despite of color defined exactly for headlines is more specific than color for section where the headline is placed and isn't inherited and rewritten then.
If you want to change the color for headlines you have to do it specifically for headlines. There are more ways how to achieve that.
1) You are using ZURB Foundation distributed as CSS file only
In this case you don't have any other possibility than change it in your CSS directly.
CSS
CodePen Example
2) You are using ZURB Foundation as project with SCSS files
Here you are two posibilities. If you are using
_settings.scssfile, you can redefine variable$header-font-colorto whatever you want. If you use inherit value then headlines behaviour is exactly the same as the behaviour of paragraph - the color is inherited from color defined for the whole section.If you don't want to use settings file, you can place the redefiniton wherever you want in your style definitons but this file is the standard location for variables redefinition.
SCSS
Another solution is, of course, write your own SCSS style to achieve this behaviour.
SCSS
Compiled CSS
CodePen example