Apuntes css

¿Para qué quieres herencias cuando tienes !important?

Cómo incluir CSS en tus páginas HTML

En CSS hay varias formas de aplicar estilos a una página HTML. Aquí veremos las principales: desde el método más recomendado (archivo externo) hasta los menos reutilizables (estilos en línea). También comentamos el uso de @import.

La forma más común y recomendable. El CSS se guarda en un archivo aparte (por ejemplo: estilo.css) y se enlaza desde el <head> del documento HTML.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo con CSS externo</title>
  <link rel="stylesheet" href="estilo.css">
</head>
<body>
  <p>Esto se verá con estilo definido en estilo.css</p>
</body>
</html>
  • rel="stylesheet": Indica que es una hoja de estilo.
  • href: Puede ser una ruta relativa (/css/estilo.css) o absoluta (https://miweb.com/css/estilo.css).
  • type="text/css": Opcional en HTML5, ya que CSS es el formato predeterminado.
  • media: Opcional. Especifica el medio: screen (pantallas), print (impresoras), etc.

Ejemplo con consulta de medios:

<link rel="stylesheet" href="impresion.css" media="print">

Esto aplica impresion.css solo al imprimir la página.

Se pueden enlazar estilos desde sitios externos ?

Puedes efectivamente, sin mas que usar su dirección absoluta
También puedes enlazar archivos CSS desde servidores remotos, por ejemplo, una framework como Bootstrap o una fuente de Google:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

Esto carga el archivo directamente desde la red. Es muy útil cuando quieres usar frameworks populares sin tener que descargarlas, ya que suelen estar en la caché del navegador si el usuario las ha visitado antes en otras páginas.

2. CSS interno con <style>

Se escribe directamente dentro del archivo HTML, en la sección <head>. Útil para pruebas o páginas pequeñas.

<head>
  <style>
    body {
      background-color: lightgray;
    }
  </style>
</head>

3. CSS en línea (inline)

Se coloca directamente sobre un elemento HTML, dentro del atributo style. Es el método menos recomendable, ya que no es reutilizable y rompe la separación entre contenido y presentación.

<p style="color: green; font-weight: bold;">
  Texto con estilo en línea
</p>

4. CSS importado con @import

Se usa dentro de otro archivo CSS para importar estilos adicionales. Menos eficiente que <link> porque puede hacer que el navegador cargue los estilos más tarde.

/* estilo.css */
@import url("colores.css"); /* Importa colores base */

p {
  font-size: 16px;
}

Nota: Puedes usar varias formas en una misma página, pero es mejor evitar mezclar métodos sin necesidad.

Orden de prioridad de los estilos

  • 1. CSS en línea: tiene la mayor prioridad
  • 2. CSS interno: sobrescribe al externo si está después
  • 3. CSS externo: se aplica si no hay otros estilos que lo anulen

Además, dentro de cada tipo, la última regla escrita gana si hay conflicto.

Nota: Si se usa !important, esa regla gana siempre, aunque conviene evitarlo salvo necesidad.

Resumen

En general, los estilos externos con <link> son la opción más limpia, eficiente y mantenible. Los otros métodos valen, pero conviene usarlos solo en casos muy puntuales.

Ahora que sabes cómo aplicar CSS a una página, puedes empezar a escribir reglas que realmente cambien su aspecto. A continuación veremos cómo apuntar a elementos concretos usando selectores.

TOP