Scribd Logo
Upload

Welcome to Scribd!

  • Css Structure / Box Model

    Uploaded by

    hcethatsme
    509 views1 page
    My own graphic explaining the box model in HTML, and examples of code for an external stylesheet.

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    My own graphic explaining the box model in HTML, and examples of code for an external stylesheet.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    509 views1 page

    Css Structure / Box Model

    Uploaded by

    hcethatsme
    My own graphic explaining the box model in HTML, and examples of code for an external stylesheet.

    Copyright:

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

    Sample HTML Document With External Stylesheet

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>HTML With External Style Sheet</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name=”robots” content=”index, follow”>
    <meta name=”description” content=””>
    <meta name=”keywords” content=””>
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <p class=”mystyle”>This is a styled paragraph, followed by a horizontal rule.</p>
    <hr>
    <p>This is a default paragraph<br>
    with a line break in it.</p>
    </body>
    </html>

    Sample External Stylesheet


    body {
    background-color: blue;
    font-family: Arial, Helvetica, Geneva, sans-serif;
    color: red;
    }

    p.mystyle {
    padding: 25px;
    font-weight: bold;
    }

    CSS Box Model


    top MARGIN (transparent)
    BORDER
    PADDING
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus
    mauris dolor, suscipit ac, pretium sed, aliquet in, risus. Suspendisse elit

    left T
    nibh, eleifend a, gravida vitae, sodales in, purus. Phasellus sed mauris.

    N
    Fusce molestie, quam sit amet imperdiet porttitor, augue nunc congue
    E right

    ONT
    purus, a porta enim elit in nisl. Nunc porta, mi non dapibus aliquam,
    magna dolor scelerisque lorem, quis pulvinar lorem lorem non sapien.

    C
    Nam nunc dolor, congue sed, tincidunt sit amet, fringilla vitae, elit.
    Curabitur enim orci, facilisis quis, vestibulum nec, consequat non,
    urna. Suspendisse sit amet purus. Praesent fringilla consectetuer erat.
    Sed ac sapien.

    bottom

    You might also like