Scribd Logo
Upload

Welcome to Scribd!

  • Css Program

    Uploaded by

    Sumalatha Tharan
    11 views11 pages

    Original Title

    css program

    Copyright

    © © All Rights Reserved

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views11 pages

    Css Program

    Uploaded by

    Sumalatha Tharan

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 11

    Program#1 .

    TEXT Properties
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .fontProperties
    {
    /* Font properties */
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    font-style: italic;
    text-decoration: underline;
    text-transform: uppercase;
    color: #333;
    }
    .textProperties
    {
    /* Text alignment */
    text-align: center;

    /* Letter spacing and line height */


    letter-spacing: 2px;
    line-height: 1.5;

    /* Text shadow */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    /* Word spacing */
    word-spacing: 5px;
    }
    </style>
    </head>
    <body>
    <h1 class="textProperties">
    This is a sample text demonstrating various font properties in CSS.</h1>

    <h2 class="fontProperties">
    This is the sample text demonstrating various text properties in CSS</h2>

    </body>
    </html>

    Pgm # 2 box properties

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    /* CSS for box properties */
    .box {
    width: 300px;
    height: 200px;
    background-color: cyan;
    border: 6px double blue;
    border-radius: 10px;
    padding: 20px;
    margin: 20px;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    transition: transform 0.5s ease-in-out;
    color:red
    }

    .box:hover {
    transform: scale(1.05);
    box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.5);
    }

    h2 {
    color: #333;
    margin-bottom: 10px;
    }

    p{
    color: #555;
    }
    </style>
    </head>
    <body>
    <div class="box">
    <h2>This is a Box</h2>
    <p>It demonstrates various box properties.</p>
    </div>
    </body>
    </html>

    Pgm#3. Sector Example


    <!DOCTYPE html>
    <html>
    <head>
    <style>
    /* CSS for class, ID, hover, visibility, and active */
    .button {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    }

    #hiddenText {
    display: none;
    margin-top: 10px;
    padding: 15px;
    background-color: #f1c40f;
    color: #333;
    border-radius: 5px;
    }

    /* Style for visited link */


    a:visited {
    color:purple;
    }
    .button:hover {
    background-color:cyan;
    }
    .button:active {
    background-color: red;
    }
    .button:hover + #hiddenText {
    display: block;
    }
    </style>
    </head>
    <body>
    <a href="https://example.com" class="button">Visit Example.com</a>
    <div id="hiddenText">You found the hidden text!</div>
    </body>
    </html>
    Pgm4# list program
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    /* CSS for list */
    ul {
    list-style-type: circle; /* Type of bullet point */
    margin-left: 20px; /* Indentation for the list */
    }

    ol.upper-roman {
    list-style-type: upper-roman; /* Roman numerals (uppercase) for ordered list */
    }

    ol.lower-alpha {
    list-style-type: lower-alpha; /* Lowercase alphabetical for ordered list */
    }

    ul.square {
    list-style-type: square; /* Square bullet points for unordered list */
    }

    /* Styling for list items */


    li {
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 5px;
    background-color: #f0f0f0;
    }
    </style>
    </head>
    <body>
    <h2>Types of Lists</h2>

    <h3>Unordered List (Circle)</h3>


    <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ul>

    <h3>Ordered List (Upper Roman Numerals)</h3>


    <ol class="upper-roman">
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    </ol>

    <h3>Ordered List (Lowercase Alphabets)</h3>


    <ol class="lower-alpha">
    <li>Alpha</li>
    <li>Beta</li>
    <li>Gamma</li>
    </ol>

    <h3>Unordered List (Square)</h3>


    <ul class="square">
    <li>Item A</li>
    <li>Item B</li>
    <li>Item C</li>
    </ul>
    </body>
    </html>

    Prg# 5 using form element


    <!DOCTYPE html>
    <html>
    <head>
    <title>Form Example</title>
    </head>
    <body>
    <h2>Sample Form</h2>
    <form action="/submit_form" method="post">
    <label for="username">Username:</label><br>
    <input type="text" id="username" name="username"><br><br>

    <label for="password">Password:</label><br>
    <input type="password" id="password" name="password"><br><br>

    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email"><br><br>

    <label for="age">Age:</label><br>
    <input type="number" id="age" name="age"><br><br>

    <label for="gender">Gender:</label><br>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">Male</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Female</label><br><br>

    <label for="newsletter">Subscribe to newsletter:</label><br>


    <input type="checkbox" id="newsletter" name="newsletter"><br><br>

    <label for="comments">Comments:</label><br>
    <textarea id="comments" name="comments" rows="4"
    cols="40"></textarea><br><br>

    <input type="submit" value="Submit">


    </form>
    </body>
    </html>

    Pgm#6 image
    <!DOCTYPE html>
    <html>
    <head>
    <title>Background Image Example</title>
    <style>
    body {
    background-image: url('images.jpg'); /* Replace with your image URL */
    background-size: cover; /* Cover the entire background */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Prevent image from repeating */
    height: 100vh; /* Full viewport height */
    margin: 0; /* Remove default margin */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: Arial, sans-serif;
    text-align: center;
    }

    .content {
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background for
    readability */
    padding: 20px;
    border-radius: 10px;
    }
    </style>
    </head>
    <body>
    <div class="content">
    <h1>Welcome to Background Image Example</h1>
    <p>This is a demonstration of setting a background image using CSS
    properties.</p>
    </div>
    </body>
    </html>

    You might also like