w3docs logo
¿Cómo puedes añadir CSS?
Iniciar Quiz - "CSS Fundamentos"

Añadir CSS: Estilos en línea, Internos, Externos e Importados

CSS es una poderosa herramienta que nos permite estilizar nuestras páginas web. Existen varias formas de aplicar CSS a los documentos HTML que seleccionaremos según las necesidades específicas de nuestro proyecto. Vamos a explorar las cuatro formas mencionadas en la pregunta: estilos en línea, internos, externos e importados.

Estilos en línea

Los estilos en línea se aplican directamente en la etiqueta HTML utilizando el atributo 'style'. Este método es útil para estilizar elementos individuales rápidamente, pero puede volverse engorroso en documentos HTML más grandes. Aquí tienes un ejemplo:

<p style="color: blue;">Texto en azul</p>

Estilos internos

Los estilos internos se colocan en el encabezado del documento HTML dentro de una etiqueta 'style'. Este método es útil para estilizar una única página:

<head>
  <style>
    p {color: blue;}
  </style>
</head>

Estilos externos

Los estilos externos se encuentran en un archivo .css separado que luego se vincula al documento HTML mediante una etiqueta 'link' en el encabezado. Esta es la forma más común de usar CSS ya que permite reutilizar los mismos estilos en varias páginas y mantener el código organizado:

<head>
  <link rel="stylesheet" href="estilos.css">
</head>

Estilos importados

Los estilos importados se utilizan para incluir estilos CSS de un archivo externo directamente en una hoja de estilo existente mediante la regla @import. Este método es útil para dividir una hoja de estilo grande en archivos más pequeños y manejables:

@import url('otro_estilo.css');

Como conclusión, todas estas formas son útiles y tienen su lugar en el diseño de sitios web. La elección de una u otra depende en gran medida de las necesidades del proyecto. Es importarte mantener un orden y una estructura que permitan un fácil mantenimiento y comprensión del código. Cada una de estas tácticas tiene sus pros y contras, y saber cuándo usar cada una es una habilidad esencial para cualquier desarrollador web.

Related Questions

¿Te resulta útil?