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
    view source
    print?
    01body {
    02 font-family: "Trebuchet MS", Verdana, sans-serif;
    03 font-size: 12px;
    04 background-image: url("http://undcemcs01.und.edu/~wen.chen.hu/bg/416.jpg");
    05 background-size: cover;
    06 background-repeat:no-repeat;
    07 color: #696969;
    08 padding: 3px;
    09}
    10 
    11#main {
    12 padding: 5px;
    13 padding-left:  15px;
    14 padding-right: 15px;
    15 background-color: #ffffff;
    16 border-radius: 0 0 5px 5px;
    17}
    18 
    19h1 {
    20 font-family: Georgia, serif;
    21 border-bottom: 3px solid #cc9900;
    22 color: #996600;
    23 font-size: 20px;
    24}
    25 
    26table {
    27 width:100%;
    28}
    29 
    30table, th , td {
    31 border: 1px solid black;
    32 border-collapse: collapse;
    33 padding: 5px;
    34}
    35 
    36th {
    37 text-align: left;
    38}
    39 
    40table tr:nth-child(odd) {
    41 background-color: mintcream;
    42}
    43 
    44table tr:nth-child(even) {
    45 background-color: #ffffff;
    46}
    47 
    48ul#menu {
    49 padding: 0;
    50 margin-bottom: 11px;
    51}
    52 
    53ul#menu li {
    54 display: inline;
    55 margin-right: 3px;
    56}
    57 
    58ul#menu li a {
    59 background-color: #ffffff;
    60 padding: 10px 20px;
    61 text-decoration: none;
    62 color: #696969;
    63 border-radius: 4px 4px 0 0;
    64}
    65 
    66ul#menu li a:hover {
    67 color: white;
    68 background-color: black;
    69}