How To Convert Inline CSS Style To External CSS

Posted By: Poketors - August 08, 2013

CSS (Cascading Style Sheet) is declared to maintain the formatting, layout and appearance of Web page elements. You can include CSS declarations in multiple locations in an HTML file, including inline, internally and optionally in an external file.

1. Open a new file in a text editor and save it with a ".css" extension -- for example, "blogpage.css" or any other name you prefer. Add a link to your style sheet within the head section of your HTML page. Open the page and look for the closing "</head>" .

2. Append the following before it:

<link rel="stylesheet" type="text/css" href="blogpage.css" />

Alter the "href" attribute value if you saved your file with a different name.

3. Search for the CSS declarations you want to move to your external style sheet. If the declarations are inline like the below example where opening tags of elements :

4. Now select the text listed between the quotation marks as the "style" attribute, copy it and paste it into your CSS file. Delete the entire style attribute from the HTML element when you have it copied into your style sheet.

5. Enter ID and class attributes to your HTML elements to identify them in the CSS file. Alter your opening "div" tag again, this time including an ID attribute:

6. Now add block for identifying the class or ID you chose. For the ID attribute, use the below syntax:

#content
{ color:#FF0000; background-color:#000000; }
If you used a class attribute, use the following:
.content
{ color:#FH0000; background-color:#333000; }

7. Add any CSS code from an internal style sheet into your external file. It will look like following :

<style type="text/css">
div {font-weight:bold;}
</style>

8. Copy the code between the "style" tags and paste it into your CSS file. Delete the entire "style" area from your HTML when it has been successfully copied. Save your file and you are don with moving inline CSS to external CSS.