Move embedded CSS to a separate CSS file

Question

I want to remove the following from an html page and add it to an existing css sheet. Do I have to do anything special like creating a new .mynewclass or simply remove the <style> tags?

<style>
    <!--
    .rightAlign
    {
       text-align:right;
    }

    .leftPad05em
    {
       padding-left:0.5em;
    }

    .bottomPad05em
    {
       padding-bottom:0.5em;
    }

    .topPad05em
    {
       padding-top:0.5em;
    }

    .topBottomPad1em
    {
       padding:1em 0em 1em 0em;
    }

    .bottomControl
    {
       padding-left:14.5em;
    }
    -->
</style>

Answer 1

add your styles to a external stylesheet for example - default.css

Include these in that stylesheet -

.leftPad05em { padding-left:0.5em; }
.bottomPad05em { padding-bottom:0.5em; }
.topPad05em { padding-top:0.5em; }
.topBottomPad1em { padding:1em 0em 1em 0em; }
.bottomControl { padding-left:14.5em; }

and in your header include this -

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

This is calling the default.css style sheet. Note, href="value" would be where the style sheet is located

Answer 2

If the existing CSS file is already imported in the HTML, then moving the inline CSS from the HTML to the file should work.