Convert Internal Stylesheet to Inline CSS

css - converting from an external style sheet to inline; not sure where some dropdown styles go

The fast solution, put all your CSS inside the HTML not inline but in Style tags and remove the styles from the style sheet file:

<style>
  .dropbtn
{
   display: inline-block;
   color: white;
   text-align: left;
   padding: 8px 16px;
   text-decoration: none;
}
.dropdown:hover .dropbtn
{
   background-color: #111;
}
li.dropdown
{
   display: inline-block;
}
.dropdown-content
{
   display: none;
   position: absolute;
   background-color: navy;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a
{
   color: white;
   padding: 8px 16px;
   text-decoration: none;
   display: block;
   text-aligh: left;
}
.dropdown-content a:hover
{
   background-color: blue;
}
.dropdown:hover .dropdown-content
{
   display: block;
}
</style>

<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden;
   background-color: navy;" >
  <li class="dropdown" style="float:left;">
    <a href="http://example.com/first.html" class="dropbtn">
      First Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/1st1st.html">1st pulldown, 1st item</a>
      </div>
    </li>
  <li class="dropdown" style="float:left;">
    <a href="http://example.com/second.html" class="dropbtn">
      Second Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/2nd1st.html">2nd pulldown, 1st item</a>
      </div>
    </li>
  <li class="dropdown" style="float:left;">
    <a href="http://example.com/fourth.html" class="dropbtn">
      Fourth Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/4th1st.html">4th pulldown, 1st item</a>
      </div>
    </li>
  <li style="float:right" class="dropdown">
    <a href="http://example.com/fifth.html" class="dropbtn">
      Fifth Pulldown</a>
      <div class="dropdown-content">
      <a href="http://example.com/5th1st.html">5th pulldown, 1st item</a>
      </div>
    </li>
</ul>

The other solution that I like to use is Mailchimp CSS Inline tool. It takes your style sheet and puts all the CSS styles inline automatically. You just remove the CSS styles from your stylesheet and then include the style sheet with the remaining css styles as usual. I put your CSS and HTML in there and this is the output. Let me know if any of the two worked.

<ul style="list-style-type: none; margin: 0; padding: 0; overflow: hidden;
   background-color: navy;">
  <li class="dropdown" style="float: left;display: inline-block;">
    <a href="http://example.com/first.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
      First Pulldown</a>
      <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
      <a href="http://example.com/1st1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">1st pulldown, 1st item</a>
      </div>
    </li>
  <li class="dropdown" style="float: left;display: inline-block;">
    <a href="http://example.com/second.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
      Second Pulldown</a>
      <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
      <a href="http://example.com/2nd1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">2nd pulldown, 1st item</a>
      </div>
    </li>
  <li class="dropdown" style="float: left;display: inline-block;">
    <a href="http://example.com/fourth.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
      Fourth Pulldown</a>
      <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
      <a href="http://example.com/4th1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">4th pulldown, 1st item</a>
      </div>
    </li>
  <li style="float: right;display: inline-block;" class="dropdown">
    <a href="http://example.com/fifth.html" class="dropbtn" style="display: inline-block;color: white;text-align: left;padding: 8px 16px;text-decoration: none;">
      Fifth Pulldown</a>
      <div class="dropdown-content" style="display: none;position: absolute;background-color: navy;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);">
      <a href="http://example.com/5th1st.html" style="color: white;padding: 8px 16px;text-decoration: none;display: block;text-aligh: left;">5th pulldown, 1st item</a>
      </div>
    </li>
</ul>

You can try the CSS Inline tool here: https://templates.mailchimp.com/resources/inline-css/

Convert internal stylesheet to inline css

select all the div that has the column class and remove class column if it is there then apply inline CSS using jquery.

$(document).ready(function(){
var obj = $(".column");
$(obj).each(function(){
    $(this).removeClass("column");//not really necessary
    $(this).css({"font-size":"13px","font-family":"arial,helvetica, verdana, sans-serif",          
            "font-weight":"normal",
            "color":"rgb(221, 221, 221)",
            "font-weight":"normal"});
});
});

Working Fiddle

CSS style to inline style via JavaScript

You can do something like this:

function applyStyle(el) {
    s = getComputedStyle(el);

    for (let key in s) {
        let prop = key.replace(/\-([a-z])/g, v => v[1].toUpperCase());
        el.style[prop] = s[key];
    }
}

let x = document.getElementById('my-id');
applyStyle(x);

Where x is the element you want to apply the style to.

Basically this function gets the computed style of the element and then copies each property (like padding, background, color, etc.) to the inline style of the element.

I don't know why you need to do this, but it's a really dirty approach in my opinion. I would personally advise against it.

Convert inline styles to css rules

Try http://extractcss.com, but as @Tushar pointed out, the yellow div won't work.

Try https://github.com/jonkemp/extract-css too, which looks promising.

.NET convert external CSS to inline CSS

Premailer.Net should do the trick it's written in C#

C# .Net library, that moves your stylesheets to inline style
attributes, for maximum compatibility with E-mail clients.

Here is the Git repo:
https://github.com/milkshakesoftware/PreMailer.Net:

How to convert external css properties to inline property?

There are a lot of tools for this task. Here are just some of them:

Online

http://premailer.dialect.ca
http://zurb.com/ink/inliner.php
http://inlinestyler.torchboxapps.com/

Grunt

https://www.npmjs.com/package/grunt-inline-css

Gulp

https://www.npmjs.com/package/gulp-inline-css