CSS Tutorials

adplus-dvertising
Types of CSS
Previous Home Next

The three types of stylesheets

  1. Internal: Internal style sheet defined within the head part of a page. Use an internal stylesheet when you want an HTML document to have a unique style. An internal stylesheet is defined using the <style> tag and goes in the head section of an HTML document. The <style> tag specifies the content type of a stylesheet with its type attribute which should be set to "text/css".

  2. Code

    <html>
    <head>
    <style type="text/css">
    p {   
    font-family: verdana, arial, sans-serif; 
    background-color:#00FF99;
    } 
    </style>
    </head>
    <body>
    <p> This is content and its style is defined within the internal style sheet</p>
    </body>
    </html>
    </head>
    <body>
    </body>
    </html>
    

    Output

  3. Inline: Inline stylesheets are declared within individual tags and affect those tags only. Inline stylesheets are declared with the style attribute.

  4. Code

    <html>
    <head>
    <style type="text/css">
    p {   
    } 
    </style>
    </head>
    <body>
    <p style="color:red">This text color will be RED</p>
    </body>
    </html>
    </head>
    <body>
    </body>
    </html>
    

    Output

  5. External: External style sheet defined in a separate, hence external, file. With a link to this CSS external filey placed in the <HEAD> Section of your page. These styles are kept separately and called or linked from the required page. This is the syntax followed for linking a external style sheet.

    Example: Create Regisrtation form with the help of external style sheet

    CSS code

    .form {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    cursor:move;
    background:#FFCCFF;
    height:80%;
    width:25%;
    text-align:center;
    }
    

    Html Code

    <html>
    <head>
    <link href="/r4r_advance/css/regis.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div class="form">
    <h1><u>Registration Form</u></h1>
    <table>
    <tr>
    <td align="left">First Name</td> 
    <td><input type="text" name="firstname" /></td></tr>
    <tr><td align="left">Middle Name</td>
    <td><input type="text" name="lastname"/></td></tr>
    <tr><td align="left">Last Name</td>
    <td><input type="text" name="lastname"/></td></tr>
    <tr><td align="left">Email ID</td>
    <td><input type="text" name="emailid"/></td></tr>
    <tr><td align="left">Password</td>
    <td><input type="password" size="20" name="password"/></td></tr>
    <tr><td align="left">Date Of Birth</td>
    <td><input type="text" size="2" name="date" />
    <input type="text" size="2" name="month"/>
    <input type="text" size="4" name="year" /></td>
    </tr>
    <tr><td align="left">Gender</td>
    <td>Male<input type="radio" name="male" />
    Female<input type="radio" name="female" /></td></tr>
    <tr><td align="left">Nationality</td>
    <td><input type="text" size="20" name="nationality"/></td></tr>
    <tr><td align="left">City</td>
    <td><input type="text" size="20" name="city" /></td></tr>
    <tr><td align="left">Zip Code</td>
    <td><input type="text" size="20" name="zipcode" /></td></tr>
    </table>
    </div>
    <div class="form">
    <input type="button" value="Submit" />
    <input type="button" value="Reset" />
    </div>
    </body>
    </html>
    

    Output

    Previous Home Next