Appendix - CSS

example_1.css

.box-1 {
  height: 100px;
  width: 150px;
}

example_10.css

.box-10 {
  color: blue;
}

example_11.css

.box-11-1 {
  background: blue;
}
.box-11-2 {
  background-image: url(http://icons.iconarchive.com/icons/paomedia/small-n-flat/72/flower-icon.png),
  url(http://icons.iconarchive.com/icons/custom-icon-design/weather/256/Sunny-icon.png);
  background-position: left top, right top;
  background-repeat: repeat, no-repeat;
  /* repeat/no-repeat/repeat-x/repeat-y */
}

example_12.css

.box-12 {
  margin: 0 auto;
  padding: 20px;
  background-image: url(https://www.freeapplewallpapers.com/wp-content/uploads/2013/10/Blue-Gradient-150x150.png);
  background-repeat: repeat-x;
}

example_13.css

.box-13-1 {
  text-align: center;
}
.box-13-2 {
  margin: 0 auto;
}

example_14.css

.box-14-1 {
  color: green;
  text-decoration: none;
}
.box-14-2:hover {
  color: red;
}
.box-14-3:active {
  color: yellow;
  text-decoration: underline;
}
.box-14-4:visited {
  color: violet;
  text-decoration: underline;
}

example_2.css

.box-2 {
  float: left;
  /* left/right/none/inherit */
}

example_3.css

.box-3-1 {
  height: 100px;
  width: 100px;
  float: left;
}
.box-3-2 {
  height: 50px;
  width: 50px;
  float: right;
}

example_4.css

.box-4 {
  display: inline;
  /* inline/block/inline-block/none */
}

example_5.css

.box-5-1 {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
}
.box-5-2 {
  margin: 10px 20px 10px 20px;
}
.box-5-3 {
  margin: 10px 20px;
}

example_6.css

.box-6-1 {
  border-style: solid;
  /* dotted/dashed/solid/double/groove/ridge/inset/outset/none/hidden */
  border-width: 2px;
  border-color: blueviolet;
  border-radius: 5px;
}
.box-6-2 {
  border-top-style: dotted;
  border-right-style: solid;
  border-bottom-style: dotted;
  border-left-style: solid;
}
.box-6-3 {
  border: 1px solid black;
  /* border-top/border-right/border-bottom/border-left */
}

example_7.css

.box-7-1 {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}
.box-7-2 {
  padding: 10px 20px 10px 20px;
}
.box-7-3 {
  padding: 10px 20px;
}

example_8.css

.box-8 {
  height: 100px;
  width: 300px;
  margin: 10px auto;
  border-right: 5px solid rgb(128, 128, 128);
  padding: 5px 10px;
}

example_9.css

.box-9 {
  overflow: auto;
  /* visible/hidden/scrool/auto */
}