Por un lado tenemos nuestro código HTML que es el siguiente

<!DOCTYPE html>
<html>
  <head>
    <meta charset="iso-8859-1" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <title>Ejemplo con HTML5</title>
    <link rel="stylesheet" href="ejm01.css" />
  </head>
  <body>
    <header>
      <hgroup>
        <h1>Ejemplo de página con HTML5</h1>
        <h2>Hecho por Sutil Web</h2>
      </hgroup>
    </header>
    <section>
      <figure>
        <img src="imagenes/flor1.jpg">
        <figcaption>Flor 1</figcaption>
      </figure>
      <figure>
        <img src="imagenes/flor2.jpg">
        <figcaption>Flor 2</figcaption>
      </figure>
      <figure>
        <img src="imagenes/flor3.jpg">
        <figcaption>Flor 3</figcaption>
      </figure>
    </section>
    <footer>
      <p>Diseñado por Sutil Web</p>
    </footer>
  </body>
</html>

A este archivo HTML le aplicamos el siguiente estilo en una hoja externa

<!-- COMIENZO DEL RESET CSS -->
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
/* No olvides definir estilos para focus */
:focus {
  outline: 0;
}
/* No olvides resaltar de alguna manera el texto insertado/borrado */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
/* En el código HTML es necesario añadir cellspacing="0" */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
<!-- FIN DEL RESET -->
<!-- TAMAÑO DEL TEXTO DE LA PAGINA -->
body {
  font-size: 62.5%;
}
h1 {
  font: normal 2.0em Verdana;
  background-color: rgb(27, 62, 218);
  linear-gradient (top #f00 #0cf);
  color: white;
  width: 35%;
  border-radius:10px;
  margin: 15px auto;
  text-align: center;
  box-shadow:black 5px 5px 10px;
  text-shadow: white 1px 1px 5px;
}
h2 {
  font-size: 1.3em;
  margin: 15px auto;
  padding: 5px 0 5px 15px;
  color: red;
  text-align: center;
}
section {
  text-align: center;
  width:90%;
  margin: auto;
}
figure {
  float: left;
}
figure img {
  padding: 4px;
  background: grey;
  border-radius: 20px;
  -webkit-transition: -webkit-transform 0.1s ease-in-out 0.1s;
  box-shadow: black 5px 5px 10px;
}
figure img:hover {
  -webkit-transform: scale(1.2);
}
figcaption {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.3em;
  text-align: center;
  margin-top:5px;
}
footer {
  clear:both;
}
footer p {
  color:black;
  margin: auto;
  text-align: center;
}