Scribd Logo
Upload

Welcome to Scribd!

  • WT 5

    Uploaded by

    ritu41020
    2 views3 pages

    Original Title

    wt5

    Copyright

    © © All Rights Reserved

    Available Formats

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

    WT 5

    Uploaded by

    ritu41020

    Copyright:

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

    Practical no-5

    AIM:- Create an html file to implement the styles related to text,fonts,links using
    css.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"href="text.css">
    </head>
    <body>
    <h1 class="h1">Heading 1</h1>
    <h2 class="h2">Heading 2</h2>
    <p class="p1">Lorem ipsum dolor, sit amet consectetur adipisicing elit.
    Distinctio autem, fuga voluptatibus, deserunt possimus quibusdam eaque excepturi doloremque porro
    sint cum vel ducimus dicta, cumque temporibus remcupiditate ex? Quae!
    Nihil reprehenderit eius est ex consequatur, assumenda tempore debitisfacere ipsum sunt?
    Dolores quae tempore recusandae quo explicabo vitae quiofficiis rerum, delectus illum obcaecati
    excepturi aut. Debitis, dolor harum.</p>
    <h2 class="decor">Overline and Underline text decoration</h2>
    <h1 class="decor1">line-through text decoration</h1>
    <p class="p2">Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Blanditiis ullam culpa vel? Quibusdam ea fugiat placeat magni maxime repellateaque, nisi architecto
    suscipit magnam ut unde nam similique dolorum perspiciatis.
    Praesentium aspernatur possimus mollitia, vel modi aperiam explicabo, quodexpedita culpa iure
    totam vitae similique nisi magni laborum dolores aut!
    Autem laboriosam provident nulla placeat quisquam. Laborum providentvoluptatem
    reiciendis.</p>
    <h1 class="sha" >Text Shadow Effect</h1>
    <!--fonts-->
    <p class="font">Lorem ipsum, dolor sit amet consectetur adipisicing elit.
    Cupiditate, recusandae. Sint cupiditate ex rerum quidem unde qui eligendi consequuntur dolorum inventore ea,
    quas temporibus ipsam dignissimos aliquamdistinctio optio expedita.</p>
    <p class="font1">This is a paragraph</p>
    <!--links-->
    <a href="https://www.google.com">This is a link</a>
    <br><br>
    <button class="link1"><a style="color:white;texttransform:none;"https://www.google.com">Button Link</a>
    </button>
    </body>
    </html>

    2106647
    .h1 { background-
    color:blue; color:white;
    }
    .h2 { text-
    align:center;text-
    transform:uppercase;
    }
    .p1 { text-
    align:justify;
    text-align-
    last:right;
    }
    .decor { text-decoration:underline overline;
    text-transform:capitalize;
    }
    .decor1 { text-decoration:line-through;text-
    decoration-color: rgb(51, 120, 203); text-decoration-
    style: solid; text- decoration-thickness: 2px;
    }
    .p2 { text-
    indent:50px;
    letter-
    spacing: 3px; line-
    height:1.8; word-
    spacing:5px;
    }
    .sha { text-shadow: 2px 3px 1px rgb(205,15, 8);
    }
    .font { font-family:Verdana, Geneva, Tahoma,sans-
    serif; font-style: italic;
    }
    .font1
    {

    2106647
    font-weight:bold; font-variant:small-
    caps;font-size:1.5em;
    } a:link { color:red;
    }
    a:visited
    {
    color:green;
    background-color:cyan;
    } a:hover { color:hotpink;
    } a:active { color:blue;
    }
    .link1 {background-color:rgb(18, 97, 158);border:2px solid rgb(18,
    97, 158);
    }

    OUTPUT:

    2106647

    You might also like