Scribd Logo
Upload

Welcome to Scribd!

  • WT Exp2

    Uploaded by

    KUNTALA MHATRE
    16 views4 pages

    Original Title

    WT_Exp2 (1)

    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
    16 views4 pages

    WT Exp2

    Uploaded by

    KUNTALA MHATRE

    Copyright:

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

    EXP No.

    02: Develop and demonstrate the usage of inline, internal and external
    style

    Aim: To design a web page using CSS which includes the following:

    1) Use different font styles

    2) Control the repetition of image with background-repeat and no-repeat property

    3) Define style for links as a: link, a: active, a: hover, a: visited

    4) Add customized cursors for links.

    CSS is used to add styles on web pages that contain HTML elements. There are three
    methods to add styles on web pages, these are – Inline, Internal, and External. In this
    article, we will see the differences between Inline, Internal, and External CSS styles.

    1. Inline CSS: Inline CSS is a way of defining the styling of an HTML element by adding
    CSS rules directly to the element’s tag using the “style” attribute. It is used for quick
    and simple styling changes to specific elements, without creating a separate CSS file.
    Syntax:
    <p style="css_styles">
    // Content
    </p>

    Internal CSS: Internal CSS, also known as embedded CSS is a method of adding CSS
    rules directly to the head section of an HTML document. It involves using the <style>
    element to enclose the CSS code within the HTML document itself. Internal CSS is
    placed within the <head> section of the HTML document, typically after the
    document’s title and before any other content.
    Syntax:
    <style>
    // CSS Properties
    </style>

    External CSS: External CSS is used to place CSS code in a separate file and link to
    the HTML document. To use external CSS, create a separate file with the .css file
    extension that contains your CSS rules. You can link this file to your HTML document
    using the “link” tag in the head section of your HTML document.
    Syntax:
    <head>
    <link rel="stylesheet"
    type="text/css" href="style.css">
    </head>

    PROGRAM:

    style.css
    p.left

    text-align:left;

    color:blue;

    font-family:Cambria;

    font-size:large;

    text-indent:20px;

    p.center

    text-align:center;

    text-decoration:underline;

    text-transform:uppercase;

    letter-spacing:-3px;

    word-spacing:20px;

    font-size:larger;

    p.right

    text-align:right;

    color:red;

    font-family:Tahoma;

    font-size:15pt;

    text-decoration:overline;
    font-style:italic;

    b#headline

    color:orange;

    font-size:22px;

    font-family:arial;

    text-decoration:underline;

    sample.html
    <html>

    <head>

    <style type="text/css">

    body

    background-image:url('images/cse.png');

    background-repeat:no-repeat;

    background-position:center center;

    background-attachment:fixed;

    background-color:pink;

    a:link { text-decoration:none;color:orange; }

    a:visited { text-decoration:none;color:red; }

    a:hover { text-decoration:underline;color:blue; }

    a:active { text-decoration:underline;color:purple; }

    h3 { color:green; }

    .c1{cursor:crosshair}

    .c2{cursor:pointer}

    .c3{cursor:move}

    .c4{cursor:text}

    .c5{cursor:wait}

    .c6{cursor:help}

    </style>
    <link rel="stylesheet" type="text/css" href="style.css">

    </head>

    <body bgcolor="cyan">

    <h1 style="color:blue;text-align:center;"> CSS (Inline, Internal and


    External) </h1>

    <p>This Paragraph is a Not Styled</p>

    <p class="left">This Paragraph is Styled by class "Left"</p>

    <p class="center">This Paragraph is Styled by class "Center"</p>

    <p class="right">This Paragraph is Styled by class "Right"</p>

    <b>This is normal Bold</b> <br>

    <b id="headline">This Bold Text is Styled </b>

    <h2><b><a href=" ">This is a link</a></b></h2>

    <h3 class="c1">The cursor over this element is plus sign</h3>

    <h3 class="c2">The cursor over this element is a pointing hand</h3>

    <h3 class="c3">The cursor over this element is a grasping hand</h3>

    <h3 class="c4">The cursor over this element is a I bar</h3>

    <h3 class="c5">The cursor over this element is a wait</h3>

    <h3 class="c6">The cursor over this element is a question mark</h3>

    </html>

    Conclusion:

    You might also like