Introducción a CSS

CSS es el lenguaje que define la apariencia visual de una página HTML en el navegador. Está evolucionando rápidamente y, gracias a las funciones más nuevas, CSS nunca ha sido tan fácil de usar.

Que es CSS

CSS(una abreviatura deHojas de estilo en cascada) es el lenguaje que usamos para diseñar un archivo HTML y decirle al navegador cómo debe representar los elementos en la página.

Surgió de la necesidad de diseñar páginas web. Antes de que se introdujera CSS, la gente quería una forma de diseñar sus páginas web, que se veían todas muy similares y "académicas" en el día. No se podía hacer mucho en términos de personalización.

HTML 3.2 introdujo la opción de definir colores en línea como atributos de elementos HTML y etiquetas de presentación comocenteryfont, pero eso escaló rápidamente a una situación que dista mucho de ser ideal 😱.

CSS nos permite mover todo lo relacionado con la presentación del HTML al CSS, para que HTML pueda volver a ser el formato que define la estructura del documento, en lugar de cómo deberían verse las cosas en el navegador.

CSS está evolucionando continuamente, y el CSS que usó hace 5 años podría estar desactualizado, ya que surgieron nuevas técnicas de CSS idiomáticas y los navegadores cambiaron.

Una breve historia de CSS

Antes de continuar, quiero darle un breve resumen de la historia de CSS.

CSS nació de la necesidad de diseñar páginas web. Antes de que se introdujera CSS, la gente quería una forma de diseñar sus páginas web, que se veían todas muy similares y "académicas" en el día. No se podía hacer mucho en términos de personalización.

HTML 3.2 introdujo la opción de definir colores en línea como atributos de elementos HTML y etiquetas de presentación comocenteryfont, pero eso escaló rápidamente a una situación que dista mucho de ser ideal.

CSS nos permite mover todo lo relacionado con la presentación del HTML al CSS, para que HTML pueda volver a ser el formato que define la estructura del documento, en lugar de cómo deberían verse las cosas en el navegador.

CSS está evolucionando continuamente, y el CSS que usó hace 5 años podría estar desactualizado, ya que surgieron nuevas técnicas de CSS idiomáticas y los navegadores cambiaron.

Es difícil imaginar los tiempos en que nació CSS y lo diferente que era la web.

En ese momento, teníamos varios navegadores competidores, siendo los principales Internet Explorer o Netscape Navigator.

Las páginas se diseñaron utilizando HTML, con etiquetas de presentación especiales comoboldy atributos especiales, la mayoría de los cuales ahora están en desuso.

Esto significaba que tenía una cantidad limitada de oportunidades de personalización.

La mayor parte de las decisiones de estilo se dejaron en manos del navegador.

Además, creó un sitio específicamente para uno de ellos, porque cada uno introdujo diferentes etiquetas no estándar para brindar más poder y oportunidades.

Pronto, la gente se dio cuenta de la necesidad de una forma de diseñar las páginas, de manera que funcionara en todos los navegadores.

Después de la idea inicial propuesta en 1994, CSS obtuvo su primer lanzamiento en 1996, cuando se publicó la recomendación de CSS Nivel 1 ("CSS 1").

CSS Nivel 2 ("CSS 2") se publicó en 1998.

Desde entonces, se comenzó a trabajar en CSS Nivel 3. El Grupo de Trabajo de CSS decidió dividir cada característica y trabajar en ella por separado, en módulos.

Los navegadores no fueron especialmente rápidos en la implementación de CSS. Tuvimos que esperar hasta 2002 para que el primer navegador implementara la especificación CSS completa: IE para Mac, como se describe en esta publicación de Trucos CSS:https://css-tricks.com/look-back-history-css/

Internet Explorer implementó el modelo de caja de manera incorrecta desde el principio, lo que llevó a años de dolor al tratar de aplicar el mismo estilo de manera consistente en todos los navegadores. Tuvimos que usar varios trucos y trucos para que los navegadores renderizaran las cosas como queríamos.

Hoy las cosas están mucho mejor. Podemos usar los estándares CSS sin pensar en peculiaridades, la mayoría de las veces, y CSS nunca ha sido más poderoso.

Ya no tenemos números de lanzamiento oficiales para CSS, pero el Grupo de Trabajo de CSS publica una “instantánea” de los módulos que actualmente se consideran estables y listos para ser incluidos en los navegadores. Esta es la última instantánea de 2018:https://www.w3.org/TR/css-2018/

CSS Nivel 2 sigue siendo la base para el CSS que escribimos hoy, y tenemos muchas más funciones construidas sobre él.

¿Cómo se ve CSS?

Un CSSconjunto de reglastiene una parte llamadaselector, y la otra parte llamadadeclaración. La declaración contiene variosnormas, cada uno compuesto por unpropiedady unvalor.

En este ejemplo,pes el selector y aplica una regla que establece el valor20pxhaciafont-sizepropiedad:

p {
  font-size: 20px;
}

Varias reglas se apilan una tras otra:

p {
  font-size: 20px;
}

a {
color: blue;
}

Un selector puede apuntar a uno o más elementos:

p, a {
  font-size: 20px;
}

y puede apuntar a etiquetas HTML, como arriba, o elementos HTML que contienen un determinado atributo de clase con.my-classo elementos HTML que tienen una especificidadidatributo con#my-id.

Los selectores más avanzados le permiten elegir elementos cuyo atributo coincide con un valor específico, o también elementos que responden a pseudoclases (más sobre esto más adelante)

Punto y coma

Cada regla de CSS termina con un punto y coma. Los puntos y comas sonnoopcional, excepto después de la última regla, pero sugiero usarlos siempre por coherencia y para evitar errores si agrega otra propiedad y se olvida de agregar el punto y coma en la línea anterior.

Formato y sangría

No hay una regla fija para formatear. Este CSS es válido:

      p
      {
  font-size:           20px   ;
                      }

a{color:blue;}

pero un dolor de ver. Cíñete a algunas convenciones, como las que ves en los ejemplos anteriores: pegar selectores y los corchetes de cierre a la izquierda, sangrar 2 espacios para cada regla, tener el corchete de apertura en la misma línea del selector, separados por un espacio.

El uso correcto y coherente del espaciado y la sangría es una ayuda visual para comprender su código.

¿Cómo se carga CSS en una página web?

CSS se puede cargar en una página de 3 formas: con unstyleetiqueta en la páginahead, con un archivo CSS externo y en línea en etiquetas. CSS se adjunta a una página HTML de diferentes formas.

loslinketiqueta es la forma de incluir un archivo CSS. Esta es la forma preferida de usar CSS como está previsto: todas las páginas de su sitio incluyen un archivo CSS, y cambiar una línea en ese archivo afecta la presentación de todas las páginas del sitio.

Para utilizar este método, agrega unlinketiqueta con elhrefatributo que apunta al archivo CSS que desea incluir. Lo agregas dentro delheadetiqueta del sitio (no dentro delbodyetiqueta):

<link rel="stylesheet" type="text/css" href="myfile.css">

losrelytypeLos atributos también son obligatorios, ya que le indican al navegador a qué tipo de archivo nos estamos vinculando.

2: usando elstyleetiqueta

En lugar de utilizar ellinkpara apuntar a una hoja de estilo separada que contiene nuestro CSS, podemos agregar el CSS directamente dentro de unstyleetiqueta. Esta es la sintaxis:

<style>
...our CSS...
</style>

Con este método podemos evitar la creación de un archivo CSS separado. Encuentro que esta es una buena manera de experimentar antes de "formalizar" CSS en un archivo separado, o de agregar una línea especial de CSS solo a un archivo.

3: estilos en línea

Los estilos en línea son la tercera forma de agregar CSS a una página. Podemos agregar unstyleatributo a cualquier etiqueta HTML y agregue CSS en él.

<div style="">...</div>

Ejemplo:

<div style="background-color: yellow">...</div>

Descarga mi gratisManual de CSS


Más tutoriales de CSS:


Tech Wiki en línea!