¿Qué es CSS? Explicamos el Cascading Style Sheets CSS

Mientras que HTML se utiliza para definir la estructura y la semántica del contenido, CSS se usa para darle estilo y posicionarlo visualmente. CSS se puede usar, por ejemplo, para cambiar la fuente, el color, el tamaño y el espaciado del contenido, para formar multiples columnas, añadir animaciones y otros elementos decorativos. En este tutorial, hemos visto varias formas con las que se puede diseñar un documento usando CSS. Desarrollaremos este conocimiento a medida que avancemos con el resto de las lecciones. Sin embargo, ahora ya sabes lo suficiente como para aplicar estilo al texto, aplicar CSS en función de diferentes formas de determinar elementos en el documento y buscar propiedades y valores en la documentación de MDN.

  • En lugar de hacer un listado del contenido de la página, CSS utiliza las reglas asignadas a elementos HTML, un documento HTML completo o varios de ellos.
  • En este lenguaje, es posible incluir toda la información referente al contenido, así como las imágenes, audios y estilos.
  • Terminaremos el módulo analizando la aplicación de fuentes personalizadas a tu página y en el estilo de listas y enlaces.

El ejemplo que encontrarás a continuación incluye las dos reglas anteriores. Intenta añadir una regla para que un span dentro de un párrafo se vuelva rojo. Sabrás si lo has hecho bien si el en el primer párrafo se vuelve rojo pero el que hay en el primer elemento de la lista no cambia de color.

Cajas, cajas, todo se trata de cajas

Por ejemplo, es posible que desees que el del párrafo también sea naranja y en negrita. Intenta añadirle una class special, luego vuelve a cargar la página y observa qué sucede. No todas las propiedades son compatibles con todos los navegadores, no obstante, algunas son bastante amigables, curso de desarrollo web como color y ancho. Ten en mente la compatibilidad entre navegadores si las propiedades que usas son menos habituales. Probar tus diseños en navegadores comunes (así como en dispositivos móviles y de escritorio) es una buena práctica para garantizar una buena experiencia de usuario.

CSS

Las personas que ya están familiarizadas con HTML notarán que la sintaxis de CSS es un poco distinta. En lugar de hacer un listado del contenido de la página, CSS utiliza las reglas asignadas a elementos HTML, un documento HTML completo o varios de ellos. Estas son procesadas por el navegador web cuando carga el archivo HTML. Esto significa que se pueden crear bloques de instrucciones anidadas que permiten hacer modificaciones generales, de modo sencillo, lo cual simplifica la tarea de diseño y la creación de estilos estandarizados.

Dar estilo al cuerpo del documento

Estas instrucciones representan todos los enlaces (o hipertextos) que vinculan los contenidos de una página, por lo que HTML es la base de cualquier sitio web. En este lenguaje, es posible incluir toda la información referente al contenido, así como las imágenes, audios y estilos. Sin embargo, su uso para estas tareas conlleva una mayor complejidad en el código fuente. Antes de https://www.pronetwork.mx/aprende-a-programar-con-el-curso-de-desarrollo-web-de-tripleten/, los diseñadores que deseaban asignar características tipográficas, por ejemplo, a todos los elementos h2 tenían que repetir el código presentacional HTML por cada elemento al que se le deseaba aplicar ese estilo. Esto creaba documentos más complejos, largos, más propensos a errores y difíciles de mantener. CSS puede definir el color, fuente, alineación del texto, tamaño, bordes, espaciado, capas y muchas otras características tipográficas, y pueden aplicarse distintos estilos de impresión y de pantalla.

  • Sin embargo, Internet sería un lugar muy aburrido si todas las páginas web se vieran así.
  • Los navegadores, como por ejemplo Firefox, Chrome o Edge (en-US), están diseñados para presentar documentos visualmente en una pantalla de ordenador, un proyector o una impresora.
  • En este punto ya hemos analizado los fundamentos de CSS, cómo dar estilo al texto y cómo diseñar y manipular las cajas en las que se encuentra el contenido.
  • CSS (Cascading Style Sheets) te permite crear páginas Webs atractivas, pero ¿Cómo funciona por debajo?