Computación Web (2025/26)

Ejemplos de CSS

¡Hola Mundo!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mi primera página HTML</title>
    <link rel="stylesheet" href="holamundo.css" type="text/css">
  </head>
  <body>
    <p>¡Hola Mundo con CSS!</p>
  </body>
</html>
Enlaza el documento con un documento CSS externo. El navegador obtendrá este recurso y usará las reglas CSS definidas en él para dar estilo a los elementos HTML de este documento.

Contenido de holamundo.css: 

body {
  color: rgb(200, 200, 200);
  background-color : rgb(0, 0, 128);
  font-family : arial, verdana, sans-serif;
}
El selector body coincide con el elemento body del documento HTML. Las reglas dentro de las llaves se aplicarán a este elemento.
La propiedad color establece el color del texto del elemento. En este caso, el color del texto será un gris claro especificado con valores RGB (rojo, verde, azul).
La propiedad background-color establece el color de fondo del elemento. Aquí, está configurado a un azul oscuro.
La propiedad font-family especifica la(s) fuente(s) que se utilizarán para el texto en el elemento. Enumera tres fuentes: Arial, Verdana y sans-serif. El navegador utilizará la primera fuente de esta lista que soporte.
(Abrir este ejemplo en una nueva pestaña)

Incrustar código CSS en el documento HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Incrustar código CSS en el documento HTML</title>
    <style type="text/css">
      body {
        color: rgb(200, 200, 200);
        background-color: rgb(0, 0, 128);
        font-family: arial, verdana, sans-serif;
      }
    </style>
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
      id euismod mi. Phasellus dapibus, tortor id vestibulum suscipit,
      turpis odio venenatis velit, vitae consectetur risus odio eget
      nibh. Integer non mauris a eros congue placerat. Aenean ac dui
      eu ex malesuada gravida in ac tortor. Integer scelerisque enim
      vel fringilla interdum. Vestibulum erat felis, elementum sed
      vestibulum a, efficitur et risus. Etiam fermentum odio a erat
      pretium gravida. Mauris dapibus felis risus, ac maximus mauris
      vulputate quis. Mauris metus metus, luctus a sodales id,
      faucibus ac enim. Aliquam bibendum et dui ac auctor.
    </p>
    <p style="color:black; background:white">
      Maecenas tempor nec leo non pharetra. Donec volutpat, arcu quis
      gravida ultrices, diam dolor malesuada lorem, vitae faucibus
      libero dolor quis nulla. Vestibulum at auctor arcu, rutrum
      consectetur leo. Duis eget massa lorem. Nam auctor risus eu
      cursus placerat. In a augue nec nunc rutrum euismod a non
      nulla. Aliquam ligula ex, pellentesque a scelerisque et,
      tristique id elit. Interdum et malesuada fames ac ante ipsum
      primis in faucibus.
    </p>
  </body>
</html>
El elemento style permite incluir reglas CSS directamente dentro del documento HTML. Las reglas CSS definidas aquí se aplicarán a los elementos de este documento.
Este es un estilo en línea aplicado directamente a este párrafo específico. Anula los estilos definidos para el elemento body, estableciendo el color del texto en negro y el color de fondo en blanco solo para este párrafo.
(Abrir este ejemplo en una nueva pestaña)

Selectores CSS

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Selectores</title>
    <link rel="stylesheet" href="selectores.css" type="text/css">
  </head>
  <body>
    <p>
      Su pedido ha sido registrado en el sistema
      correctamente. Recibirá una confirmación
      por correo electrónico en breve.
    </p>
    <p class="aviso">
      Se cargarán <span id="total">300 euros</span> en
      su cuenta bancaria.
    </p>
    <p class="aviso importante">
      Recuerde comprobar que dispone de saldo suficiente
      en la cuenta.
    </p>
  </body>
</html>
Este párrafo pertenece a una clase llamada aviso. Esto permite que las reglas CSS apunten a esta clase específica de elementos.
El atributo id identifica de manera unívoca este elemento span dentro del documento. Las reglas CSS pueden apuntar a este elemento específico utilizando este identificador.
Este párrafo pertenece a dos clases: aviso y importante. Las propiedades CSS para la clase aviso y la clase importante se aplicarán a este elemento.

Contenido de selectores.css: 

p {
    color: black;
    border-style: none;
}

.aviso {
    border: 1px solid;
    border-color: red;
}

.importante {
    border-width: 3px;
    background: silver;
}

#total {
    font-weight: bold;
}
Esta regla se aplica a todos los elementos p (párrafo) del documento. Establece el color del texto en negro y elimina cualquier borde.
Esta regla se aplica a todos los elementos con la clase aviso. Añade un borde rojo sólido de 1 píxel alrededor de estos elementos.
Esta regla se aplica a todos los elementos con la clase importante. Establece el ancho del borde en 3 píxeles y cambia el color de fondo a plateado.
Esta regla se aplica específicamente al elemento con el identificador total. Hace que el texto sea negrita estableciendo el peso de la fuente.
(Abrir este ejemplo en una nueva pestaña)

Selectores con div

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Agrupación con div</title>
    <link rel="stylesheet" href="div-es.css" type="text/css">
  </head>
  <body>
    <div id="resumen">
      <h2>Resumen</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        id euismod mi. Phasellus dapibus, tortor id vestibulum
        suscipit, turpis odio venenatis velit, vitae consectetur risus
        odio eget nibh. Integer non mauris a eros congue
        placerat. Aenean ac dui eu ex malesuada gravida in ac
        tortor. Integer scelerisque enim vel fringilla
        interdum. Vestibulum erat felis, elementum sed vestibulum a,
        efficitur et risus. Etiam fermentum odio a erat pretium
        gravida. Mauris dapibus felis risus, ac maximus mauris
        vulputate quis. Mauris metus metus, luctus a sodales id,
        faucibus ac enim. Aliquam bibendum et dui ac auctor.
      </p>
    </div>
    <p>
      Nulla posuere nisi id convallis ultricies. Maecenas laoreet elit
      et odio molestie, sed vestibulum lectus suscipit. Curabitur
      risus neque, rutrum ut gravida vitae, accumsan vel orci. Ut et
      diam in lorem congue posuere. Quisque non ornare magna, et
      ullamcorper orci. Mauris sit amet suscipit tellus. Cras eu ex
      nec erat consectetur aliquet. Pellentesque eget libero ac ex
      pharetra dapibus. Vivamus ut odio tellus. Nulla nulla erat,
      fermentum et tortor ut, interdum dictum eros. Donec mattis ex eu
      sapien maximus pulvinar. Phasellus efficitur nisl mi, sed
      sodales quam fringilla quis. Praesent vitae sapien ut ligula
      maximus consectetur. Aliquam mollis vel sapien a
      fringilla. Curabitur bibendum dignissim quam, ac molestie
      metus. Sed cursus quam ac lectus congue, et bibendum velit
      blandit.
    </p>
  </body>
</html>
div elements can be used to group other HTML elements together and apply CSS styles to the entire group.

Contenido de div-es.css: 

#resumen {
    border: 1px solid;
    padding: 5px;
    text-align: justify;
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}

#resumen > h2 {
    text-align: center;
}
Esta regla se aplica al elemento con el identificador resumen. Añade un borde sólido de 1 píxel, establece un relleno dentro del borde de 5 píxeles, justifica el texto tanto en los márgenes izquierdo como derecho, fija el ancho a 400 píxeles, y centra el elemento horizontalmente estableciendo los márgenes izquierdo y derecho a auto.
Esta regla se aplica a los elementos h2 que son hijos directos del elemento con el identificador resumen. Centra el texto dentro de estos elementos h2.
(Abrir este ejemplo en una nueva pestaña)

Selectores con pseudoclases

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Selectores con pseudoclases</title>
    <link rel="stylesheet" href="selectores.css" type="text/css">
    <link rel="stylesheet" href="selectores-pseudoclases.css" type="text/css">
  </head>
  <body>
    <p>
      Su pedido ha sido registrado en el sistema
      correctamente. Recibirá una confirmación
      por correo electrónico en breve.
    </p>
    <p class="aviso">
      Se cargarán <span id="total">300 euros</span> en
      su cuenta bancaria.
    </p>
    <p class="aviso importante">
      Recuerde comprobar que dispone de saldo suficiente
      en la cuenta.
    </p>
  </body>
</html>
Varios documentos CSS pueden estar vinculados al mismo documento HTML. Las reglas de todos los documentos CSS vinculados se aplicarán a los elementos HTML.

Contenido de selectores-pseudoclases.css:

p.aviso:hover {
    background: red;
}
Esta regla se aplica a los elementos p con la clase aviso, cuando el usuario pasa el puntero del ratón sobre ellos. Cambia el color de fondo a rojo mientras se pasa el puntero.
(Abrir este ejemplo en una nueva pestaña)

Selectores con pseudoclase active

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Selectores con pseudoclase active</title>
    <link rel="stylesheet" href="selectors-active.css" type="text/css">
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
      sodales, enim et facilisis commodo, justo odio rhoncus sapien,
      id pulvinar odio lorem non turpis. Donec sed odio dui. Donec
      ullamcorper nulla non metus auctor fringilla. Donec sed odio dui.
    </p>
    <p>
      Donec ullamcorper nulla non metus auctor fringilla. Donec sed
      odio dui. Donec ullamcorper nulla non metus auctor fringilla.
      Donec sed odio dui. Donec ullamcorper nulla non metus auctor
      fringilla. Donec sed odio dui. Donec ullamcorper nulla non metus.
    </p>
    <p>
      Donec sed odio dui. Donec ullamcorper nulla non metus auctor
      fringilla. Donec sed odio dui. Donec ullamcorper nulla non metus
      auctor fringilla. Donec sed odio dui. Donec ullamcorper nulla non
      metus auctor fringilla. Donec sed odio dui.
    </p>
  </body>
</html>

Contenido de selectores-active.css:

p:active {
  color: red;
}
Esta propiedad se aplica a los elementos p activos. Cambia el color del texto a rojo mientras se hace clic en ellos.
(Abrir este ejemplo en una nueva pestaña)

Propiedades de formato de texto

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Propiedades de formato de texto</title>
    <link rel="stylesheet" href="texto.css" type="text/css">
  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
      id euismod mi. Phasellus dapibus, tortor id vestibulum suscipit,
      turpis odio venenatis velit, vitae consectetur risus odio eget
      nibh. Integer non mauris a eros congue placerat. Aenean ac dui
      eu ex malesuada gravida in ac tortor. Integer scelerisque enim
      vel fringilla interdum. Vestibulum erat felis, elementum sed
      vestibulum a, efficitur et risus. Etiam fermentum odio a erat
      pretium gravida. Mauris dapibus felis risus, ac maximus mauris
      vulputate quis. Mauris metus metus, luctus a sodales id,
      faucibus ac enim. Aliquam bibendum et dui ac auctor.
    </p>
  </body>
</html>

Contenido de texto.css:

p {
    font-family: times serif;
    font-style: italic;
    color: navy;
    text-indent: 5em;
}
La propiedad font-family especifica la(s) fuente(s) que se utilizarán para el texto en el elemento. Enumera dos fuentes: Times y serif. El navegador utilizará la primera fuente de esta lista que soporte.
La propiedad font-style establece el estilo de la fuente. Aquí, está configurado en cursiva.
La propiedad color establece el color del texto del elemento. En este caso, el color del texto será azul marino.
La propiedad text-indent especifica la sangría de la primera línea de texto. Aquí, está configurado en 5em, lo que significa que la primera línea estará sangrada cinco veces el tamaño de fuente actual.
(Abrir este ejemplo en una nueva pestaña)

Márgenes, bordes y elementos flotantes

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Márgenes, bordes y elementos flotantes</title>
    <link rel="stylesheet" href="margenes-bordes.css" type="text/css">
  </head>
  <body>
    <div id="resumen">
      <h2>Resumen</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        id euismod mi. Phasellus dapibus, tortor id vestibulum
        suscipit, turpis odio venenatis velit, vitae consectetur risus
        odio eget nibh.
      </p>
    </div>
    <p>
      Nulla posuere nisi id convallis ultricies. Maecenas laoreet elit
      et odio molestie, sed vestibulum lectus suscipit. Curabitur
      risus neque, rutrum ut gravida vitae, accumsan vel orci. Ut et
      diam in lorem congue posuere. Quisque non ornare magna, et
      ullamcorper orci. Mauris sit amet suscipit tellus. Cras eu ex
      nec erat consectetur aliquet. Pellentesque eget libero ac ex
      pharetra dapibus. Vivamus ut odio tellus. Nulla nulla erat,
      fermentum et tortor ut, interdum dictum eros. Donec mattis ex eu
      sapien maximus pulvinar. Phasellus efficitur nisl mi, sed
      sodales quam fringilla quis. Praesent vitae sapien ut ligula
      maximus consectetur. Aliquam mollis vel sapien a
      fringilla. Curabitur bibendum dignissim quam, ac molestie
      metus. Sed cursus quam ac lectus congue, et bibendum velit
      blandit.
    </p>
    <p>
      Donec commodo varius justo, eget lobortis lorem posuere
      ut. Pellentesque metus ex, venenatis nec molestie quis, rhoncus
      eu augue. Ut in pulvinar libero, ut pulvinar quam. Phasellus non
      augue vel dolor rutrum tristique auctor in massa. Morbi eleifend
      tincidunt aliquam. Quisque eleifend, lorem quis aliquet iaculis,
      ante sapien vehicula ante, vel interdum leo risus eu
      lacus. Quisque tempor vitae risus ut elementum. Fusce sit amet
      felis erat. In vel orci a dui malesuada facilisis. Mauris varius
      congue velit et ultricies. Fusce posuere, ipsum ac accumsan
      accumsan, nunc sapien sagittis orci, eu blandit nisl justo id
      odio. Aenean consectetur vulputate dolor, vel eleifend velit
      egestas sed. Vestibulum eget nunc eget purus scelerisque
      sollicitudin et eget orci. Vivamus orci lectus, placerat
      efficitur tortor sed, accumsan sollicitudin nisl. Phasellus
      molestie leo et iaculis finibus.
    </p>
  </body>
</html>

Contenido de margenes-bordes.css:

#resumen {
    float: right;
    border: 1px dashed black;
    padding-left: 5px;
    padding-right: 5px;
    width: 600px;
    margin: 0px 50px;
    background: silver;
    text-align: justify;
}

#resumen > h2 {
    text-align: center;
}
La propiedad float especifica que el elemento debe flotar a la derecha de su contenedor. Otro contenido fluirá a su alrededor en el lado izquierdo.
La propiedad border establece un borde negro discontinuo de 1 píxel alrededor del elemento.
Las propiedades padding-left y padding-right establecen el relleno (espacio entre el contenido y el borde) a 5 píxeles en los lados izquierdo y derecho del elemento.
La propiedad width fija el ancho del elemento a 600 píxeles. Sin esta propiedad, el elemento se expandiría para llenar el espacio disponible.
La propiedad margin establece los márgenes superior e inferior en 0 píxeles, y los márgenes izquierdo y derecho en 50 píxeles. Esto crea espacio entre el elemento y otros contenidos a su alrededor.
La propiedad background establece el color de fondo del elemento a plateado. El fondo es visible dentro del área de relleno.
(Abrir este ejemplo en una nueva pestaña)

Desbordamiento de contenido

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Desbordamiento de contenido</title>
    <link rel="stylesheet" href="desbordamiento.css" type="text/css">
  </head>
  <body>
    <p>
      Nulla posuere nisi id convallis ultricies. Maecenas laoreet elit
      et odio molestie, sed vestibulum lectus suscipit. Curabitur
      risus neque, rutrum ut gravida vitae, accumsan vel orci. Ut et
      diam in lorem congue posuere. Quisque non ornare magna, et
      ullamcorper orci. Mauris sit amet suscipit tellus. Cras eu ex
      nec erat consectetur aliquet. Pellentesque eget libero ac ex
      pharetra dapibus. Vivamus ut odio tellus. Nulla nulla erat,
      fermentum et tortor ut, interdum dictum eros. Donec mattis ex eu
      sapien maximus pulvinar. Phasellus efficitur nisl mi, sed
      sodales quam fringilla quis. Praesent vitae sapien ut ligula
      maximus consectetur. Aliquam mollis vel sapien a
      fringilla. Curabitur bibendum dignissim quam, ac molestie
      metus. Sed cursus quam ac lectus congue, et bibendum velit
      blandit.
    </p>
    <p>
      Donec commodo varius justo, eget lobortis lorem posuere
      ut. Pellentesque metus ex, venenatis nec molestie quis, rhoncus
      eu augue. Ut in pulvinar libero, ut pulvinar quam. Phasellus non
      augue vel dolor rutrum tristique auctor in massa. Morbi eleifend
      tincidunt aliquam. Quisque eleifend, lorem quis aliquet iaculis,
      ante sapien vehicula ante, vel interdum leo risus eu
      lacus. Quisque tempor vitae risus ut elementum. Fusce sit amet
      felis erat. In vel orci a dui malesuada facilisis. Mauris varius
      congue velit et ultricies. Fusce posuere, ipsum ac accumsan
      accumsan, nunc sapien sagittis orci, eu blandit nisl justo id
      odio. Aenean consectetur vulputate dolor, vel eleifend velit
      egestas sed. Vestibulum eget nunc eget purus scelerisque
      sollicitudin et eget orci. Vivamus orci lectus, placerat
      efficitur tortor sed, accumsan sollicitudin nisl. Phasellus
      molestie leo et iaculis finibus.
    </p>
  </body>
</html>

Contenido de desbordamiento.css:

p {
    max-width: 500px;
    max-height: 100px;
    border: 1px solid;
    overflow: auto;
}
La propiedad max-width establece el ancho máximo del elemento en 500 píxeles, incluso si hay más espacio disponible.
La propiedad max-height establece la altura máxima del elemento en 100 píxeles, incluso si hay más espacio vertical disponible.
Cuando se establecen restricciones de tamaño como width, height, max-width o max-height, el contenido dentro del elemento puede exceder estos límites. La propiedad overflow especifica cómo manejar el contenido que desborda el cuadro del elemento. Aquí, se establece en auto, lo que significa que aparecerán barras de desplazamiento si el contenido excede la altura o el ancho máximo.
(Abrir este ejemplo en una nueva pestaña)

Fondo

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Fondo</title>
    <link rel="stylesheet" href="fondo.css" type="text/css">
  </head>
  <body>
    <p>
      Nulla posuere nisi id convallis ultricies. Maecenas laoreet elit
      et odio molestie, sed vestibulum lectus suscipit. Curabitur
      risus neque, rutrum ut gravida vitae, accumsan vel orci. Ut et
      diam in lorem congue posuere. Quisque non ornare magna, et
      ullamcorper orci. Mauris sit amet suscipit tellus. Cras eu ex
      nec erat consectetur aliquet. Pellentesque eget libero ac ex
      pharetra dapibus. Vivamus ut odio tellus. Nulla nulla erat,
      fermentum et tortor ut, interdum dictum eros. Donec mattis ex eu
      sapien maximus pulvinar. Phasellus efficitur nisl mi, sed
      sodales quam fringilla quis. Praesent vitae sapien ut ligula
      maximus consectetur. Aliquam mollis vel sapien a
      fringilla. Curabitur bibendum dignissim quam, ac molestie
      metus. Sed cursus quam ac lectus congue, et bibendum velit
      blandit.
    </p>
    <p>
      Donec commodo varius justo, eget lobortis lorem posuere
      ut. Pellentesque metus ex, venenatis nec molestie quis, rhoncus
      eu augue. Ut in pulvinar libero, ut pulvinar quam. Phasellus non
      augue vel dolor rutrum tristique auctor in massa. Morbi eleifend
      tincidunt aliquam. Quisque eleifend, lorem quis aliquet iaculis,
      ante sapien vehicula ante, vel interdum leo risus eu
      lacus. Quisque tempor vitae risus ut elementum. Fusce sit amet
      felis erat. In vel orci a dui malesuada facilisis. Mauris varius
      congue velit et ultricies. Fusce posuere, ipsum ac accumsan
      accumsan, nunc sapien sagittis orci, eu blandit nisl justo id
      odio. Aenean consectetur vulputate dolor, vel eleifend velit
      egestas sed. Vestibulum eget nunc eget purus scelerisque
      sollicitudin et eget orci. Vivamus orci lectus, placerat
      efficitur tortor sed, accumsan sollicitudin nisl. Phasellus
      molestie leo et iaculis finibus.
    </p>
  </body>
</html>

Contenido de fondo.css:

p {
    background-image: url("background.jpg");
    background-repeat: repeat;
}
La propiedad background-image establece una imagen como fondo del elemento. Aquí, especifica un recurso de imagen llamado background.jpg, que el navegador descargará.
La propiedad background-repeat especifica cómo se debe repetir la imagen de fondo. Aquí, está configurado en repeat, lo que significa que la imagen se repetirá tanto horizontal como verticalmente para cubrir todo el fondo del elemento.
(Abrir este ejemplo en una nueva pestaña)

Listas

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Listas</title>
    <link rel="stylesheet" href="listas.css" type="text/css">
  </head>
  <body>
    <ol>
      <li>Primer elemento de la lista.</li>
      <li>Segundo elemento de la lista.</li>
      <li>Tercer elemento de la lista.</li>
      <li>Cuarto elemento de la lista.</li>
    </ol>

    <ul>
      <li>Primer elemento de la lista.</li>
      <li>Segundo elemento de la lista.</li>
      <li>Tercer elemento de la lista.</li>
    </ul>
  </body>
</html>

Contenido de listas.css:

ol, ul {
    max-width: 150px;
}

ol {
    list-style-type: lower-latin;
    list-style-position: inside;
}

ul {
    list-style-type: square;
    list-style-position: outside;
}
Las comas separan múltiples selectores en una sola regla. Las propiedades CSS se aplican a todos los elementos que coincidan con cualquiera de los selectores. Esta regla se aplica tanto a las listas ordenadas (ol) como a las listas desordenadas (ul). Fija el ancho máximo de estos elementos en 150 píxeles.
La propiedad list-style-type establece el tipo de marcador usado para los elementos de lista. Aquí se establece en lower-latin, lo que significa que los elementos de la lista se numerarán con letras latinas minúsculas (a, b, c, ...).
La propiedad list-style-position especifica la posición de los marcadores de los elementos de la lista. Aquí se establece en inside, lo que significa que los marcadores se colocarán dentro del recuadro de contenido de los elementos de la lista.
La propiedad list-style-type está establecida en square, lo que significa que los elementos de la lista estarán marcados con viñetas cuadradas.
La propiedad list-style-position está establecida en outside, lo que significa que los marcadores se colocarán fuera del recuadro de contenido de los elementos de la lista.
(Abrir este ejemplo en una nueva pestaña)

Visibilidad de los elementos

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Visibilidad de elementos</title>
    <link rel="stylesheet" href="visibilidad.css" type="text/css">
  </head>
  <body>
    <div id="resumen">
      <h2>Resumen</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin
        id euismod mi. Phasellus dapibus, tortor id vestibulum
        suscipit, turpis odio venenatis velit, vitae consectetur risus
        odio eget nibh.
      </p>
    </div>
    <p>
      Nulla posuere nisi id convallis ultricies. Maecenas laoreet elit
      et odio molestie, sed vestibulum lectus suscipit. Curabitur
      risus neque, rutrum ut gravida vitae, accumsan vel orci. Ut et
      diam in lorem congue posuere. Quisque non ornare magna, et
      ullamcorper orci. Mauris sit amet suscipit tellus. Cras eu ex
      nec erat consectetur aliquet. Pellentesque eget libero ac ex
      pharetra dapibus. Vivamus ut odio tellus. Nulla nulla erat,
      fermentum et tortor ut, interdum dictum eros. Donec mattis ex eu
      sapien maximus pulvinar. Phasellus efficitur nisl mi, sed
      sodales quam fringilla quis. Praesent vitae sapien ut ligula
      maximus consectetur. Aliquam mollis vel sapien a
      fringilla. Curabitur bibendum dignissim quam, ac molestie
      metus. Sed cursus quam ac lectus congue, et bibendum velit
      blandit.
    </p>
    <p>
      Donec commodo varius justo, eget lobortis lorem posuere
      ut. Pellentesque metus ex, venenatis nec molestie quis, rhoncus
      eu augue. Ut in pulvinar libero, ut pulvinar quam. Phasellus non
      augue vel dolor rutrum tristique auctor in massa. Morbi eleifend
      tincidunt aliquam. Quisque eleifend, lorem quis aliquet iaculis,
      ante sapien vehicula ante, vel interdum leo risus eu
      lacus. Quisque tempor vitae risus ut elementum. Fusce sit amet
      felis erat. In vel orci a dui malesuada facilisis. Mauris varius
      congue velit et ultricies. Fusce posuere, ipsum ac accumsan
      accumsan, nunc sapien sagittis orci, eu blandit nisl justo id
      odio. Aenean consectetur vulputate dolor, vel eleifend velit
      egestas sed. Vestibulum eget nunc eget purus scelerisque
      sollicitudin et eget orci. Vivamus orci lectus, placerat
      efficitur tortor sed, accumsan sollicitudin nisl. Phasellus
      molestie leo et iaculis finibus.
    </p>
  </body>
</html>

Contenido de visibilidad.css:

#resumen {
    float: right;
    border: 1px dashed black;
    padding-left: 5px;
    padding-right: 5px;
    width: 600px;
    margin: 0px 50px;
    background: silver;
    text-align: justify;
    visibility: visible;
    display: block;
}

#resumen > h2 {
    text-align: center;
}
La propiedad visibility controla si el elemento es visible u oculto. Aquí se establece en visible, lo que significa que el elemento se mostrará normalmente. Si se estableciera en hidden, el elemento sería invisible pero seguiría ocupando espacio en la visualización.
La propiedad display especifica cómo se muestra el elemento en el documento. Aquí se establece en block, lo que significa que el elemento se comportará como un elemento de nivel bloque, ocupará todo el ancho disponible y comenzará en una nueva línea. Otros valores posibles incluyen inline, que hace que el elemento se comporte como en línea, y none, que elimina completamente el elemento de la visualización del documento. A diferencia de visibility: hidden, usar display: none significa que el elemento no ocupará ningún espacio en la visualización.
(Abrir este ejemplo en una nueva pestaña)