Menu icon Foundation
Change font color/size in html

I'm new to Foundation and I'm not a programmer, so bear with me! The shopping cart I'm using just switched to Foundation and I'm using their theme, so I have limited access to the css files. I really wouldn't know what to do with them if I did! :)

I'm creating responsive pages OK with guidance from Keven Horek's book, but I need to override some of the text attributes (color & size mainly) of certain text on some pages.

I've had some success with basic html tags like the ones below but I doubt this is a very elegant solution, and I don't think it's very html5 friendly either. In fact, some of the closing /div tags have misbehaved for Foundation too.

Can someone show me a better way to do this using html?

Thanks.

<font color="red">
<span style="font-size: 24pt">
            

         

htmloverride

I'm new to Foundation and I'm not a programmer, so bear with me! The shopping cart I'm using just switched to Foundation and I'm using their theme, so I have limited access to the css files. I really wouldn't know what to do with them if I did! :)

I'm creating responsive pages OK with guidance from Keven Horek's book, but I need to override some of the text attributes (color & size mainly) of certain text on some pages.

I've had some success with basic html tags like the ones below but I doubt this is a very elegant solution, and I don't think it's very html5 friendly either. In fact, some of the closing /div tags have misbehaved for Foundation too.

Can someone show me a better way to do this using html?

Thanks.

<font color="red">
<span style="font-size: 24pt">
            

         

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

James Van Waza over 4 years ago

Best Way would be to use css.

Example. If it is a h1 tag you want the color to be red, the code would be as follows
HTML
<h1>Foundation Forum</h1>

h1 {color:red;}

If it is a specific h1 tag, you would give it a class, the class name would be used on several other html tags.

Example

<h1 class="title">Foundation 5</h1>
h1.title {color: red;}

Terry Potter over 4 years ago

Thanks for your response James. However, as I said in my post, I don't have a lot of access to the css files, so I need to do it in the html.

Any examples of that?

James Van Waza over 4 years ago

If it has to be HTML then an eaiser way would be to do this

<style>

</style>

Insert all the css in the style tags . The style will then be called by the HTML.

Terry Potter over 4 years ago

Excellent - just what I needed.

Would you mind also giving me the correct syntax for font size?

Thanks for your help.

James Van Waza over 4 years ago

Hi @Terry Potter Check out the example below

Styling example of the header tags
```HTML

1rem = 16px
h1 {
font-size: 1rem;
}

h2 {
font-size: 1.25rem;
}
h3 {
font-size: 1.5rem;
}

h4 {
font-size: 1.75rem;
}

h5 {
font-size: 2rem;
}

h6 {
font-size: 2.25rem;
}

```

Terry Potter over 4 years ago

And for ?

Terry Potter over 4 years ago

And for the P tag?

Jonas Marlo Loerken over 4 years ago

It's quite easy.

<p style="font-size:24px; color:#fff;">Lorem Ipsum Dolor Sit Amet</p>

<h1 style="font-size:55px; color:#ccc; margin-top:30px;">HEADLINE LOREM IPSUM</h1>

Terry Potter over 4 years ago

Thank you Jonas. That's exactly what I was looking for.

James Van Waza over 4 years ago

@Terry Potter If everything is successful, please mark the issue as resolved.