## Styles

The markup page references an external stylesheet document.

    <!DOCTYPE html>
    <html>
      <head>
        <title>Our Solar System</title>
        <!-- the link element is used to reference a stylesheet -->
        <link rel="stylesheet" href="styles/solarsystem.css" />
        ...cut...

The CSS file contains style rules for the document (solarsystem.css)

Contents of the CSS file:

    body {
      margin-left: 5%;
      margin-top: 2em;
      margin-right: 5%;
      background-image: linear-gradient(white, #ffffdd);
      background-color: #ffffdd;
      font-family: Calibri,Arial,sans-serif;
    }
    h1 {
      font-family: Calibri,Arial, sans-serif;
      color: #333333;
      border-bottom: 3px solid #333333;
    }
    ul.gallery {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    ul.gallery li {
      margin-top: 1em;
      font-size: 1.25em;
      height: 250px;
      width: 220px;
      float: left;
      text-align: center;
      border: thin dotted #333333;
      margin: 10px;
      padding: 10px;
    }
    ul.gallery li img { border: none; }
    footer { clear: both; margin-top: 2rem; padding: 1em; font-size: smaller;}

    a:link,a:visited {text-decoration: none; color: blue; }
    a:hover { text-decoration: underline; }
    a:active { border: none; text-decoration: none; }