Website Construction Summary (Cont.)

  1. Adding a Consistent Style Using CSS
  2. CSS stands for Cascading Style Sheets, which define how to display HTML elements. In the OracleJSON/ folder, create a CSS style sheet named Site.css and add a link to the style sheet in the three HTML pages.

    ~/public_html/demo/OracleJSON/Site.css
     body {
     font-family: "Trebuchet MS", Verdana, sans-serif;
     font-size: 12px;
     background-image: url("http://undcemcs01.und.edu/~wen.chen.hu/bg/416.jpg");
     background-size: cover;
     background-repeat:no-repeat;
     color: #696969;
     padding: 3px;
    }
    
    #main {
     padding: 5px;
     padding-left:  15px;
     padding-right: 15px;
     background-color: #ffffff;
     border-radius: 0 0 5px 5px;
    }
    
    h1 {
     font-family: Georgia, serif;
     border-bottom: 3px solid #cc9900;
     color: #996600;
     font-size: 20px;
    }
    
    table {
     width:100%;
    }
    
    table, th , td {
     border: 1px solid black;
     border-collapse: collapse;
     padding: 5px;
    }
    
    th {
     text-align: left;
    }
    
    table tr:nth-child(odd) {
     background-color: mintcream;
    }
    
    table tr:nth-child(even) {
     background-color: #ffffff;
    }
    
    ul#menu {
     padding: 0;
     margin-bottom: 11px;
    }
    
    ul#menu li {
     display: inline;
     margin-right: 3px;
    }
    
    ul#menu li a {
     background-color: #ffffff;
     padding: 10px 20px;
     text-decoration: none;
     color: #696969;
     border-radius: 4px 4px 0 0;
    }
    
    ul#menu li a:hover {
     color: white;
     background-color: black;
    }