Cómo agregar un archivo CSS al HTML

Descargar el PDF
Descargar el PDF

El Lenguaje de marcado de hipertexto (HTML) define lo que son las diferentes piezas de una página web. El lenguaje de codificación Hojas de estilo en cascada (CSS) describe cómo se deberían ver esas piezas. Un archivo CSS se puede agregar al HTML como una hoja de estilo externa, CSS incluido en un archivo separado del HTML, o como una hoja de estilo interna, CSS incluido dentro del archivo HTML. Aprende cómo agregar un archivo CSS al HTML para poder personalizar el diseño de tu sitio web.

Método 1
Método 1 de 2:

Agregar una hoja de estilo externa al HTML

Descargar el PDF
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/05\/Add-a-CSS-File-to-HTML-Step-1-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/05\/Add-a-CSS-File-to-HTML-Step-1-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Prepara y guarda tu archivo CSS con el tipo de archivo ".css".
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7e\/Add-a-CSS-File-to-HTML-Step-2-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7e\/Add-a-CSS-File-to-HTML-Step-2-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a2\/Add-a-CSS-File-to-HTML-Step-3-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a2\/Add-a-CSS-File-to-HTML-Step-3-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    El URL podría parecerse a www.tusitio.com/hojadeestilo.css .
    • Lo adecuado es quitar el nombre de dominio principal del enlace (URL). Por lo tanto un URL de "http://misitio.com/css/default.css" se acortaría a "/css/default.css". Debes incluir esa barra diagonal delantera ("/"). Esto se llama una ruta relativa.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2e\/Add-a-CSS-File-to-HTML-Step-4-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Add-a-CSS-File-to-HTML-Step-4-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Encuentra la etiqueta </head> en tu archivo HTML y crea una línea vacía justo encima de esta. Agrega <LINK rel=stylesheet type="text/css" href="www.tusitio.com/hojadeestilo.css"> a esa línea vacía, cambiando "www.tu..." por el enlace a tu archivo CSS.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/1d\/Add-a-CSS-File-to-HTML-Step-5-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/1d\/Add-a-CSS-File-to-HTML-Step-5-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/82\/Add-a-CSS-File-to-HTML-Step-6-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/82\/Add-a-CSS-File-to-HTML-Step-6-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si no, es posible que tengas que regresar y buscar cualquier corrección o ajuste que necesites hacer.
    Anuncio
Método 2
Método 2 de 2:

Agrega una hoja de estilo interna al HTML

Descargar el PDF
  1. 1
    Crea la etiqueta <style> . En tu archivo HTML, encuentra la etiqueta </head>. Agrega unas cuantas líneas extra sobre esta y escribe lo siguiente:
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/d7\/Add-a-CSS-File-to-HTML-Step-8-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/d7\/Add-a-CSS-File-to-HTML-Step-8-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/78\/Add-a-CSS-File-to-HTML-Step-9-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-9-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/78\/Add-a-CSS-File-to-HTML-Step-9-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-9-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/fa\/Add-a-CSS-File-to-HTML-Step-10-Version-2.jpg\/v4-460px-Add-a-CSS-File-to-HTML-Step-10-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/fa\/Add-a-CSS-File-to-HTML-Step-10-Version-2.jpg\/v4-728px-Add-a-CSS-File-to-HTML-Step-10-Version-2.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":548,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Si no, haz los cambios necesarios.
    Anuncio


Consejos

  • Siempre revisa la apariencia de tu sitio web en diferentes navegadores web y sistemas informáticos. Algunos buscadores de Internet muestran CSS de manera un poco diferente, incluso entre las ediciones de Windows y Mac de los mismos navegadores. Si tu sitio web se ve diferente en distintos navegadores, particularmente en cómo están separados ciertos objetos, como las listas, el problema son los valores predeterminados del navegador. Busca una hoja de estilo maestra para agregarla al principio de tu CSS para anular todos los valores predeterminados del navegador y para que así tu configuración no se esté agregando a cualquier cosa que el navegador configure.
  • Si tienes la opción, usa una hoja de estilo externa. Hacerlo te permitirá ajustar la apariencia del sitio cambiando el código en el archivo mencionado, en lugar de tener que cambiar el CSS en cada página de tu sitio.
  • Si tu sitio web no responde a tu CSS como se espera, revisa otra vez todo tu código para estar seguro de que no te olvidaste de ningún detalle. Particularmente presta atención a los punto y coma (";") y a las llaves de cierre ("}"). No es inusual olvidarte de uno en tu CSS.
  • Si guardas el archivo HTML en tu computadora, puedes abrirlo en los navegadores web de este para revisar la apariencia antes de subirlo, pero probablemente necesitarás tener tu CSS como una hoja de estilo interna en el archivo HTML para que la apariencia se cargue.
  • Cuando una hoja de estilo se contradice a sí misma, por ejemplo si primero dice que el texto será azul y después que será rojo, la última condición se aplicará siempre. Si un comando está en una hoja de estilo externa y el otro está en una interna, el de la interna se aplicará.
Anuncio

Advertencias

  • No uses CSS "en línea", CSS que está incluido en la etiqueta HTML (por ejemplo, el "align='center'" es CSS en línea). Es obsoleto, es una sintaxis mala y es difícil de ajustar cuando necesitas actualizar el sitio web más tarde.
Anuncio

wikiHows relacionados

Cómo
crear una hoja de estilos CCS simple usando el bloc de notas
Cómo
crear CSS
Anuncio

Referencias

  1. http://www.w3.org/TR/html4/sgml/entities.html
  2. http://w3schools.com/css/css_howto.asp

Acerca de este wikiHow

En otros idiomas
Esta página ha recibido 6949 visitas.

¿Te ayudó este artículo?

Anuncio