How do I convert the external CSS to inline CSS?

Answer 1

Generally thats a bad idea. Inline CSS is much harder to manage and keep organized than a single (or even multiple) external style sheets.

However, if you are dead set on doing that, the general steps to take are as such:

You need to take the CSS from the style sheet, and add the relevant styles to the style attribute of whatever element you are working with. For example, if you had the following HTML and CSS

external.css:

.example_class {

background-color:red;

color:blue;

}

index.html:

<div class="example_class">

blah blah blah content

</div>

Then you need to take the styles from the external style sheet, and add them to the style property of the relevant div. So the HTML would look like:

updated index.html:

<div class="example_class" style="background-color:red; color:blue;">

blah blah blah content

</div>

Notice the semi colons between each different rule:value declaration.

So to summarize, basically you go through each of your rule sets, find the relevant elements from the CSS selector part of the rule set, and add the various style declarations to the "style" attribute of each element.

But to reiterate, I really recommend against this. There ARE times when you need to use inline styles (for example to override some general rules you have for very specific elements) but in general your site will be much more organized and much easier to change if you use external style sheets. As an example, consider the following general rule set:

div {

background-color:#333;

color:#fff;

}

This rule set applies to all divs. If you want to turn this into an inline style, you will need to add those rules to EVERY div you have on the page, IE:

<div style="background-color:#333; color:#fff"> some div with some content </div>

... other html

<div style="background-color:#333; color:#fff"> another div with different content </div>

...even more html

<div style="background-color:#333; color:#fff">a third div with even more content </div>

Already, your code is much less efficient. And considering many pages, even simple ones, generally have quite a few divs, even this example is much smaller than normal. However, where the real problem resides is if you ever want to update or change your site. If you want to make divs have a purple background, instead of the dark grey (#333) color, you would need to go to EVERY div tag on your site, and change the inline property.

If you ever have or plan on working for a client, one of the most common things they do is try to tweak and change the colors of things. With an external style sheet, making these changes for the client can happen in a matter of seconds. However, with the inline styles, suddenly that small change is a huge one, that will take hours.