Convert HTML with CSS to HTML with in line style

Question

I've been tasked with reproducing the look and feel of an intranet site in SharePoint, at first I was thinking no problem just mod a Master page and voila.

The problem occurred when I opened the source of the site and saw that they are using 12 disparate CSS files that override each other, and are written in the worst way possible.

My question is is there a tool that can take the mess and generate the resulting HTML so I don't have to manually.

Base.css for example sets BODY width to 90%

custom.css then sets it to 960px !important

Mod.css lastly tries to set it to 100%

I would need it to look at this and generate BODY with the style to set the width to 960px

This is impossible unless you make every tag a <div> or something; there's no way you can tell which tag to generate from a CSS selector that isn't a tag. There is a program called CSSTidy that will clean up your CSS for you by removing duplicate/overridden selectors and whatnot — Bojangles
– Bojangles, Commented Oct 17, 2013 at 12:04
Why not add the CSS files since the task is to reproduce it. — putvande
– putvande, Commented Oct 17, 2013 at 12:08

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

You can do this using chrome's developer tools: Right click and inspect the element and then click on the computed tab on the far right top corner .

enter image description here

It will give you the styling that the element has after all the overrides and such.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 17, 2013 at 12:06

Patsy Issa

11.3k5 gold badges57 silver badges76 bronze badges

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

Comments

Haroldo_OK · Accepted Answer · 2013-10-17 12:06:48Z

0

As a starting point, you coud use window.getComputedStyle() for obtaining such information.

answered Oct 17, 2013 at 12:06

Haroldo_OK

7,3033 gold badges50 silver badges86 bronze badges

Comments

J D · Accepted Answer · 2013-10-17 12:14:59Z

0

Have a look at: https://code.google.com/p/instyle/

It seems like it does what you need.

answered Oct 17, 2013 at 12:14

J D

1,8182 gold badges20 silver badges20 bronze badges

Collectives™ on Stack Overflow

Convert HTML with CSS to HTML with in line style

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related