# mjml-head-style-node6

> mjml-head-style

Latest version **4.9.3** (published 2021-03-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install mjml-head-style-node6
pnpm add mjml-head-style-node6
yarn add mjml-head-style-node6
bun add mjml-head-style-node6
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.9.3 |
| Published | 2021-03-25 |
| First published | 2021-03-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 5.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | randriese |

## Links

- npm: https://www.npmjs.com/package/mjml-head-style-node6
- Repository: https://github.com/randriese/mjml
- Homepage: https://mjml.io
- Issues: https://github.com/randriese/mjml/issues
- npm.io page: https://npm.io/package/mjml-head-style-node6

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.13.10
- [mjml-core-node6](https://npm.io/package/mjml-core-node6.md) 4.9.3

## Recent versions

- 4.9.3 (latest) — 2021-03-25
- 4.9.2 — 2021-03-25
- 4.9.1 — 2021-03-25

## README

## mj-style

This tag allows you to set CSS styles that will be applied to the <b>HTML</b> in your MJML document as well as the HTML outputted. The CSS styles will be added to the head of the rendered HTML by default, but can also be inlined by using the `inline="inline"` attribute.

Here is an example showing the use in combination with the `css-class` attribute, which is supported by all body components.

```xml
<mjml>
  <mj-head>
    <mj-attributes>
      <mj-class name="mjclass" color="green" font-size="30px" />
    </mj-attributes>
    <mj-style inline="inline">
      .blue-text div {
        color: blue !important;
      }
    </mj-style>
    <mj-style>
      .red-text div {
        color: red !important;
        text-decoration: underline !important;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text css-class="red-text">I'm red and underlined</mj-text>
        <mj-text css-class="blue-text">I'm blue because of inline</mj-text>
        <mj-text mj-class="mjclass">I'm green</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>
```

<p align="center">
  <a href="https://mjml.io/try-it-live/components/head-style">
    <img width="100px" src="https://mjml.io/assets/img/svg/TRYITLIVE.svg" alt="try it live" />
  </a>
</p>

attribute            | unit          | description                         | default value
---------------------|---------------|-------------------------------------|---------------
inline               | string        | set to "inline" to inline styles    | n/a

<aside class="notice">
  Mjml generates multiple html elements from a single mjml element. For optimal flexibility, the `css-class` will be applied to the most outer html element, so if you want to target a specific sub-element with a css selector, you may need to look at the generated html to see which exact selector you need.
</aside>

---
_Source: https://npm.io/package/mjml-head-style-node6 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._