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

## style element

Example 3.31 - style element - Example 3.31 (Without Styles) |
<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>p { color: black; background-color: teal; padding: 1em; font-family: helvetica, sans-serif; text-align: justify; margin: 2em; }

- Markup
- Style
- Screenshot

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

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

    p {
        color: black;
        background-color: teal;
        padding: 1em;
        font-family: helvetica, sans-serif;
        text-align: justify;
        margin: 2em;
      }

So the full page looks like:

     <html>
       <head>
         <title>CSCIE-12 CSS Example</title>
         <style type="text/css">
          p {
             color: black;
             background-color: teal;
             padding: 1em;
             font-family: helvetica, sans-serif;
             text-align: justify;
             margin: 2em;
          }
         </style>
       </head>
       <body>
         <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>
      </body>
    </html>

Copyright © David Heitmeyer