Contenido

• Pasos
• Método 1 de 2: Cómo configurar una hoja de estilo externa
• Método 2 de 2: Cómo insertar una hoja de estilo interna
• Consejos
• Advertencias

El lenguaje de marcado de hipertexto (HTML) determina qué elementos están presentes en una página web. El lenguaje de programación Cascading Style Sheets (CSS) describe cómo deben verse estos elementos.El archivo CSS se puede agregar a HTML como un archivo externo (CSS se agrega como un archivo separado) o una hoja de estilo interna (CSS se incluye en el archivo HTML). Aprenda a incrustar CSS en un archivo HTML para rediseñar su sitio.

Pasos

Método 1 de 2: Cómo configurar una hoja de estilo externa

1. 1 Crea un archivo CSS. Prepare y guarde un archivo CSS con una extensión ".css".
2. 2 Sube el archivo CSS a tu sitio.
3. 3 Copie la dirección (URL) del archivo CSS. La dirección del sitio se verá así: www.yoursite.com/stylesheet.css.
   • Es una buena práctica eliminar el nombre de dominio principal de la URL. En base a esto, la dirección http: //myisite.com/css/default.css se acortará a "/css/default.css". Recuerde incluir la barra inclinada inicial ("/"). Se llama camino relativo.
4. 4 Inserte el enlace en el archivo. Busque la etiqueta / head> en su archivo HTML y cree una línea vacía justo encima. Pegue en esa línea LINK rel = stylesheet type = "text / css" href = "www.your_site.com / stylesheet.css">, reemplazando "www.your ..." con un enlace en el archivo CSS.
5. 5 Guarde el archivo HTML y cárguelo en el sitio.
6. 6 Asegúrese de que todo en el sitio se vea como debería. De lo contrario, vuelva a abrir el archivo HTML, busque errores y realice cambios.

Método 2 de 2: Cómo insertar una hoja de estilo interna

1. 1 Cree un estilo de etiqueta>. Abra el archivo HTML y busque la etiqueta / head>. Agregue algunas líneas en blanco encima e ingrese lo siguiente:

ESTILO tipo = "texto / css"> / ESTILO>

1. 1 Pegue todo su CSS entre estas dos etiquetas.
2. 2 Guarde el archivo HTML (con la extensión .html).
3. 3 Asegúrese de que todo en el sitio se vea como debería. De lo contrario, realice los cambios deseados.

Consejos

• Siempre verifique la apariencia del sitio en diferentes navegadores y en diferentes sistemas operativos. Algunos navegadores se conectan a CSS de formas ligeramente diferentes. Incluso puede suceder en el mismo navegador, pero en diferentes versiones de Mac y Windows. Si su sitio se ve diferente en otro navegador (por ejemplo, el espacio entre algunos objetos, como listas, es de un tamaño diferente), entonces el problema es la configuración de ese navegador. Busque la hoja de estilo maestra y péguela en la parte superior del archivo CSS para cambiar la configuración predeterminada del navegador. Esto se hace para que su configuración no cambie nada en el navegador.
• Inserte una hoja de estilo externa si puede. Esto le permitirá cambiar el aspecto del sitio modificando el código en el archivo fuente. De esta manera, no tiene que cambiar el CSS en cada página de su sitio.
• Si su sitio no responde a CSS de la forma esperada, vuelva a verificar toda la codificación para asegurarse de que esté escrita correctamente. En particular, preste especial atención a los puntos y comas (";") y los corchetes de cierre ("}"). Es bastante fácil omitir uno de estos caracteres en un archivo CSS.
• Guarde el archivo HTML en su computadora para que pueda abrirlo más tarde en varios navegadores web y vuelva a verificar su apariencia antes de descargarlo más. Pero para cargarlo, el archivo CSS debe insertarse en el HTML como una hoja de estilo externa.
• Si la hoja de estilo se contradice, por ejemplo, dice primero que el texto será azul y luego que será rojo, siempre se cumplirá la última condición. Si un comando es una hoja de estilo externa y el otro es una hoja de estilo interna, la hoja de estilo interna estará activa.

Advertencias

• No utilice CSS de ensayo "abierto", es decir, el CSS que se incluye en la etiqueta HTML. (Ejemplo: "align = 'center'" es una configuración CSS abierta). Esta es una opción obsoleta con una sintaxis deficiente. Si después de un tiempo tiene que actualizar el sitio, esta configuración será difícil de cambiar.