33 Votos

CSS: Cómo incluir CSS en HTML

Tutorial de Stefan Trost | 22/02/2023 a las 22:22

Con las Stylesheets CSS, puede aplicar estilos y diseños a los elementos de su página HTML. Sin embargo, en este tutorial no quiero hablar de las posibilidades de CSS, sino de cómo incluir CSS en su HTML.

A continuación, veremos cómo incluir CSS como archivos externos, cómo definir CSS dentro de un archivo HTML y cómo aplicar CSS solo a elementos HTML individuales. En la última sección, veremos cómo combinar esos métodos.

Incluir CSS como Archivo Externo

El medio ideal es usar un archivo externo. Todas las reglas CSS se escriben en un solo archivo y este archivo se vincula dentro del head de la página HTML. La extensión de archivo para archivos CSS es CSS.

Echemos un vistazo a un ejemplo:

<!DOCTYPE html>
<html>
  <head>
    <title>Título de la Página</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Título</h1>
    <p>Párrafo</p>
  </body>
</html>

La integración se realiza con la etiqueta HTML "link" dentro del head de nuestra página HTML. Esta etiqueta debe contener los atributos "rel", "type" y "href". "rel" (relación) siempre tiene el valor "stylesheet" y "type" siempre es "text/css", que es el tipo MIME de un archivo CSS. El nombre de archivo de nuestro archivo CSS externo se especifica en el atributo "href". En este ejemplo, nos gustaría incluir "style.css". Tenga en cuenta: Si el archivo CSS se almacena en cualquier subdirectorio en el espacio web, por supuesto, tenemos que ajustar el enlace y la ruta aquí.

El archivo "style.css" es un archivo de texto plano sin formato que contiene nuestras reglas CSS que nos gustaría definir. Por ejemplo, el contenido del archivo podría parecerse al siguiente y se puede crear con cada editor de texto.

h1 { font-size: 14px; padding-bottom: 10px; }
p  { font-size: 10px; }

La ventaja de definir reglas CSS en archivos externos es obvia: podemos crear solo un archivo CSS central para todo nuestro sitio web que se puede incluir en cada página.

Con esto, no tenemos que repetir las reglas CSS en cada página y será muy sencillo mantener nuestro sitio web: por ejemplo, si queremos cambiar el tamaño de las letras de un elemento (font size), es suficiente cambiar el archivo CSS y la modificación será visible en cada página inmediatamente.

Definir CSS dentro de la Página HTML

Si desea definir algunas reglas CSS solo para un archivo HTML específico, también puede escribir las reglas directamente en el head sin usar un archivo externo. Aquí puede ver un ejemplo:

<!DOCTYPE html>
<html>
<head>
<title>Título de la Página</title>
<style type="text/css">
<!--
h1 { font-size: 14px; padding-bottom: 10px; }
p  { font-size: 10px; }
-->
</style>
</head>
  <body>
    <h1>Título</h1>
    <p>Párrafo</p>
  </body>
</html>

Las reglas están rodeadas por la etiqueta HTML "style" y la etiqueta style de apertura puede contener nuevamente el tipo MIME (text/css). Alternativamente, también podemos simplemente escribir "<style>", los navegadores también lo entienden.

Opcionalmente, las reglas se pueden incluir como comentarios HTML (<!-- y -->). Esta es una práctica común para evitar que los navegadores más antiguos interpreten las reglas CSS como texto.

Hoy en día, sin embargo, esto apenas juega un papel, ya que todos los navegadores comunes entienden CSS. Sin embargo, hoy esto apenas juega un papel, ya que todos los navegadores comunes entienden CSS.

La ventaja de este método es que el archivo CSS global no se inflará con reglas que solo son importantes para una página. Además, este método se aplica a toda la página para que, no obstante, pueda definir algunas reglas centrales.

CSS solo para Elementos HTML Individuales

Por último, también es posible aplicar CSS solo a elementos específicos. Una vez más, nos gustaría echar un vistazo a un ejemplo de esto:

<!DOCTYPE html>
<html>
  <head>
    <title>Título de la Página</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1 style="font-size: 14px; padding-bottom: 10px">Título</h1>
    <p style="font-size: 10px">Párrafo</p>
  </body>
</html>

Para esto, usamos el atributo "style" que hemos agregado directamente al elemento HTML que nos gustaría diseñar. Entonces, solo agregamos las reglas para el elemento correspondiente usando style="[Reglas CSS]" como puede ver en el ejemplo anterior.

Este método se puede usar, por ejemplo, siempre que solo queramos diseñar un elemento específico. Sin embargo, en general, se recomienda prescindir de este método, porque es una mejor práctica dividir el contenido y el estilo.

Combinar CSS de diferentes Fuentes

No estamos obligados a limitarnos a uno solo de estos tres métodos introducidos. Además, siempre se nos permite combinar los métodos como queramos. Solo debemos tener en cuenta que la última regla definida sobrescribirá las reglas definidas antes.

Por ejemplo, cuando hemos incluido un archivo CSS separado en el encabezado y hemos definido algún CSS específico de la página debajo del mismo, las reglas específicas de la página sobrescribirán las reglas del archivo CSS. Si definimos reglas adicionales para algunos elementos, esas reglas sobrescribirán todas las demás reglas definidas antes.

Por ejemplo, si hemos definido el tamaño de fuente "14" y el peso de fuente "negrita" para todos los elementos p en nuestro archivo CSS y sobrescribiremos esta regla con "p { font-size: 12; }" en la página, la fuente permanecerá en negrita, pero el tamaño de fuente se sobrescribirá.

ResponderPositivoNegativo

Sobre el Autor

AvatarPuede encontrar software de Stefan Trost en la pagina es.sttmedia.com. ¿Necesita un software individual según sus propios requisitos? Escribenos: es.sttmedia.com/contacto
Ver Perfil

 

Temas Relacionados

VirtualBox: Cambiar la Fecha y la Hora

Tutorial | 10 Comentarios

jQuery: Contar Elementos, Imágenes, Clases, etc.

Consejo | 0 Comentarios

Renombrar Archivos en sus Nombres de Carpeta

Tutorial | 0 Comentarios

jQuery: ¿Hay un Elemento?

Consejo | 1 Comentario

jQuery: Mostrar y Ocultar Elementos

Tutorial | 0 Comentarios

MySQL: Eliminar Datos de Tabla - Diferencia entre TRUNCATE, DELETE y DROP

Tutorial | 0 Comentarios

Reparar Archivos de Texto con Saltos de Línea Mixtos

Tutorial | 0 Comentarios

Aviso Importante

Por favor tenga en cuenta: Las contribuciones publicadas en askingbox.com son contribuciones de los usuarios y no deben reemplazar el asesoramiento profesional. No son verificados por independientes y no reflejan necesariamente la opinión de askingbox.com. Aprende más.

Participar

Haga su propia pregunta o escriba su propio artículo en askingbox.com. He aquí cómo.