# Why use of W3.CSS change text Font?

**URL:** <https://discourse.nodered.org/t/why-use-of-w3-css-change-text-font/46515>\
**Category:** Dashboard\
**Created:** [31 May 2021 15:51 UTC](https://discourse.nodered.org/t/why-use-of-w3-css-change-text-font/46515 "2021-05-31T15:51:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [31 May 2021 15:51 UTC](https://discourse.nodered.org/t/why-use-of-w3-css-change-text-font/46515/1 "2021-05-31T15:51:50Z")

</div>

Hi all,

I test a `w3.css`, **to enlarge an image in full screen** in the Dashboard according to this example: [Tryit Editor v3.6](https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_modal_image)

But the text with the `<h1> </h1>` dashboard tags change :

 ![with modal](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/7/77180c65980160c9a6b3600715d85d390c7b625e.jpeg)

 ![good without modal](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/8/88887a6e16620c5d48d5da62c7d2409b0cbbd94d.jpeg)

This is the " **Click on the image to display it in full size**" Template node code :

```auto
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  
  <img src="data:image/jpg;base64,{{msg.payload}}" alt="MQTT camAlerte Pict." 
  style="width:100%;cursor:zoom-in" onclick="document.getElementById('modal01').style.display='block'">
    {{msg.filename}}

  <div id="modal01" class="w3-modal w3-black" onclick="this.style.display='none'">
    <span class="w3-button w3-hover-red w3-xlarge w3-display-topright">&times;</span>
    <div class="w3-modal-content w3-animate-zoom">
      <img src="data:image/jpg;base64,{{msg.payload}}" style="width:100%">
    </div>
  </div>

```

**What should I add to my code so that it does not distort the rest of my Dashboard?**  
(beginner inside 😆)

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [2 June 2021 04:12 UTC](https://discourse.nodered.org/t/why-use-of-w3-css-change-text-font/46515/2 "2021-06-02T04:12:49Z")

</div>

> [@SuperNinja](#):
>
> `https://www.w3schools.com/w3css/4/w3.css`

Brings in following:

```auto
h1{font-size:36px}
h2{font-size:30px}
h3{font-size:24px}
h4{font-size:20px}
h5{font-size:18px}
h6{font-size:16px}
.w3-serif{font-family:serif}
.w3-sans-serif{font-family:sans-serif}
.w3-cursive{font-family:cursive}
.w3-monospace{font-family:monospace}
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}

```

So when you use `<h1>` tag in text node value, the CSS from w3 affects.  
If you need to style text in ui\_text widget, most reliable will be to put the content inside `<span>` tags and give class to that span and then write CSS for that class and you have full freedom to decorate the text as you like.

An example can be found from this thread: [Reduced Line Spacing](https://discourse.nodered.org/t/reduced-line-spacing/46346)

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [2 June 2021 08:00 UTC](https://discourse.nodered.org/t/why-use-of-w3-css-change-text-font/46515/3 "2021-06-02T08:00:55Z")

</div>

Thanks @hotNipi nice trick 🤩:

> [@Reduced Line Spacing](https://discourse.nodered.org/t/reduced-line-spacing/46346/5):
>
> But best would be to have full control over those lines so create text lines with spans and give them classes so you can style them with CSS in one place. Makes life way easier. [{"id":"510773b5.7aed1c","type":"ui\_text","z":"c0ddb509.b04f48","group":"93fae10c.09faa","order":6,"width":0,"height":0,"name":"","label":"Label is here","format":"\<span class=\"firstline\"\>text first line\</span\>\<br\>\<span class=\"secondline\"\>text second line\</span\>","layout":"row-spread","x":480,"y":1540,"wires":[]},{"…

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [16 June 2021 08:01 UTC](https://discourse.nodered.org/t/why-use-of-w3-css-change-text-font/46515/4 "2021-06-16T08:01:22Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.