Primeiro CSS

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Começando com CSS</title>
        <style>
            span {
            }

            #colorido {
                color: #26827d;
                font-size: 22px;
                border: 2px solid #26827d;
                background-color: #a3d6d3;
            }

            .azul {
                border: 2px solid #191178;
                border-radius: 10px;
                background-color: #72b2d4;
            }

            .margem {
                /*margin: 10px 6px 20px 12px;*/
                margin-bottom: 20px;
            }
        </style>
    </head>
    <body>
        <p id="colorido">orem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel tellus eros. In hac habitasse platea dictumst. Integer interdum bibendum dui, vel porttitor lorem sodales id. Sed et libero turpis. Morbi eget libero enim. Vestibulum ac sapien quis justo volutpat egestas. Suspendisse potenti. Nulla a laoreet urna. Maecenas est risus, dictum vel semper mollis, volutpat non turpis. Aliquam ligula quam, eleifend dignissim tristique non, faucibus eget lacus. Praesent dapibus tristique nisi et tincidunt.</p>
        <p>orem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel tellus eros. In hac habitasse platea dictumst. Integer interdum bibendum dui, vel porttitor lorem sodales id. Sed et libero turpis. Morbi eget libero enim. Vestibulum ac sapien quis justo volutpat egestas. Suspendisse potenti. Nulla a laoreet urna. Maecenas est risus, dictum vel semper mollis, volutpat non turpis. Aliquam ligula quam, eleifend dignissim tristique non, faucibus eget lacus. Praesent dapibus tristique nisi et tincidunt.</p>
        <div class="azul margem">Morbi pretium neque quis quam feugiat, eget finibus arcu elementum. Mauris nibh elit, suscipit at viverra quis, auctor et enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque tempor consectetur sem, quis egestas magna dapibus sed. Sed eu pretium felis. Nunc viverra vestibulum massa sit amet vulputate. Cras sollicitudin vulputate dui, eget molestie enim dignissim eget. Nullam vulputate vitae lectus ut tincidunt. Morbi elementum porttitor neque, a accumsan lectus iaculis at. Nullam eleifend nibh risus, sit amet sagittis mi sollicitudin eget.</div>
        <span class="azul">Vestibulum id iaculis magna.</span>
    </body>
</html>