W3Docs

Apariencia

Español

Estilos HTML - CSS ​

CSS se usa para dar estilo a HTML. Determina cómo aparecen los elementos HTML en la pantalla, en papel o en otros medios.

CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas a la vez.

Puedes añadir CSS a los elementos HTML de 3 maneras:

  • En línea, donde se usa el atributo style en los elementos HTML.
  • Interno, donde se usa el elemento <style> en la sección <head>.
  • Externo, donde se usa un archivo CSS externo.

Veamos cada una de estas formas.

CSS en línea ​

Un CSS en línea aplica un estilo concreto a un único elemento HTML. Aquí se usa el atributo style de un elemento HTML.

En el ejemplo siguiente, el color del texto del elemento <p> es rojo:

Ejemplo de CSS en línea: ​

Ejemplo de CSS en línea

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Usage of the inline CSS</h1>
    <p style="color:red;">The paragraph is red.</p>
  </body>
</html>
Try it Yourself »

CSS interno ​

Un CSS interno especifica un estilo para una sola página HTML. Se define en el elemento <code><head></code> de una página HTML, dentro de una etiqueta <code><style></code>:

Ejemplo de CSS interno: ​

Ejemplo de CSS interno

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: yellow;
      }
      h1 {
        font-size: 30px;
      }
      p {
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

CSS externo ​

Una hoja de estilo externa especifica el estilo para varias páginas HTML. Puede cambiar el aspecto de todo el sitio web cambiando solo un archivo.

Para usar una hoja de estilo externa, debes añadir un enlace a ella dentro del elemento <code><head></code> de la página HTML: ### Ejemplo de la hoja de estilo CSS externa:

Ejemplo de la hoja de estilo CSS externa

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

El archivo no puede contener ningún código HTML y debe guardarse con una extensión .css.

Fuentes CSS ​

La propiedad CSS color describe el color del contenido del texto.

La propiedad CSS font-family define la fuente del contenido del texto.

La propiedad CSS font-size define el tamaño del texto.

Ejemplo de fuentes CSS: ​

Ejemplo de fuentes CSS

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      h1 {
        color: #008000;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        font-size: 200%;
      }
      p {
        color: #666666;
        font-family: 'New Roman', serif;
        font-size: 150%;
      }
    </style>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Borde CSS ​

La propiedad CSS border establece valores para los cuatro lados de un elemento.

Ejemplo de la propiedad CSS border: ​

Ejemplo de la propiedad CSS border

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px dotted red;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Relleno CSS ​

La propiedad CSS padding especifica el relleno (espacio) entre el texto y el borde.

Ejemplo de la propiedad CSS padding: ​

Ejemplo de la propiedad CSS padding

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px dashed #008022;
        padding: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Margen CSS ​

La propiedad CSS margin crea espacio alrededor del elemento.

Ejemplo de la propiedad CSS margin: ​

Ejemplo de la propiedad CSS margin

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 2px dashed #090fce;
        margin: 50px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

El atributo id ​

El atributo id especifica un estilo concreto para un elemento.

Ejemplo del atributo id: ​

Ejemplo del atributo id

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #large-text {
        border: 8px groove powderblue;
        font-size: 24px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p id="large-text">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

El atributo class: ​

El atributo class se usa para especificar un estilo para tipos especiales de elementos.

Ejemplo del atributo class: ​

Ejemplo del atributo class

html
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .text {
        border: 8px inset powderblue;
        font-size: 20px;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Heading</h1>
    <p class="text">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p>
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
    <p class="text">
      Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
    </p>
  </body>
</html>
Try it Yourself »

Práctica ​

What are the ways to add CSS styles to an HTML document according to the article from w3docs?

¿Te resulta útil?

Vista previa dual-run — compárala con las rutas Symfony en producción.