CODEWITHSUNDEEP
htmltextcolorssize
liam
liam

Reputation: 11

Make first H1 letter of each word larger and colored for a single H1

I've got a h1 line of 5 words and I want to increase the size of the 3rd, 4th and 5th initial letters only, underline them and then make them a different color.

I've done it but WC3 says my code is invalid on all attributes and elements in each case of size, underlining and color.

Here's what works in the browsers but won't validate:

<p><h1>Welcome to <br /><font size="120%" color=Red><u>M</u></font>y <font size=120% color=Red><u>F</u></font>vourite <font size=120% color=Red><u>W</u></font>ebsite</h1></p>

It's giving me my only errors (15 in all) on this design.

Please can anyone assist with the HTML and or CSS to fix this so that it validates.

I have tried variations for size and color and though they work in the browsers, they will not validate.

Thank you :)

Upvotes: 1

Views: 15339

Answers (5)

Stephen Watkins
Stephen Watkins

Reputation: 25765

You have some invalid tags <font> and <u>.

I would do something like this to validate and clean up your code:

<style>
    .big {
         font-size: 1.2em;
    }

    .red {
         color: red;
    }
</style>

<h2>Welcome to</h2>
<h1>
    <span class="big red">M</span>y 
    <span class="big red">F</span>avorite 
    <span class="big red">W</span>ebsite
</h1>

or even:

<style>
    h1 span:first-letter {
        font-size: 1.2em;
        color: red;
    }
</style>

<h2>Welcome to</h2>
<h1>
    <span>My</span>
    <span>Favorite</span> 
    <span>Website</span>
</h1>

Upvotes: 0

mylesagray
mylesagray

Reputation: 8869

They won't validate cause the font tag was deprecated long ago, and thus all of its parameters,

You can use this in CSS:

h1 {
margin:5px;
}
#title span {
font-size: 1.2em;
color: #c13636;
text-decoration: underline;
}

And wrap the word to be highlighted in span tags:

<span>TEST</span>

Applied to your code:

<h1 id="title">Welcome to <br /><span>M</span>y <span>F</span>avourite <span>W</span>ebsite</h1>

Demo:

http://jsfiddle.net/Mutant_Tractor/SBbcu/

Upvotes: 6

Kris
Kris

Reputation: 1840

<font></font> and <u></u>

are deprecated. Use a <span></span> with CSS applied to it.

Upvotes: 2

Jawa
Jawa

Reputation: 2332

So, as a summary

  • can't have inside a

  • don't use <font> or <u>
  • HTML is for markup, CSS for styling

With "pure" HTML/CSS you have multiple possibilities to achieve what you're after. Here are couple variations. You probably should add class attributes to span elements but I've omitted them here for brevity.

1°

HTML file:

<h1>Welcome to <span>M</span>y <span>F</span>vourite <span>W</span>ebsite</h1>

CSS file:

h1 span {
  font-size: 120%;
  color: red;
  text-decoration: underline;
}

2°

HTML file:

<h1>Welcome to <span>My</span> <span>Favourite</span> <span>Website</span></h1>

CSS file:

h1 span:first-letter {
  font-size: 1.2em;
  color: red;
  text-decoration: underline;
}

Upvotes: 0

Eric Giguere
Eric Giguere

Reputation: 3505

Use a span element with a style attribute, as in:

<span style="font-size: 120%; color: red; text-decoration: underline;">M</span>

Alternatively, define CSS classes for the various combinations and use those instead.

Upvotes: 1

Related Questions