Curso de CSS / aplicar estilos en línea, internos y externos

Puedes aplicar CSS a través del atributo style de un elemento, un elemento style en el documento HTML, o una hoja de estilo externa enlazada. Las hojas de estilo externas suelen ser más fáciles de mantener en varias páginas, mientras que los otros métodos se adaptan a usos más pequeños y específicos.

Compara las tres formas de aplicar CSS

Los tres métodos aplican CSS. Las reglas internas y externas ordinarias compiten según la cascada, incluyendo sus selectores y el orden de origen; un archivo externo no es inherentemente más débil. Las declaraciones en línea suelen tener prioridad sobre las declaraciones normales de la hoja de estilo del autor, pero condiciones como !important cambian esa comparación. Para más detalles, consulta CSS Herencia, Especificidad y la Cascada.

Escribe estilos en línea e internos

En los estilos en línea, se escribe la declaración dentro del atributo style del elemento que quieres decorar. No se incluyen selectores ni llaves externas. El siguiente código especifica el color y el fondo para un solo texto de guía.

<p style="color: #087f5b; background-color: #e9f7ef;">
  We open at 9 a.m. every day.
</p>

En la hoja de estilo interna, las reglas que incluyen selectores y llaves se escriben en el elemento style dentro de head. Varios elementos con la misma clase pueden decorarse con una sola regla. En el ejemplo a continuación, el valor de la clase HTML es notice y el selector CSS es .notice.

<head>
  <style>
    .notice {
      color: #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>

Ambos ejemplos son fragmentos de HTML para comparar dónde están escritos. Al cambiar métodos en este ejercicio, elimina cualquier declaración de las mismas propiedades que pusiste con el método anterior. Dejar múltiples métodos al mismo tiempo dificulta distinguir entre fallos de conexión y conflictos de reglas.

Vincula una hoja de estilo externa

Crea una carpeta vacía garden y guarda los siguientes tres archivos: El archivo CSS contiene solo CSS y no incluye la etiqueta <style>. Ambos archivos HTML se vinculan a style.css en la misma carpeta.

garden/
├─ index.html
├─ visit.html
└─ style.css

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Small Garden</h1>
  <p class="notice">We open at 9 a.m. every day.</p>
  <a href="visit.html">View visitor information</a>
</body>
</html>

visit.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visitor Information</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Visitor Information</h1>
  <p class="notice">Bring a water bottle and comfortable shoes.</p>
  <a href="index.html">Return to the garden introduction</a>
</body>
</html>

style.css

body {
  margin: 24px;
  font-family: sans-serif;
  line-height: 1.7;
}
h1 { color: #087f5b; }
.notice {
  padding: 16px;
  border: 1px solid #087f5b;
  background-color: #e9f7ef;
}

rel="stylesheet" significa que el archivo conectado es una hoja de estilos, y href="style.css" es la ubicación del archivo a leer. En los documentos HTML5, no es necesario escribir type="text/css" por separado en conexiones CSS regulares. Este ejercicio, que abre archivos locales directamente, no requiere servidor ni bibliotecas adicionales.

Cuando abras index.html en tu navegador, verás un título verde y un cuadro de información claro. Haz clic en «View visitor information» (ver información para visitantes) para ir a visit.html, y aunque el contenido sea diferente, el color del título y la forma del cuadro de información son los mismos. Si cambias el color del título de style.css a #1d4ed8 y luego recargas ambas páginas, ambos títulos se volverán azules. Esta es la ventaja de usar archivos comunes.

Elige una ruta para la estructura de carpetas

La ruta que se muestra a continuación se lee en función de la ubicación del documento HTML. Como en el ejemplo, la premisa es un documento normal cuya URL base no ha sido reemplazado con el elemento base. Si mueves el archivo CSS, debes cambiar no solo el nombre del archivo sino también href.

garden/
├─ pages/
│  └─ index.html
└─ css/
   └─ style.css

Para la última disposición de carpetas, escribe <link rel="stylesheet" href="../css/style.css"> en pages/index.html. El segmento ../ sube un directorio. Las rutas web usan barras inclinadas hacia adelante. Una barra inicial, como en /css/style.css, se resuelve desde la raíz del sitio y tiene un significado diferente de esta ruta relativa al archivo local. Consulta MDN: Primeros pasos.

Diagnostica problemas de carga, selección y cascada

1. Primero, verifica la conexión del archivo. Comprueba que la extensión no esté guardada como .css.txt y que el href y la ubicación real de la carpeta coincidan. Comprueba también las mayúsculas y minúsculas de los nombres: un servidor puede distinguirlas aunque tu sistema local no lo haga. Si la página se abre en un servidor web, puedes verificar la solicitud y respuesta de CSS en Red en Herramientas de Desarrollador. Los archivos locales pueden no mostrar el mismo código de estado HTTP.
2. Verifica que el selector coincida con el elemento. Si el HTML contiene class="notice", pero el CSS dice .notcie, el aviso no cambiará aunque el archivo se cargue. En las herramientas de desarrollo, consulta la clase real en Elements y busca la regla correspondiente en Styles.
3. Comprueba si otra regla ha sobrescrito la declaración. Si una declaración de color diferente gana después, la declaración original puede aparecer tachada en Estilos. Distingue las declaraciones que ganan en la cascada de un problema de carga del archivo CSS.

Para comprobar si la hoja de estilos se carga, añade temporalmente body { background-color: #fff4cc; } al final y recarga la página. Una página amarilla confirma que el archivo está conectado. Después, comprueba si el selector del aviso coincide y si otra declaración prevalece. Al terminar, elimina la regla temporal. !important no puede reparar un archivo faltante o un selector mal escrito. Para más detalles, consulta Inspeccionar CSS con DevTools: Estilos y Calculado.