Scribd Logo
Upload

Welcome to Scribd!

  • HTML

    Uploaded by

    Edward Liew
    2 views2 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views2 pages

    HTML

    Uploaded by

    Edward Liew

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 2

    Advanced background example

    <html><head>
    <style type="text/css">
    body
    {
    margin-left:200px;
    background:#5d9ab2 url('img_tree.png') no-repeat top left;
    }
    .container
    {
    text-align:center;
    }
    .center_div
    {
    border:1px solid gray;
    margin-left:auto;
    margin-right:auto;
    width:90%;
    background-color:#d0f0f6;
    text-align:left;
    padding:8px;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <div class="center_div">
    <h1>Hello World!</h1>
    <p>This example contains some advanced CSS methods you may not have learned yet. But, we
    will explain these methods in a later chapter in the tutorial.</p>
    </div>
    </div>
    </body></html>
    How to position a background image

    <html>
    <head>

    <style type="text/css">
    body
    {
    background-image:url('img_tree.png');
    background-repeat:no-repeat;
    background-position:right top;
    margin-right:200px;
    }
    </style>
    </head>

    <body>
    <h1>Hello World!</h1>
    <p>W3Schools background no-repeat, set postion example.</p>
    <p>Now the background image is only show once, and positioned away from the text.</p>
    <p>In this example we have also added a margin on the right side, so the background image will
    never disturb the text.</p>
    </body>

    </html>
    How to no repeat a background image only horizontally

    <html>
    <head>
    <style type="text/css">
    body
    {
    background-image:url('gradient2.png');
    background-norepeat:repeat-x;
    }
    </style>
    </head>

    <body>
    <h1>Hello World!</h1>
    </body>

    </html>
    Set the size of the font in px

    <html>
    <head>
    <style>
    h1 {font-size:40px;}
    h2 {font-size:30px;}
    p {font-size:14px;}
    </style>
    </head>
    <body>

    <h1>This is heading 1</h1>


    <h2>This is heading 2</h2>
    <p>This is a paragraph.</p>
    <p>Specifying the font-size in px allows Firefox, Chrome, and Safari to resize the text, but not
    Internet Explorer.</p>

    </body>
    </html>
    http://www.w3schools.com/CSS/css_examples.asp

    You might also like