Convert CSS to inline CSS?

Question

I found this awesome CSS code and what to use it on my website. But because I have to generate a lot of buttons with PHP I need to write the CSS inline as style="..." for the button. My question now is, how can I convert that to inline CSS?

I already googled for an converter but sadly I didn't find anything.

do you mean how do you take the SCSS and make it real CSS? is there no way to generate classes on the buttons so you don't have to do all of that as inline styles? Would you be able to replicate the HTML in the same way? a `` inside a ``? — bjornmeansbear, Sep 14 '17 at 01:54
SO does not allow us to recommend software. Also, on SO, you are expected to try to **write the code yourself**. After **[doing more research](//meta.stackoverflow.com/questions/261592)** if you have a problem you can **post what you've tried** with a **clear explanation of what isn't working** and providing a **[Minimal, Complete, and Verifiable example](//stackoverflow.com/help/mcve)**. — Rob, Sep 14 '17 at 03:05
You can explore UnCSS and other _critical CSS_ tools, (P)React / VueJS and other *CSS in JS* (with server-side rendering?), [Atomic CSS](https://acss.io), [emogrifier](https://www.myintervals.com/emogrifier.php) and [CssToInlineStyles](https://github.com/tijsverkoyen/CssToInlineStyles/) ([C#](http://chrispebble.com/inlining-a-css-stylesheet-with-c/)). /!\ Neither MQ nor hover/focus and :pseudo styles in a style attribute (Atomic CSS has a solution for that by using classes). Though I'm curious what is the problem with the Pen you linked to that would **need** inline styles? — FelipeAls, Sep 14 '17 at 09:35
Does this answer your question? [Convert internal stylesheet to inline css](https://stackoverflow.com/questions/20486897/convert-internal-stylesheet-to-inline-css) — Clément, Jul 17 '21 at 23:37

rjustin · Answer 1 · 2017-09-14T03:08:35.890

3

You could put it at the top of your file surrounded by style tags.

It would then affect just that file given the associated classes were on the elements meant to be affected.

<style>
//css code goes here
</style>

EDIT:

If you specifically want it to be inline and dont want to type it manually then you would either have to find or write a tool that will add run a post process on it. Writing this correctly would be a challenge but Gulp might be your friend.

edited Sep 14 '17 at 03:08

answered Sep 14 '17 at 01:53

rjustin

1,399
8
19

1

That isn't what he wants to do. He specifically states "inline" and as "style=" – Rob Sep 14 '17 at 03:03

score 3 · Answer 2 · answered Sep 14 '17 at 03:59

3

are you looking for something like this?

<button style="background: blue; color: black; font-size: 15px">Im a button</button>

answered Sep 14 '17 at 03:59

Jasper Jalago

31
2

score 1 · Answer 3 · answered Sep 14 '17 at 01:57

The CSS would look like this:

.button {
  background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 100%);
  position: relative;
  padding: 3px;
  display: inline-block;
  border-radius: 7px;
}

.button span {
  display: inline-block;
  background: #191919;
  color: white;
  text-transform: uppercase;
  padding: 2rem 5rem;
  border-radius: 5px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 800;
  font-size: 3rem;
}

which means the html with inline styles would be:

<a href="#" style="background-image: linear-gradient(90deg, #00C0FF 0%, #FFCF00 49%, #FC4F4F 100%);position: relative;padding: 3px;display: inline-block;border-radius: 7px;">
    <span style='display: inline-block;background: #191919;color: white;text-transform: uppercase;padding: 2rem 5rem;border-radius: 5px;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";font-weight: 800;font-size: 3rem;'>Button</span>
</a>

You'd have to switch the background on the .button span is the right #hex color but that's roughly what you'd need.

score 0 · Answer 4 · answered Sep 14 '17 at 02:02

0

Your can try this as you said using Jquery :

$("button#id_name").css('background-color','red'); //<button id="id_name" ..>
$("input[type='submit']").css("background-color','red');// <input type="submit" .../>
$("a#id_name").css("background-color','red');// <a href="#" id="id_name" ..>

I guess is only for one button, that the reason why i didn't call attribute class.

answered Sep 14 '17 at 02:02

You can use class if you want to use it on multiple buttons $(".button_class_name") – vikvincer Sep 14 '17 at 08:07

score -2 · Answer 5 · edited Sep 14 '17 at 07:46

-2

You can use this if you have multiple line css:

$('#button-id').css({
       'property1': 'value1',
       'property2': 'value2'
});

edited Sep 14 '17 at 07:46

Amit Joshi

15,448
21
77
141

answered Sep 14 '17 at 07:23

vikvincer

639
6
10

Convert CSS to inline CSS?

5 Answers5