Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Spring 2019

## Testdrive Your Browser

Example 3.45 - Test Drive Your Browser - Example 3.45 (Without Styles) | <h1>Lorem Ipsum Dolor</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis. </p><ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li></ul>body { background-color: silver; font-family: calibri, arial, helvetica, sans-serif; } p { line-height: 200%; border: thin solid black; padding: 1em; margin: 2em; background-color: teal; } ul { border: medium dotted red; background-color: yellow; font-family: Times New Roman, Times, serif; } h1 { color: purple; background-color: white; font-variant: small-caps; }

- Markup
- Style

     <h1>Lorem Ipsum Dolor</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras sollicitudin, orci nec facilisis vehicula, neque urna porta risus, ut sagittis enim velit at orci. Fusce velit. Integer sapien enim, rhoncus vitae, cursus non, commodo vitae, felis. Nulla convallis ante sit amet urna. Maecenas condimentum hendrerit turpis.</p>
    <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    </ul>

In `style` element (`<style type="text/css">`) within `head` element:

    body {
      background-color: silver;
      font-family: calibri, arial, helvetica, sans-serif;
    }
    p {
      line-height: 200%;
      border: thin solid black;
      padding: 1em;
      margin: 2em;
      background-color: teal;
      }
    ul {
      border: medium dotted red;
      background-color: yellow;
      font-family: Times New Roman, Times, serif;
    }
    h1 {
      color: purple;
      background-color: white;
      font-variant: small-caps;
    }

Copyright © David Heitmeyer