Unable to style font of span within an heading element

HTML & CSS
1

Hi,

I’m trying to style the ampersand here to be a nice Baskerville italic font, as I have done with the span within the <p>. It’s not working. Here’s the html snippet & css:

<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<title>AMP test</title>
<link rel=“stylesheet” href=“test.css”>
</head>
<body>
<p>Articles <span class=“amp”>&</span> Events.</p><!-- Works fine –>
<h1>Articles <span class=“amp”>&</span> Events.</h1><!-- Font does not change –>
</body>
</html>

span.amp{
font-family: Baskerville;
font-style: italic;
font-size: 220%;
background-color: green;
}

I stuck the rather crude green background in there to check that CSS was indeed being applying to the span inside the H1 - which it is. Just refuses to change the ampersand to the nice one!

Is there a quirk whereby you cannot amend this type of property inside a heading? Seems really strange to me.

Thanks in advance of any help!

Si

2

Personally I cannot see the difference other than the obvious emphasis inherited from the H1.

3

The ampersand in both should look like it does for the span within the paragraph tag - it doesn’t style that way in the h1. The font-family: Baskerville and font-style: italic are being overridden / ignored.

  • I’ve checked it in Safari, Firefox, and Chrome - same issue across all three.
4

it’s the font itself. It doesn’t have a usable “bold” state, so its getting replaced by the default serif. add this to your .amp rule :

font-weight:normal;

hope that helps…

5

I checked it, and saw that the size of the ampersand is 220% of the fonts in the parent elements of the “span”.

6

Dresden, if someday I ever make it over to Rockford, Illinois I will buy you a beer Sir! :slight_smile:

Thank you very much, that was indeed the problem (which has been driving me nuts for the past few hours!)

Much appreciated, cheers!