Adding italics to the GM webpage

I’d like to use some italics on the GM webpage (like, for the example sentences).

I see that bold is added like so:

In <span class=\"dfn\">matrix</span> questions

And in matrix.css, I see:

.dfn { font-weight: bold }

So, after consulting this, which told me that bold is indeed the font-weight property but italics is the font-style property, I added, in the same place:

.ita { font-style: italic }

But now saying, in matrixdef:

<span class=\"ita\">Who did you see?</span>

results in normal font.

Does anyone have an idea of what I am missing?

The CSS and HTML you have there look fine. My guess is that either the .css or other relevant files didn’t get copied to the server, or your rule is blocked by another rule with higher “specificity”.

Regarding the latter, CSS rules can override others if they are more specific to the element (e.g., #ids are very specific, .classes are somewhat specific, and element types are less specific). See here for an MDN reference article, and here for a silly but informative description (linked to by the MDN article).

I didn’t dig far to see if this is in fact the issue, but I did notice that matrixdef puts style attributes directly on elements, which generally override anything in linked CSS files.

In some browsers, like Firefox and Chrome, you can enter “developer” mode to see exactly what’s going on. Usually you can right-click the element you’re interested in and click “inspect”.

1 Like

Thanks Michael!

The updated files did make it to the server. Inspecting the element shows the same picture as with bolded things… Hm…

09%20AM

Well, if I simply replace the span class attribute with

 <i> text </i>
  • then it works. I suppose I will just do that.

This might be a browser level issue. Here’s what I see (since Friday) on your sandbox page, using Chrome: 39%20AM

Oh, sorry, now I confused everyone. The latest version is with

<i> </i>

which seems to be working for me.

Can’t figure out how to do it css-style though.

With the CSS version, you show that the element has class ita, but did you inspect the page’s active styles in the browser’s “developer mode” to make sure the CSS rule was present? When I manually alter those files through the developer mode I was able to make it appear italic with the same CSS you used.

Using <i>...</i> instead of <span>...</span> is also good, but you may want to also use a class and CSS, as the <i> element does not strictly mean “italic” anymore, although in practice most browsers present it this way by default. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i#Usage_notes

Using CSS is better in case you want to change the style further, such as the font or color, or if you want to give a negative horizontal offset to starred-examples so the text lines up instead of the asterisk, etc.

But maybe not thinking about it too hard and moving on is also good :slight_smile:

1 Like