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 <span> inside a <a>? — bjornmeansbear
– bjornmeansbear, Commented Sep 14, 2017 at 1: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 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. — Rob
– Rob, Commented Sep 14, 2017 at 3:05
You can explore UnCSS and other critical CSS tools, (P)React / VueJS and other CSS in JS (with server-side rendering?), Atomic CSS, emogrifier and CssToInlineStyles (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
– FelipeAls, Commented Sep 14, 2017 at 9:35
Does this answer your question? Convert internal stylesheet to inline css — Clément
– Clément, Commented Jul 17, 2021 at 23:37

rjustin · Accepted Answer · 2017-09-14 03:08:35Z

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, 2017 at 3:08

answered Sep 14, 2017 at 1:53

rjustin

1,43710 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rob Over a year ago

That isn't what he wants to do. He specifically states "inline" and as "style="

Jasper Jalago · Accepted Answer · 2017-09-14 03:59:36Z

3

are you looking for something like this?

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

answered Sep 14, 2017 at 3:59

Jasper Jalago

312 bronze badges

Comments

bjornmeansbear · Accepted Answer · 2017-09-14 01:57:26Z

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.

user8556290 · Accepted Answer · 2017-09-14 02:02:27Z

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, 2017 at 2:02

user8556290

1 Comment

vikvincer Over a year ago

You can use class if you want to use it on multiple buttons $(".button_class_name")

kta · Accepted Answer · 2023-09-04 07:28:40Z

0

Use a task automation tool or any server-side programming language. We may need to implement in either way.

Declare some variables.

my_button = '''
border: 0px;
  background: none;
  position: fixed;
  bottom: 23px;
  right: 28px;
'''

and use pattern matching to replace.

html = '''

<input type='button' style='$my_button'>

'''

edited Sep 4, 2023 at 7:28

answered Sep 4, 2023 at 7:08

kta

20.3k7 gold badges67 silver badges48 bronze badges

Comments

Amit Joshi · Accepted Answer · 2017-09-14 07:46:03Z

-2

You can use this if you have multiple line css:

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

edited Sep 14, 2017 at 7:46

Amit Joshi

16.6k23 gold badges88 silver badges154 bronze badges

answered Sep 14, 2017 at 7:23

vikvincer

6496 silver badges10 bronze badges

Collectives™ on Stack Overflow

Convert CSS to inline CSS?

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related