Cómo agregar un archivo CSS a HTML: 10 pasos (con imágenes)

El lenguaje de marcado de hipertexto (HTML) define lo que son las diferentes piezas de una página web. El lenguaje de codificación de las hojas de estilo en cascada (CSS) describe cómo deben parecerse a esas piezas. Se puede agregar un archivo CSS a HTML como una hoja de estilo externo, CSS se incluye en un archivo separado de HTML, o una hoja de estilo interno, CSS incluida dentro del archivo HTML. Aprenda cómo agregar un archivo CSS a HTML para personalizar el diseño de su sitio web.

Pasos

Método 1 de 2:

Añadir una hoja de estilo externo a HTML

1. Crea el archivo CSS. Prepare y guarde su archivo CSS con el ".CSS" Tipo de archivo.

Imagen titulada Agregar un archivo CSS a HTML Paso 2

2. Sube su archivo CSS a su sitio web.

Imagen titulada Agregar un archivo CSS a HTML Paso 3

3. Copie la URL de su archivo CSS. La URL podría parecerse Tú sitio.com / stylesheet.CSS.

Es una buena forma para eliminar el nombre de dominio principal del enlace (URL). Por lo tanto una URL de "http: // mysite.com / css / predeterminado.CSS" se acortaría a "/ CSS / Predeterminado.CSS". Debe incluir esa barra principal ("/"). Esto se llama un camino relativo.

Imagen titulada Agregar un archivo CSS a HTML Paso 4

4. Añadir un enlace al archivo. Encuentre el THETAG en su archivo HTML y cree una línea vacía justo encima de la etiqueta. Agregar

a esa línea vacía, cambiando "tu..." al enlace a su archivo CSS.

Imagen titulada Agregar un archivo CSS a HTML PASO 5

5. Guarde su archivo HTML y carguelo a su sitio web.

Imagen titulada Agregar un archivo CSS a HTML Paso 6

6. Verifique que todo en su sitio se vea como se supone que debe mirar. Si no lo hace, es posible que deba volver y buscar correcciones o ajustes que necesita para hacer.

Método 2 de 2:

Añadir una hoja de estilo interno a HTML

1. Crea la etiqueta. En su archivo HTML, encuentre el THETAG. Agregue unas pocas líneas adicionales por encima de ella y escriba lo siguiente:

Imagen titulada Agregar un archivo CSS a HTML Paso 7

1. Agregue todos sus CSS entre esas dos etiquetas que acaba de agregar.
2. Guarde su archivo HTML (como HTML).
3. Verifique que su página web se vea como se supone que debe mirar. Hacer cambios según sea necesario si no lo hace.

Consejos

Siempre revise la apariencia de su sitio web en diferentes navegadores web y en diferentes sistemas informáticos. Algunos navegadores Internet CSS un poco de otra manera, incluso entre las MAC y las ediciones de Windows de los mismos navegadores. Si su sitio web se ve diferente en diferentes navegadores, especialmente en cómo se espacian ciertos objetos como las listas, el problema es el incumplimiento del navegador. Encuentre una hoja de estilo maestro para agregar al principio de su CSS para anular todos los valores predeterminados del navegador, por lo que su configuración no se agrega a nada que el navegador ya esté configurado.

Si tiene la opción, use una hoja de estilo externo. Si lo hace, le permitirá ajustar la apariencia del sitio cambiando el código en el archivo con nombre, en lugar de tener que cambiar el CSS en cada página en su sitio.

Si su sitio web no responde a su CSS, como se espera, marque todo su código para asegurarse de que no olvide los detalles. Presta especial atención a los punto y coma ("-") y cierre los soportes de flecha ("}"). No es inusual perder uno en su CSS.

Si guarda el archivo HTML en su computadora, puede abrir ese archivo en sus navegadores web para verificar la apariencia de su computadora antes de subirla, pero probablemente necesitará tener su CSS como una hoja de estilo interno en el archivo HTML para la apariencia de carga.

Cuando una hoja de estilo se contradice, por ejemplo, si primero dice que el texto será azul y luego dice que será rojo, la condición posterior siempre se aplicará. Si un comando está en una hoja de estilo externo, y el otro está en una hoja de estilo interno, se aplicará la interna.

Advertencias

No usar "en línea" CSS, CSS que está incluida en la etiqueta HTML. (Por ejemplo: el "align = `centro`" es en línea CSS.) Está desactualizada, mala sintaxis, y difícil de ajustar cuando necesita actualizar el sitio web más tarde.