# Adding italics to the GM webpage

**URL:** <https://delphinqa.ling.washington.edu/t/adding-italics-to-the-gm-webpage/325>\
**Category:** Grammar Matrix\
**Tags:** matrixdef\
**Created:** [June 21, 2019, 8:30pm UTC](https://delphinqa.ling.washington.edu/t/adding-italics-to-the-gm-webpage/325 "2019-06-21T20:30:54Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![olzama](https://delphinqa.ling.washington.edu/user_avatar/delphinqa.ling.washington.edu/olzama/32/6_2.png) [@olzama](https://delphinqa.ling.washington.edu/u/olzama)\
**Post date:** [June 21, 2019, 8:30pm UTC](https://delphinqa.ling.washington.edu/t/adding-italics-to-the-gm-webpage/325/1 "2019-06-21T20:30:54Z")

</div>

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

I see that **bold** is added like so:

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

```

And in matrix.css, I see:

```auto
.dfn { font-weight: bold }

```

So, after consulting [this](https://www.w3schools.com/cssref/pr_font_font-style.asp), which told me that bold is indeed the font-weight property but italics is the font-style property, I added, in the same place:

```auto
.ita { font-style: italic }

```

But now saying, in matrixdef:

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

```

results in normal font.

Does anyone have an idea of what I am missing?

---

<div class="post-metadata">

**Author:** ![goodmami](https://delphinqa.ling.washington.edu/letter_avatar_proxy/v4/letter/g/b5e925/32.png) [@goodmami](https://delphinqa.ling.washington.edu/u/goodmami)\
**Post date:** [June 22, 2019, 3:22pm UTC](https://delphinqa.ling.washington.edu/t/adding-italics-to-the-gm-webpage/325/2 "2019-06-22T15:22:10Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) for an MDN reference article, and [here](https://specifishity.com/) 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”.

---

<div class="post-metadata">

**Author:** ![olzama](https://delphinqa.ling.washington.edu/user_avatar/delphinqa.ling.washington.edu/olzama/32/6_2.png) [@olzama](https://delphinqa.ling.washington.edu/u/olzama)\
**Post date:** [June 24, 2019, 4:17pm UTC](https://delphinqa.ling.washington.edu/t/adding-italics-to-the-gm-webpage/325/3 "2019-06-24T16:17:35Z")

</div>

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](https://delphinqa.ling.washington.edu/uploads/default/original/1X/a3bacaed9d47d315947cde4d51dd41aaf16e2ff3.png)

---

<div class="post-metadata">

**Author:** ![olzama](https://delphinqa.ling.washington.edu/user_avatar/delphinqa.ling.washington.edu/olzama/32/6_2.png) [@olzama](https://delphinqa.ling.washington.edu/u/olzama)\
**Post date:** [June 24, 2019, 4:26pm UTC](https://delphinqa.ling.washington.edu/t/adding-italics-to-the-gm-webpage/325/4 "2019-06-24T16:26:23Z")

</div>

Well, if I simply replace the span class attribute with

```auto
 <i> text </i>

```

- then it works. I suppose I will just do that.

---

<div class="post-metadata">

**Author:** ![ebender](https://delphinqa.ling.washington.edu/letter_avatar_proxy/v4/letter/e/34f0e0/32.png) [@ebender](https://delphinqa.ling.washington.edu/u/ebender)\
**Post date:** [June 24, 2019, 4:31pm UTC](https://delphinqa.ling.washington.edu/t/adding-italics-to-the-gm-webpage/325/5 "2019-06-24T16:31:39Z")

</div>

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

 ![39%20AM](https://delphinqa.ling.washington.edu/uploads/default/original/1X/10c2b643d5d99d8471509d2be8c98f37fcfc622d.png)

---

<div class="post-metadata">

**Author:** ![olzama](https://delphinqa.ling.washington.edu/user_avatar/delphinqa.ling.washington.edu/olzama/32/6_2.png) [@olzama](https://delphinqa.ling.washington.edu/u/olzama)\
**Post date:** [June 24, 2019, 5:20pm UTC](https://delphinqa.ling.washington.edu/t/adding-italics-to-the-gm-webpage/325/6 "2019-06-24T17:20:12Z")

</div>

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

```auto
<i> </i>

```

which seems to be working for me.

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

---

<div class="post-metadata">

**Author:** ![goodmami](https://delphinqa.ling.washington.edu/letter_avatar_proxy/v4/letter/g/b5e925/32.png) [@goodmami](https://delphinqa.ling.washington.edu/u/goodmami)\
**Post date:** [June 25, 2019, 1:27am UTC](https://delphinqa.ling.washington.edu/t/adding-italics-to-the-gm-webpage/325/7 "2019-06-25T01:27:44Z")

</div>

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: [\<i\>: The Idiomatic Text element - HTML: HyperText Markup Language | MDN](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 🙂
