How to insert css

Css

There are three ways of inserting a style sheet:

Inline style
Internal style sheet
External style sheet

Inline style:

To use inline style, use the style attribute in the relevant tag.

The style attribute can contain any CSS property.

Eg:

<p style="color:blue;margin-left:20px">This is a paragraph.</p>

Internal style sheet:

An internal style sheet should be used when a single document has a unique style.

Define internal styles in the head section of an HTML page:

Eg:

<head>
<style type="text/css">
    table#environment {
        border-collapse: collapse;
        font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
        width: 80%;
    }

    table th 
    {
        background-color: #A7C942;
        color: #FFFFFF;
    }

    table#environment tr.alt td {
        background-color: #EAF2D3;
        color: #000000;
    }
</style>
</head>

<body>

<table id="environment">
<tbody>
    <tr>
    <th width="20%" align="left" valign="top">Variable</th> <th width="80%" align="left" valign="top">Description</th>
    </tr>
    <tr class="alt">
    <td valign="top">ALL_HTTP</td>
    <td valign="top">Returns all HTTP headers sent by the client. Always prefixed with HTTP_ and capitalized</td>
    </tr>
    <tr >
    <td valign="top">ALL_RAW</td>
    <td valign="top">Returns all headers in raw form</td>
    </tr>
    <tr class="alt">
    <td valign="top">APPL_MD_PATH</td>
    <td valign="top">Returns the meta base path for the application for the ISAPI DLL</td>
    </tr>
    <tr>
    <td valign="top">APPL_PHYSICAL_PATH</td>
    <td valign="top">Returns the physical path corresponding to the meta base path</td>
    </tr>
</tbody>
</table>

External style sheet:

An external style sheet is ideal when the style is applied to many pages.

With an external style sheet, you can change the look of an entire Web site by changing one file.

Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

Eg:

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

Eg2:

<head runat="server">
    <title>Test website</title>
    <meta name="robots" content="noindex,nofollow"/>

    <link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
</head>

External style sheet .css file should not contain any html tags.

Eg:

p {margin-left:20px;}
body {background-image:url("images/bgGreen.gif");}

Note: do not leave spaces between the property value and the units, eg: "margin-left:20 px" (instead of "margin-left:20px") will work in IE, but not in Firefox or Opera.

Multiple style sheets:

If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.

Eg: an external style sheet has these properties for the h3 selector:

h3
{
color:red;
}

And an internal style sheet has these properties for the h3 selector:

h3
{
color:green;
}

If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:
color:green;

Multiple styles will cascade into one:

Cascading order:

Styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

Browser default
External style sheet (multiple external style sheets can be referenced inside a single HTML document)
Internal style sheet (in the head section)
Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!