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

## 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="solarsystem.css" type="text/css"/>
        ...cut...

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

Contents of the CSS file:

    @import url(js/fancybox/jquery.fancybox-1.3.1.css);

    body {
      margin-left: 10%;
      margin-top: 1em;
      margin-right: 10%;
      background: #ffd;
      font-family: Calibri,Arial,sans-serif;
    }
    h1 {
      font-family: Calibri,Arial, sans-serif;
      color: #333;
      border-bottom: thin dotted black;
    }
    ul.gallery {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    ul.gallery li {
      margin-top: 1em;
      font-size: 1.25em;
      height: 170px;
      width: 150px;
      float: left;
      text-align: center;
      border: thin dotted black;
      margin: 10px;
      padding: 10px;
    }
    ul.gallery li img { border: none; }
    p.credits {
      clear: both;
      border: none;
      margin-top: 20px;
      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; }

Copyright © David Heitmeyer