Scribd Logo
Upload

Welcome to Scribd!

  • Assignment 13 Iwt

    Uploaded by

    Nancy Kumari
    3 views6 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    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 PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views6 pages

    Assignment 13 Iwt

    Uploaded by

    Nancy Kumari

    Copyright:

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

    ASSIGNMENT- 13

    1. Write a CSS rule that hides a paragraph (use hidden property).

    <!DOCTYPE html>
    <html>
    <head>
    <title>Document</title>
    <style>
    .a{
    visibility: hidden;
    }
    </style>
    </head>
    <body>
    <p>HELLO WELCOME TO IWT CLASS</p>
    <p class="a">ITER</p>
    </body>
    </html>

    OUTPUT-

    2. Write a CSS rules to float an image to left of a paragraph.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Document</title>
    <style>
    img{
    float: left;
    height:100px;
    width: 100px;
    }
    </style>
    </head>
    <body>
    <p>HELLO WELCOME TO IWT CLASS</p>
    <img src="download.jpg" alt="New">
    </body>
    </html>

    OUTPUT-
    3. Write a CSS rule to create transparent image.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Document</title>
    <style>
    img{
    opacity: 0.1;
    height:100px;
    width: 100px;
    }
    </style>
    </head>
    <body>
    <img src="download.jpg" alt="New">
    </body>
    </html>

    OUTPUT-

    4. Create padded (increased width) input textbox.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Document</title>
    <style>
    input{
    padding-left: 50px;
    }
    </style>
    </head>
    <body>
    <input type="text">Text here
    </body>
    </html>

    OUTPUT-

    5. Create a search textbox with an image as background.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Document</title>
    <style>
    input{
    background-image: url(download.jpg);
    width: 200px;
    opacity: 0.8;
    background-size: 100% 100%;
    </style>
    </head>
    <body>
    <input type="text">Text here
    </body>
    </html>

    OUTPUT-

    6. Write a CSS rule to set an image as a border for a paragraph.

    <html>
    <head>
    <title>Document</title>
    <style>
    p{
    border: 5px solid transparent;
    border-image-source: url(download.jpg);
    border-image-slice: 10;

    }
    </style>
    </head>
    <body>
    <p>KEEP SMILING</p>
    </body>
    </html>

    OUTPUT-

    7. Write a CSS rule to set multiple background images.

    <html>
    <head>
    <title> Assignment13</title>
    <style>
    body{
    background-image: url("download1.jpg"),url("download.jpg");
    background-position: bottom right,left top;
    background-repeat: no-repeat,no-repeat;
    padding: 15px;
    background-size: contain;
    }
    </style>
    </head>
    <body>
    </body>
    </html>

    OUTPUT-
    8. Write a CSS rule to scale a background image using “contain” and “cover”.
    <html>

    <head>
    <title> Assignment13</title>
    <style>
    body{
    background-image: url("download1.jpg");
    background-position: bottom right;
    background-repeat: no-repeat;
    padding: 15px;
    background-size: contain;
    }
    </style>
    </head>
    <body>
    <h1>Background image - "contain"</h1>
    </body>
    </html>

    OUTPUT-

    You might also like