Scribd Logo
Upload

Welcome to Scribd!

  • Program: Internal - Css

    Uploaded by

    Janani Shree
    53 views15 pages
    html codes

    Original Title

    ex2

    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
    html codes

    Copyright:

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

    Program: Internal - Css

    Uploaded by

    Janani Shree
    html codes

    Copyright:

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

    PROGRAM

    internal.css
    <html>
    <head>
    <style>
    body{background-color:blue;}
    p{color:white;}
    </style>
    </head>
    <body>
    <h2>Internal css</h2>
    <p>This page uses internal css using the style tag we are able to modify the
    appearance of HTML element </p>
    </body>
    </html>

    OUTPUT

    Inline.html

    <html>
    <head><style></style></head>
    <body>
    <p style="background:blue;color:white;">
    A new background and font color with inline css
    </p>
    <p style="background:url("http://www.tizag.com/csst.yellow-rock.gif");">
    This is broken</p>
    </body>
    </html>

    OUTPUT

    externalcss.html

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="test.css"/>
    </head>
    <body>
    <h3>A white header</h3>
    <p>This paragraph has a blue font.The background color of this page is gray
    because we changed it with css!</p>
    </body>
    </html>
    Test.css
    body{background-color:gray;}
    p{color:blue;}
    h3{color:white;}

    OUTPUT

    cssclass.html
    <html>

    <head>
    <style>p.first{background-color:gray;}
    p.second{background-color:red;}
    p.third{background:purple;color:white;}
    </style>
    <body>
    <h2>css classes </h2>
    <p class="first">This is the p.first paragraph</p>
    <p class="second">This is the p.second paragraph</p>
    <p class="third">This is the p.third paragraph</p>
    </body></html>

    OUTPUT

    csslinks.html
    <html>
    <head>
    <style>
    a:link{color:blue;
    background-color:red;
    fontsize:26px;
    border:10px outset blue;
    font-family:sans-serif;
    text-transform:lowercase;
    text-decoration:none;
    }

    a:visited{color:blue;
    background-color:red;
    font-size:26px;
    border:10px outset blue;
    font-family:sans-serif;
    text-transform:lowercase;
    text-decoration:none;
    }

    a:hover{color:blue;
    background-color:red;
    font-size:27px;
    border:10px inset blue;

    font-family:sans-serif;
    text-transform:uppercase;
    text.decoration:line-through;
    letter-spacing:3px;
    wordspacing:6px;
    font-weight:normal;
    }
    a:link{text-decoration:none;color:gray;}
    a:visited{text-decoration:none;color:gray;}
    a:hover{text-decoration:none;
    color:green;
    font-weight:border;
    letter-spacing:2px;
    }
    </style>
    </head>
    <body>
    <h2>css pseudo classes(or)links</h2>
    <p> This is a <a href="http://www.google.com ">link with pseudo classes </a>!
    </p>
    </body>
    </html>

    OUTPUT

    cssposition.html
    <html>

    <head>
    <style>
    h3{position:absolute;top:200px;left:150px;}
    p{position:absolute; top:75px; left:75px;}
    </style>
    </head>
    <body>
    <h3>This is my h3 header</h3>
    <p>This is my paragraph</p>
    </body>
    </html>

    OUTPUT

    cssfloat.html
    <html>

    <head>
    <style>img.floatleft{
    float:left;
    margin:4px;
    }
    img.floatright{
    float:right;
    marfin:4px;
    }
    </style></head><body><img src="sun.jpg" class="floatleft" width=200
    height=200>
    <p>The images are contained within the paragraph tag.The image has floated to
    the left and also to the right because we have used both types of image floating in
    this example.Notice how the text wraps around the images quite nicely</p>
    <img src="mountain.jpg" class="floatright" width=200 height=200>
    <p>This second paragraph has an image that is floated to the right.It should be
    noted that a margin should be added to the images so that the text doesnot get too
    close to the image.There should always be a few pixels between wordws and
    borders,images and other content.</p>
    </body>
    </html>

    OUTPUT

    You might also like