MCQs Test!! VB Basic Test !! Essentials of VB !! Creating User Services !! function !! Anatomy !! GK March-2019 !! DATA TYPES IN JAVA !! Classes ,Constructor ,Methods,Inheritance !! Ecology-I !! Biology 2019 !! Gk april 2019 !! Biology (living world) !! Plant anatomy !! CELL STRUCTURES AND FUNCTION !! General biology !! Human physiology !! Data structure !! Ecology-II !! GK TEST !! Reproduction in plants !! Human reproduction !! The ABC of C !! Operating system set1 !! Operating system set2 !! Gk and current affairs !! Animal kingdom !! Number system !! Animal kingdom-II !! Gk TEST-III !! Number series !! Microorganisms !! Interview question in c !! Time and Work !! Percentage !! General history !! Average !! Cells !! Locomotion and Movement !! paging !! Bacteriology !! Page replacement policy !! Secondary memory and Disk scheduling !! Introduction of Nervous System and neurons !! Plant harmones !! Transport and Mineral Nutrition in Plants !! Neurotransmitters !! Modern Indian History !! Photosynthesis in Plants !! Modern Indian History-II !! Plant respiration !! Environment & Biodiversity !! Environment & Biodiversity - II !! Algae, Bryophytes, Pteridophytes !! Area !! Cricket !! Days of the Year (India and the World) !! Plant Pathology - I !! Indian Transport System !! Plant Pathology - II !! Aptitude !! Biology !! Botany !! C language !! Computer Science !! Core Java !! Gate !! GK !! Mysql !! Operating system !! Physics !! VB-Visual Basic !! Zoology

CSS Tutorials

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