# Perspective - Markdown component with inline styles

**URL:** <https://forum.inductiveautomation.com/t/perspective-markdown-component-with-inline-styles/48924>\
**Category:** Ignition\
**Created:** [July 17, 2021, 3:43pm UTC](https://forum.inductiveautomation.com/t/perspective-markdown-component-with-inline-styles/48924 "2021-07-17T15:43:26Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [July 17, 2021, 3:43pm UTC](https://forum.inductiveautomation.com/t/perspective-markdown-component-with-inline-styles/48924/1 "2021-07-17T15:43:26Z")

</div>

How do I apply inline styles to text in the Markdown component?

I’ve tried this as my source:

```auto
&bull; <span class="psc-Style1">This is my text!</span><p>&bull; ...

```

but it results in this:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/6/b6b686a33475a6167d016be84700a77fab1433bd.png)

The span gets closed automatically it seems by the component straight after it’s opened so it doesn’t encapsulate the text 😕

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [July 19, 2021, 7:46am UTC](https://forum.inductiveautomation.com/t/perspective-markdown-component-with-inline-styles/48924/2 "2021-07-19T07:46:21Z")

</div>

> [@nminchin](#):
>
> `<span class="psc-Style1">This is my text!</span>`

seems like it only works with `<p>`  
try changing span to p

---

<div class="post-metadata">

**Author:** ![eberly88](https://avatars.discourse-cdn.com/v4/letter/e/3da27b/32.png) [@eberly88](https://forum.inductiveautomation.com/u/eberly88)\
**Post date:** [August 27, 2021, 5:01am UTC](https://forum.inductiveautomation.com/t/perspective-markdown-component-with-inline-styles/48924/3 "2021-08-27T05:01:48Z")

</div>

You aren’t using true inline CSS. If you look at the global CSS folder - `var(--label)` is overwriting the body.

If you want to add true inline CSS to your markup component then you need to use the style attribute like this…

`<p><span style="color:red;">this is the text I want to change color!</span>`

You could also try adding the `<style>` element in the `<head>` section of the mark-up acting as internal css? But the first suggestion should work fine because I just did it myself.

---

<div class="post-metadata">

**Author:** ![eberly88](https://avatars.discourse-cdn.com/v4/letter/e/3da27b/32.png) [@eberly88](https://forum.inductiveautomation.com/u/eberly88)\
**Post date:** [August 27, 2021, 5:10am UTC](https://forum.inductiveautomation.com/t/perspective-markdown-component-with-inline-styles/48924/4 "2021-08-27T05:10:45Z")

</div>

I added CSS to the `<header>` section of the markup and the span held the style.

[https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/f/dfe10a4335a1f7967cf06c688ecdcda92228fdc2.mp4](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/f/dfe10a4335a1f7967cf06c688ecdcda92228fdc2.mp4)

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 24, 2025, 4:35am UTC](https://forum.inductiveautomation.com/t/perspective-markdown-component-with-inline-styles/48924/5 "2025-11-24T04:35:15Z")

</div>

Just coming back to this one, you need to add the `<HTML>` tag at the start of the `source` for this to work.

e.g.

source=

```python
<html>Hello <span style="font-weight: bold; font-size: 1.5rem;">World<span style="color: red;">!</span> It's </span>me!

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/f/1f65ad00befd53cd79c806823e014150eabfc7ee.png)