/* #id      .class
 * unique   many
 *
 * selector {prop:val}
 * sel1, sel2, sel3{prop:val}
 *
 * ol li{prop:val}; child/decendant
 * ol>li {prop:val}; direct child
 * <ol>
 *  <li>    dir child affected
 *      <ul>
 *          <li
 * */

#purple{
    font-size:100px;
    color:purple;
}

.center{
    text-align:center; /*left, right*/
}
h1.center{
    text-align:center;
    font-size:100px;
}
ol.another{
    font-size:20px;
}

ul{
    list-style-type:circle;
    /*background-imge: url(path/to/image.png);*/
    list-style-image:url(https://randomstreetview.com/img/googleplus.png);
}

ol{
    list-style-type:decimal-leading-zero;
    /*lower-alpha, upper-alpha, lower-roman, upper-roman,
     none;
     */

     background-color: greenyellow;

}

/*horizontal list*/
li{display:inline;}

h1{color:red}
p{
    text-indent: 10px;
    /*units in css: px-pixel, %-relation to page width
     * em-relation to defSize of text, lem==12px 2em==24px
     * cm in (px %, em) SIZEpx; 1px :) --1px :(
     */
    text-indent: 30%; /*rel to pagewidhty*/
    text-decoration:underline; /*overline, line-through*/
    word-spacing: 15px;
}