Styling an H1 with multiple colors

HTML & CSS
1

Hello. I would like to style an H1 that is a single word and make it have multiple colors.

I’m not sure how to do this in a proper HTML/CSS way, and also in a way that won’t mess up SEO.

Here is what I came up with…

<h1 id="logo"><span class="brandRed">Christ</span><span class="brandGreen">mas</span></h1>

How does that look?

2

Bloated. :biggrin:

HTML

  <h1>
   Christ<span>mas</span>
  </h1>

CSS

h1 {
    color: #f00;
 }
h1 span {
    color: #0f0;
 }

coothead

1 Like
3

Okay, but now anytime I have an H1 it will be red, and I’ll have to create another style to counteract that, so I don’t see the long-term benefit to your approach. (It makes sense for one page, I suppose.)

5

I have these TLA (three letter acronyms) set in my stylesheet:

.bga {background-color: aqua;}
.bgl {background-color: lime;}
.bgr {background-color: red;}

.fga {background-color: aqua;}
.fgl {background-color: lime;}
.fgr {background-color: red;}
6

So why are you telling me that?

coothead

7

Another one of my threads gone “off the rails”…

8

Your CSS script only applies to h1 and requires another for H2, h3, etc.

Using TLAs reduce the number of times background-color is used in the CSS file making less verbose CSS files that are quicker to load.

9

Not really, using TLAs eliminates the above concern.

10

What is TLA?

11

See my post #5

12

We’re getting off into the weeds…

Is this markup technically correct?

<h1 id="logo"><span class="brandRed">Christ</span><span class="brandGreen">mas</span></h1>

And would it be acceptable as far as SEO goes? (As my example would be for the company name.)

13

Please elaborate on “technically correct”. Have you tried submitting the script to W3.org validation services and the CSS Jigsaw validation tools.

As far as SEO is concerned I think only displayed content matters. CSS, JavaScript, etc do not affect your Brownie Points :slight_smile:

I also think the term “semantically correct” is for team member benefits.

14

I didn’t originally because it was an include file and not finished.

It appears to be okay checking now.

If your HTML is not correct you can get dinged.

I suppose.

15

I have validation footer links because it is easier to find a single code violation than let them accumulate.

Sure?

16

What do you mean?

Well, if you HTML is not semantically correct, like you had…

<h1 class="red">Site</h1><h1 class="green">Point</h1>

…then it could screw up your SEO.

Or I forget the right term, but on an e-commerce site if you didn’t use a canonical link and made it appear that you had duplicate products, that could screw up your SEO too,

So getting your HTML correct does matter to some degree.

17

Check this ongoing site that has dynamic footer links:

https://ci4-strict.tk/

18

Well, I’m with Jason when it comes to your TLAs. :rofl:

https://forums.cutcodedown.com/index.php?topic=49.0#msg187

He pertinently points out that…

“you might as well go back to using bgcolor from HTML 3.2.”

coothead

19

Yes.

No.

Search Engines would no longer flag to Christmas. They would flag to Christ and mas, two words. While the search engines might return the results (Google, for example sometimes return space and non-space results together), not all of them will return the same results, nor the same weight.

There is no nth-letter css specification, so you’d need to use js to achieve what you want. You could leverage something like this to get the results you’d want: https://jsfiddle.net/amitmonsterme/tnh2mq5q/

20

Wait, you are saying Google will treat this as two words…

<h1 id="logo"><span class="brandRed">Christ</span><span class="brandGreen">mas</span></h1>

If so, why?



I’m really not ready for Javascript yet.

21

If it’s not a global style, add a class to the h1 and replace the `h1 in the selector with the class.