Moving CSS rules from a CSS file to inline attributes The goal is to take CSS rules from a regular CSS file and apply them to their respective targets in an HTML file, but by placing the rules in the style="" attribute (using the &lt;style&gt; tag would be too simple) and removing the class="" and id="" attributes.

Rules:


Only ids #id and classes .class selectors must be supported, without more complex rules (parent selector #a #b or multiple classes .a.b, etc.)
Reducing rules is not required, for example the rules #a{color:red} .b{color:blue} applied to &lt;div id="a" class="b"&gt;&lt;/div&gt; can output &lt;div style="color:blue;color:red;"&gt;&lt;/div&gt; and the browser will only use the last rule (hereby red)
The paths to input files can be transmitted by command line arguments or hard-coded in the script/program
You can't call an external library, you can only include classes or functions built in the language (or from another language if needed)
Standard “loopholes” are forbidden
You program must produce the expected result but also works with other input files (to avoid hard-coded solution)
The output does not need to be saved to any file
Shortest code wins


Inputs:

CSS file

#h1 {color:Red;}
#bigger {font-size:1.1em;}
.code {font-family:Monospace;}
.golf {background-color:LightGreen;}


Only ids and classes are used in order to keep it simple.

HTML file

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;&lt;title&gt;Hello World!&lt;/title&gt;&lt;/head&gt;
&lt;body&gt;
&lt;h1 id="h1"&gt;Hello World!&lt;/h1&gt;
&lt;ol&gt;
    &lt;li class="code"&gt;Code&lt;/li&gt;
    &lt;li id="bigger" class="golf"&gt;Golf&lt;/li&gt;
    &lt;li class="code golf"&gt;Code golf&lt;/li&gt;
&lt;/ol&gt;
&lt;/body&gt;
&lt;/html&gt;


Expected output:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;&lt;title&gt;Hello World!&lt;/title&gt;&lt;/head&gt;
&lt;body&gt;
&lt;h1 style="color:Red"&gt;Hello World!&lt;/h1&gt;
&lt;ol&gt;
    &lt;li style="font-family:Monospace;"&gt;Code&lt;/li&gt;
    &lt;li style="font-size:1.1em;background-color:LightGreen;"&gt;Golf&lt;/li&gt;
    &lt;li style="font-family:Monospace;background-color:LightGreen;"&gt;Code golf&lt;/li&gt;
&lt;/ol&gt;
&lt;/body&gt;
&lt;/html&gt;


Example on jsfiddle.
Python - 508, 501, 483

The idea is to read all the rules then apply them by using xpath functions, too bad it can't select nodes with multiple classes (I didn't find own to target class="code golf").



Golfed

import sys,xml.etree.ElementTree as E
r=E.parse(sys.argv[2])
def a(e,f):e.set('style',(e.attrib.get('style')or'')+f)
for l in open(sys.argv[1]):
 s=l.replace("\n",'').split(' ');b=s[0];c=s[1][1:-1]
 if(b[:1])=='#':
  for e in r.findall('.//*[@id=\''+b[1:]+'\']'):a(e,c);e.attrib.pop('id')
 else:
  for e in r.findall('.//*[@class]'):
   d=e.attrib.get('class').split(' ')
   if b[1:]in d:
    a(e,c);e.set('class',' '.join(d[1:]))
    if len(d) == 1: e.attrib.pop('class')
E.dump(r)


Usage

python script.py input.css input.html

Ungolfed code

import sys, xml.etree.ElementTree as ET
root = ET.parse(sys.argv[2])

# append rules to style="" attribute
def a(e,f):
    e.set('style',(e.attrib.get('style')or'') + f)

# CSS file
for l in open(sys.argv[1]):
    split = l.replace("\n", '').split(' ')
    selector = split[0]
    rules = split[1][1:-1]

    # #id
    if (b[0:1]) == '#':
        for e in root.findall('.//*[@id=\''+selector[1:]+'\']'):
            a(e,rules)
            # remove id
            e.attrib.pop('id')
    # .class
    else:
        for e in root.findall('.//*[@class]'):
            d=e.attrib.get('class').split(' ')
            if selector[1:] in d:
                a(e,rules)
                e.set('class', ' '.join(d[1:]))
                # remove class
                if len(d) == 1:
                    e.attrib.pop('class')

ET.dump(root)