¿Sabes qué es CSS y cómo se relaciona con HTML?

Lanzamientos 17 de Junio del 2019

user

Jessica Rodríguez

¿Sabes qué es CSS y cómo se relaciona con HTML? ¿Sabes qué es CSS y cómo se relaciona con HTML?

Si recientemente has comenzado a introducirte en el mundo de la programación y el diseño web, seguramente te has topado con el término CSS, un lenguaje que define la apariencia de las páginas web. Sabemos que puede ser difícil, a primera vista, entender exactamente qué hace y cómo funciona. Por eso hoy decidimos darnos a la tarea de contártelo ¿nos sigues?

Por sus siglas en inglés CSS significa Cascading Style Sheets (hojas de estilo en cascada) se utiliza, como ya dijimos, para darle una mejor apariencia a la forma en la que presentamos los documentos a los usuarios, es decir, su estilo o diseño.

Comúnmente los documentos son archivos de texto estructurados en donde se utiliza un lenguaje de marcado, HTML es el más común, aunque también existen otros como SVG o XML.

Ahora bien, presentar un documento significa ponerlo en un navegador donde los usuarios tienen la posibilidad de entrar y verlo de forma ordenada y estructurada, así como con una apariencia agradable. Pero para que esto suceda primero hay que convertirlo en algo que se pueda utilizar para que los navegadores como Firefox, Chrome o Internet Explorer puedan mostrarlos correctamente.

HTML y CSS

Encuentra aquí un curso introductorio para desarrollar una página weB con CSS y HTML

Reglas para CSS

Para que el CSS funcione tiene que comenzar por seguir ciertas reglas, las cuales se componen de:

– Un conjunto de propiedades con valores predeterminados que permitan modificar la presentación del contenido HTML. Ejemplo: quiero que junto al título haya un banner y que tenga un fondo negro.

–También es necesario un selector que se encargará de elegir los elementos afectados por el nuevo valor de la propiedad. Ejemplo: quiero que mi regla CSS aplique para todos los encabezados de mi página.

¿Cómo funciona el CSS?

Se les llama estilos en cascada porque se aplican de arriba a abajo siguiendo un patrón al que se le denomina herencia. En caso de que exista ambigüedad se utilizan una serie de reglas como las que mencionamos arriba.

El CSS se suele trabajar con una separación de presentación y contenido, de esta forma los datos HTML solo incluirán información y datos que se refieren al significado de la información a transmitir. Este proceso se lleva a cabo en dos fases:

1. El navegador convierte HTML y CSS en un DOM (Objeto Documento Modelo) este DOM funciona como un documento para la memoria del ordenador, de forma que puede combinar el contenido del documento con su estilo.

2. El navegador muestra el contenido del DOM.

¿Quieres aprender a usar CSS y HTML como todo un experto?

El DOM

DOM tiene una estructura de árbol, cada elemento, atributo y sección del texto en el lenguaje de marcado se convierte en un nodo DOM node en la estructura del árbol. Ahora bien, la forma en la que se define cada nodo es por su relación con los demás. Hay elementos padres, hijos o hermanos. Como podemos ver en el siguiente ejemplo.

Nodos DOM

Ventajas de CSS

 

– Unificar todo lo referente al diseño visual en un solo documento

– Se pueden hacer modificaciones en un solo lugar sin tener que recurrir a los archivos HTML por separado

– Es menor la probabilidad de que exista duplicación de estilos en diferentes lugares, debido a esto es más fácil de organizar y hacer cambios. A esto debemos añadir que la información a transmitir es considerablemente menor y por tanto las páginas también se descargan más rápido

– La creación de versiones para otros dispositivos: tablets o smartphones se simplifica

 

Definitivamente si lo que te interesa es perfeccionarte o iniciar en el diseño de páginas web necesitas comenzar aprendiendo CSS y Crehana es el lugar perfecto para ti.

Recomendados para ti