<footer>

<h1>

<h6>

<header>

<header>

<footer>

<address>

<header>

float

.pic { float: left;  }
.par2 { clear: left; }

.rounded_box {
    background-color: orange;
    width: 200px;
    border-radius: 50px;
    background-image: linear-gradient(to top /*to bottom*/, #04507b, #00a2ff);
    background-image: linear-gradient(to top, #04507b, #0072b4, #018ad9, #00a2ff);
    background-image: linear-gradient(to top, #04507b 40%, #0072b4, #018ad9, #00a2ff);
}

.rounded_box {
    background-color: orange;
    width: 200px;
    border-radius: 50px;
    border-top-left-radius: 10px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 40px;
    -moz-border-bottom-left-radius: 40px;   /* for older version of firefox */
    -webkit-border-bottom-left-radius: 40px;   /* for older version of chrome */
}

ul {
    list-style-type: disc;   /* circle, square, decimal, lower-greek, katakana,.. none  */
    list-style-image: url(some_image.png);
    line-height: 200%;
    list-style-position: inside;   /* outside */
}

a { color: green; text-decoration: none; }
a:hover { color: red; text-decoration: underline; }
a:active{ color: orange; }
a:visited{ color: pink; text-decoration: none; }

p:before { 
    color: red; 
    content: "read this carefully"; 
}
p:after { 
    color: red; 
    content: "you have read it! good job"; 
}