RESTful Post: Style Sheet

◄Page 2►

HTML, PHP, MySQL

This is the simple style sheet used with MySQL, PHP and HTML RESTful exmples. First a Web page with a form displays, using this style sheet. Last a Web page with rows of data from a MySQL database displays, using this style sheet.

Create a CSS3 style sheet with selectors, declaration blocks, properties and values, similar to base.css:

body{
 margin-top:0px;
 padding-top:0px;
 font-family:verdana, arial, sans-serif;
}

/* 5% margin on vertical edges: */
div.content{
 width:90%;
 margin-left:auto;
 margin-right:auto;
}

/* Header and Footer */
nav,footer{
 height:32px;
 padding-top:12px;
 padding-bottom:4px;
 clear:both;
 display:block;
 text-align:center;
 width:100%;
 background-color:#00e4a9; 
}

footer{
 margin-top:16px;
}


a.txt,a.txt:link,a.txt:visited
{
 color:black;
 height:24px;
 float:left; 
 margin-left:4%;
}

a.txt:hover,a.txt:active{
 color:white;
}

/* Table: */
table{
 color:black; 
 table-layout:fixed; 
 width:100%; 
 border-collapse:collapse; 
 background-color:#4ef9ff; 
}

th{
 text-align:left; 
 font-weight:bold; 
 color:white; 
 background-color:#3b4afd; 
}

td{
 text-align:left;
}

/* Every other row's a different color */
tr:nth-child(even){
 background-color:#4ef9ff;
}
tr:nth-child(odd) {
 background-color: #758dff;
}

/* Form */
form,input,form div{
width:80%;
}

input,form div{
 display:block; 
 clear:both; 
 padding-top:2%; 
 padding-bottom:2%; 
 margin-bottoom:2%;
}

/* Narrow: */
@media (max-width: 640px){

 th,tr,td{
  font-size:100%;
 }
 
 tr,td{
  font-weight:normal;
 }
 
 td{
  word-wrap: break-word;
 }
}
/* Portrait: */
@media (orientation: portrait) {

 tr{font-size:80%;}
 
 form,input,form div{
  width:100%;
 }
}

Try It!

Try the Post to PHP example described in this tutorial.