Techcss
Untitled Document

The ways of inserting CSS

The CSS can connect the HTML document in three ways


Inline Styles

This is an instant effect practice of CSS coding. Using this technique you can change only the style of concerned tag element.

Its not a time saving way and tough to maintain or update a web page.

Example:

<h2 style="background-color:#FFCC00; border:2px dashed #FF6633">Inline CSS code example</h2>
<p style="color:#999900">This paragraph is styled by inline css code.</p>

Output:

Inline CSS code example

This paragraph is styled by inline css code.


Internal CSS style

This technique of coding CSS should apply when you want to define the styles and layout of a single page.

In this technique the CSS code appear in <style> tag under head section.

    <head>
    <style>
     body{
        font-family: Verdana, Arial, Helvetica, sans-serif;		  
        font-size: 14px;
        background-color:#ffffff;
        background-image:url(../image/bg2.gif)
        }
      h4{
      	color:#0066CC;
        }
      p{
      	font-size: 12px;
        }
    </style>
    </head>
   
    

External style sheet

This is the best way to create and maintain the layout of a total web site. So you can style multiple pages attaching only one external style sheet.

The steps of coding external CSS:

  1. Creating an individual style sheet having the ".css" extension
  2. Writing the codes for styling the web elements in that style sheet.
  3. Linking that external sheet(*.css) with the main web documents by <link> tag.

The <link> tag must go under the head section of the web document.

Linking the external sheet

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


Using all the way at a time.

We can use all the CSS technique at a time to style some elements individually.