Introducción a CSS

Introducción a CSS

Introducción a CSS

Cascade Style Sheets (CSS), o Estilos en Cascada, es el lenguaje con el que se definen los estilos que se aplican a los elementos de HTML que forman la estructura de una página web. Este lenguaje, al igual que HTML, es mantenido por el consorcio W3C, quienes en fechas recientes liberaron el nivel de especificación 3 (CSS3).

La finalidad de utilizar Estilos en cascada, es separar la estructura (HTML) de la presentación (CSS), que es la forma adecuada de realizar un sitio web en la actualidad.

Introducción a CSS

El lenguaje es bastante sencillo de comprender, ya que los atributos son palabras en inglés que representan claramente lo que harán sobre el elemento al que se aplica, que puede ser cualquier etiqueta de HTML, ya sea sola o con alguna clase o identificador.

Sintaxis de los Estilos en cascada

El conjunto de elementos que conforman una instrucción a aplicar en un elemento de HTML se le conoce como Regla de CSS, y consta de:

Selector

El o los elementos de html a los que se dará formato. Pueden ser uno o varios elementos, si son varios, se separa cada uno mediante una coma; también pueden aplicarse estilos a elementos con clase o a elementos con identificadores, escribiendo el nombre de la clase o identificador antecedido por un punto (.) en el caso de clase, o un signo de número (#) en el caso de identificador:

  • Elemento simple:
body {...}
  • Varios elementos:
h1, h2, h3, h4, h5, h6 {...}
  • Clase:
.clase {...}
  • Identificador:
#identificador {...}

A continuación del selector, abrimos y cerramos llaves {}, en medio de estas van las propiedades y sus valores.

Si deseas conocer mas acerca de Identificadores y Clases en HTML, puedes acceder al artículo dando clic aquí.

Propiedad

La instrucción que afectará al elemento, seguida de dos puntos (:).

Valor

Seguido a la propiedad va el valor de la instrucción, terminando con punto y coma (;).

Propiedad y valor en Regla de CSS
Propiedad y valor en Regla de CSS

Al conjunto de Propiedad con Valor se le denomina declaración.

Declaración en Regla de CSS
Declaración en Regla de CSS

Una regla de CSS puede contener varias declaraciones, cada una de ellas separadas por un espacio en blanco o en una línea nueva.

body {background-color:lightblue; color: darkblue;}
body {
     background-color: lightblue;
     color: darkblue;
}

Aplicación de Estilos en cascada

Los estilos en cascada pueden aplicarse de tres formas:

En el código HTML

 <body style="background-color:lightblue; color:blue">...</body>

Mediante el atributo style directamente en la instrucción, su valor son los estilos que aplicarán al elemento.

See the Pen estilosEnHtml by Miguel Méndez (@codigo-web) on CodePen.0

Al ir directamente en el código HTML se omite el selector y las llaves, escribiendo las declaraciones como el valor del atributo style.

Esta es la forma menos recomendada de aplicar estilos en cascada, ya que los estilos se encuentran en la estructura del documento.

Si se requiere un cambio en el diseño del sitio web, se tendría que buscar el estilo a modificar en todo el código de cada uno de los documentos HTML que compongan al sitio web, lo que resultaría en un proceso sumamente tedioso.

En la cabeza del documento HTML, envuelto por la instrucción style

Esta es una mejor forma de escribir los estilos en cascada, ya que la presentación se encuentra separada de la estructura, pero aún se encuentra en el documento de HTML.

See the Pen estilosEnHead by Miguel Méndez (@codigo-web) on CodePen.0

Sigue representando un problema, debido a que realizar un cambio en el estilo del sitio web implica hacer el cambio en cada uno de los documentos HTML del sitio web.

En un documento por separado

Mediante un archivo con extensión .css (Cascade Style Sheet). Es, por mucho la mejor forma de incluir los estilos en cascada a un sitio web.

La presentación del sitio está completamente separada de la estructura. En cada uno de los documentos HTML del sitio se llama a la hoja de estilos mediante la instrucción link:

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

El valor del atributo rel es stylesheet, indicando que la relación que tendrá el vínculo al documento es una hoja de estilos. El valor de el atributo href es la ruta a donde se encuentra el archivo de Hoja de estilos.

Herencia en CSS

Se conoce como Herencia a la facultad que tienen los Estilos en cascada de transferir las características asignadas de elementos padres a elementos hijos. Por ejemplo, si asignamos que body tenga un color de texto rojo, todos los hijos de body mostrarán los textos en color rojo.

See the Pen Herencia by Miguel Méndez (@codigo-web) on CodePen.0

Años atrás, la presentación y la estructura estaban mezcladas. Dentro del código HTML, se colocaban atributos y valores que daban formato a los elementos. Como consecuencia, el código era sumamente difícil de mantener, ya que, en caso de requerir cambios, era necesario localizar cada elemento a modificar en cada una de las páginas que formaban el sitio web.

En ese entonces, el uso de los estilos en cascada no era generalizado, ya que los diversos navegadores web interpretaban el lenguaje de forma diferente, ya que no se apegaban a las consideraciones del W3C.

En la actualidad, los principales navegadores interpretan de manera correcta el lenguaje, por lo que solo debemos preocuparnos si por alguna razón se tuviera que dar soporte a navegadores antiguos, principalmente Internet Explorer 9 o anteriores.

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

2 Comentarios en "Introducción a CSS"

avatar
Ordenar por:   más recientes | más antiguos | más votados
rafael castellanoses
Invitado

Excelente Articulo.

wpDiscuz