Apuntes de clase

Clase 04 · Otras formas de declarar CSS

Estos apuntes siguen la cuarta clase de Edición Web I: repasamos que existen 3 lugares distintos donde escribir CSS y que los tres pueden funcionar a la vez en una misma página (archivos en cascada), vemos con detalle el CSS interno y el CSS en línea —las dos formas que nos faltaban por ver— y cerramos con un resumen de selectores. El código de cada ejemplo es exactamente el mismo que se mostró en clase.

Descargar PDF

01 · Archivos en cascada

Archivos en cascada

Podemos declarar CSS en 3 sitios diferentes y los tres pueden funcionar a la vez, en la misma página:

Las 3 formas de declarar CSS

CSS Externo

archivos .css

CSS Interno

dentro de <head>

CSS en línea

uso de style="..."

La primera —archivo externo— ya la conocemos de la clase anterior. En esta clase vemos las otras dos: interno y en línea.

02 · Las 3 formas de declarar CSS

1 · CSS externo (archivos .css)

Es la que ya conocemos de la clase anterior: vinculamos un archivo .css aparte mediante la etiqueta <link>, dentro del <head> de la página.

index.html

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

Los selectores viven en el archivo .css, separado del HTML. Es la forma que usaremos como norma general en el resto del curso.

02 · Las 3 formas de declarar CSS

2 · CSS interno (dentro de <head>)

Declaramos el código CSS en la misma página HTML. El código va dentro de unas etiquetas <style> </style>, y estas a su vez dentro del <head> de la página.

index.html

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>
<body>
  <h1>Título</h1>
</body>

Se declara dentro del head, entre las etiquetas <style> </style>.
Dentro de <style> escribimos selectores exactamente igual que en un archivo .css (elemento, clase o ID).

02 · Las 3 formas de declarar CSS

3 · CSS en línea (style="...")

Declaramos el código CSS dentro de la propia etiqueta HTML, dentro del parámetro style="valor". Como lo estamos aplicando directamente sobre una etiqueta determinada, no necesitamos declarar el selector.

index.html

<h1 style="color: red;">Título</h1>

02 · Las 3 formas de declarar CSS

Qué saber del CSS en línea

Su utilidad: sobrescribir una clase

El estilo en línea tiene más prioridad que cualquier clase, ID o elemento de un archivo CSS (externo o interno). Por eso es muy útil cuando queremos cambiar una sola propiedad en un elemento concreto, sin crear una clase nueva ni tocar el archivo CSS.

style.css

.aviso {
  color: red;
  font-weight: bold;
}

index.html

<p class="aviso">Aviso normal</p>
<p class="aviso" style="color: orange;">Aviso con otro color</p>

Los dos párrafos comparten la clase .aviso (negrita), pero el segundo pisa solo la propiedad color con su style en línea. El resto de la clase —font-weight: bold— se mantiene igual.

Cuidado si pones muchas propiedades

No es recomendable si queremos poner muchas propiedades: si lo hacemos, puede ser más complicado entender nuestro propio código.

index.html

<h1 style="color:red; font-size:254px; border:2px solid red; padding:10px 8px;">Titulo</h1>

Cuantas más propiedades metemos en el mismo atributo style, más larga y difícil de leer se vuelve la línea. Por eso, para varias propiedades solemos preferir CSS externo o interno, y dejar el CSS en línea para sobrescribir puntualmente.

03 · Resumen

Resumen

Un vistazo de conjunto a las 3 formas de declarar CSS y a los selectores, incluyendo el selector universal, que no habíamos visto todavía.

Las 3 formas de declarar CSS

Forma	Dónde se declara	Sintaxis
Externo	Archivo `.css` aparte, enlazado desde el `<head>`.	`<link rel="stylesheet" href="archivo.css">`
Interno	Dentro del `<head>`, entre `<style> </style>`.	`<style> selector { propiedad: valor; } </style>`
En línea	Dentro de la propia etiqueta HTML.	`<h1 style="color:red;">Título</h1>`

Las tres pueden convivir en la misma página: si coinciden sobre el mismo elemento, gana el en línea sobre cualquier CSS de archivo, y entre externo e interno gana el que se declare más abajo en el <head>.

Selectores CSS

Selector	Sintaxis CSS	Descripción
Universal	`* { }`	Aplica el estilo a todos los elementos de la página, sin tener que indicar nada en el HTML.
Elemento	`body { }`	Aplica el estilo a todos los elementos de ese tipo (ej. todos los `<h1>`).
Clase	`.nombre-clase { }`	Se llama desde HTML con `class="nombre-clase"`. Se puede repetir en varias etiquetas.
ID	`#nombre-id { }`	Se llama desde HTML con `id="nombre-id"`. Solo debe usarse una vez por página.