Los preprocesadores son herramientas indispensables para el desarrollo frontend actual. Permiten desarrollar CSS de una manera más ágil pero sobretodo crear un código más mantenible. Estos selectores obtienen las imágenes que tengan el atributo alt y los párrafos que tengan la clase “desactivado”. El enfoque de CSS es servir para definir la capa de presentación, es decir, la parte relacionada con el aspecto.

  • Ahora que has explorado lo básico de CSS, empieza por añadir información y algunas reglas más a tu archivo style.css para que tu ejemplo se vea bonito.
  • Los selectores en CSS nos permiten acceder a cualquier elemento o grupo de elementos, para aplicar estilos sobre el/ellos en una única declaración.
  • Aquí la práctica hace al maestro y este artículo pretende ser de introducción para que te animes a dar tus primeros pasos.
  • Básicamente se trata de entender esos componentes principales y conocer las posibles variantes que existen para conseguir los estilos que necesitamos.
  • Los navegadores Web al aplicar las reglas CSS a un documento modifican la manera en que este nos es presentado.

A medida que las especificaciones han ido avanzando se han ido completando con nuevas variantes para conseguir fondos con múltiples configuraciones. Los frameworks CSS permiten por tanto un desarrollo optimizado, que además es muy útil en proyectos empresariales, donde sea necesario seguir una misma línea de diseño por varios desarrolladores. Esto funciona especialmente bien cuando quieres utilizar un valor que es bastante nuevo que no admiten todos los navegadores.

Una representación real de un DOM

Es algo que cualquier estudiante suele tener claro cuando está aprendiendo https://bitcu.co/carrera-en-ti-bootcamp-de-programacion/, ya que al enseñar HTML probablemente se haya insistido, pero que siempre conviene reforzar. CSS te permite tener múltiples estilos en una página HTML, y esto hace que las posibilidades de personalización sean casi infinitas. Hoy en día, esto se está volviendo una necesidad más que algo básico. CSS fue desarrollado por W3C (World Wide Web Consortium) en 1996 por una razón muy sencilla. HTML no fue diseñado para tener etiquetas que ayuden a formatear la página. En nuestro artículo Depurar el CSS que encontrarás en el siguiente módulo, vamos a utilizar las herramientas DevTools del navegador para depurar posibles problemas en el CSS.

También aprenderemos más sobre cómo el navegador interpreta el CSS. Enseguida, se ha puesto un relleno arriba y abajo del título de 20 píxeles, y se hizo que el color del texto sea el mismo que el color de fondo de html. Sigue añadiendo estas reglas nuevas al final de la página, y no temas experimentar cambiando los valores para ver cómo resulta. Una cosa que notarás sobre la escritura de CSS es que trata mucho sobre cajas —ajustando su tamaño, color, posición, etc—.

Titular de la página

Quizás hayas visto algún sitio web que no se puede cargar por completo y tiene un fondo blanco con la mayor parte del texto en azul y negro. Eso significa que la parte bootcamp de programación del sitio no se cargó correctamente o no existe. Si un navegador analiza tus reglas y encuentra una propiedad o un valor que no entiende, lo ignora y avanza hasta la declaración siguiente. Esto sucederá si has cometido un error y has escrito mal una propiedad o un valor, o si la propiedad o el valor son demasiado nuevos y el navegador aún no los admite.

  • Además, no todo el mundo utiliza la última versión de un navegador.
  • CSS permite agrupar reglas que aplican a diferentes etiquetas en una sola regla con un selector múltiple.
  • Cuando comiences a trabajar con las herramientas DevTools (o herramientas del desarrollador) del navegador, te moverás por el DOM mientras seleccionas elementos con el fin de ver qué reglas se aplican.
  • Estos nos ayudan a seleccionar los elementos afectados por el nuevo valor de la propiedad.
  • Desde poner en negrita un texto, cambiar su color o alinear una fotografía se iba haciendo casi de manera artesanal añadiendo línea a línea comentarios que ayudaban a su personalización.

Durante su evolución el lenguaje de marcas HTML ha ido permitiendo cierto grado de personalización. Desde poner en negrita un texto, cambiar su color o alinear una fotografía se iba haciendo casi de manera artesanal añadiendo línea a línea comentarios que ayudaban a su personalización. Existen multitud de atributos de CSS para gestionar el fondo de cualquier elemento de la página.