¿Alguna vez has querido saber cómo representar texto en CSS para la lista de movimientos de una app? En artículos anteriores de KeepCoding, hemos estado realizando ejercicios prácticos para desarrollar una app que registre los ingresos y gastos de una cuenta. Por eso, ahora es importante que sepas cómo representar texto en CSS para la lista de movimientos, pues será la forma en la que aparecerán los movimientos de la aplicación. Así pues, a continuación, te presentamos el proceso para representar texto en CSS para la lista de movimientos.
¿Cómo funciona CSS?
CSS o hoja de estilo en cascada es una hoja de estilos que se encarga de presentar parámetros para configurar el estilo de un programa donde se desarrolle una app o plataforma web. Te permitirá generar otro fichero de texto, que te dejará seleccionar elementos de la página web y otorgarle propiedades a los elementos de tu página.
Por ejemplo, podrás determinar un color y un tipo de fuente específico a un cuadro de texto con variables como color, font-size o font bajo una sola variable, pues a ella deberás agregarle valores tal como dark orange o 30px, según sea el tipo de librería que estás importando a tu proyecto de código.
Imagínate que estás trabajando dentro de Word, donde, de igual forma, puedes modificar el color de las oraciones, manejar el tamaño de cada una de ellas y adjudicarles una font en específico, tanto a cuadros de texto, títulos y subtítulos, como a tablas realizadas en el lenguaje de marcado HTML.
CSS trabaja con selectores específicos, dentro de HTML, para que después CSS sea donde deberá aplicar los parámetros de estilo. Es decir, puedes modificar el estilo en el mismo fichero donde está el texto en HTML con las etiquetas <style>. No obstante, esto puede darse si hay más de un elemento del mismo tipo. Por esto tendrás que poner una clase para el elemento que estás modificando, ejemplo que explicaremos a continuación.
Pasos para representar texto en CSS para la lista de movimientos
Para representar el texto en CSS para la lista de movimientos, deberás tener en cuenta que este proceso lo puedes realizar tanto en fichero de inicio de HTML, como en el fichero de syles.css. Para cada fichero, deberás realizar un proceso distinto, dado que si lo haces desde el fichero de HTML con los parámetros de CSS, deberás crear una clase específica para cada elemento que quieras caracterizar.
En un principio, puedes modificar todos los elementos de la misma clase de la siguiente manera:
🔴 ¿Quieres Aprender a Programar con Python? 🔴
Descubre el Full Stack Jr. Bootcamp - Aprende a Programar desde Cero de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada
👉 Prueba gratis el Bootcamp Aprende a Programar desde Cero por una semana<style>
table {
color: red
}
</style>
Esto cambiará todas los elementos que se llamen table. Si, en cambio, quieres que solo se modifiquen un determinado tipo de elementos, deberás establecer una clase dentro del fichero de HTML. Este será un seleccionador que le indicará al navegador que tendrá que acceder a todos los elementos con este nombre. Para la tabla de la línea de movimientos deberás realizar el siguiente proceso:
- Primero, tendrás que establecer la clase de los elementos que deseas modificar, dentro del grupo de main del texto en HTML.
- Después, podrás modificar el texto de la lista de movimientos dentro de la etiqueta style de la tabla.
#establecer la clase en main
<main>
<tabla class = «lista_movimientos»>
<footer class = «pie-de-pagina»>
</main>
#modificar el estilo de la tabla
<style>
#para toda la tabla
.lista_movimientos {
border – collapse: collapse; #para que los bordes no tengan separación
separación
border: solid 1px black; #para integrar los bordes de toda la tabla
}
#para los encabezados de la tabla
.lista_movimientos th {
border: solid 1px black; #para integrar los bordes de los encabezados de la tabla
}
.lista_movimientos td {
border: solid 1px black; #para integrar los bordes de los encabezados de la tabla
}
#modificar el pie de página de la tabla
.pie-de-pagina {
margin – top: 25px;
</style>
De esta manera, ya habrás modificado la tabla de la lista de movimientos de forma sencilla desde el fichero de inicio de HTML, como puedes ver a continuación:
Sigue desarrollando con KeepCoding
Gracias a este artículo, ya sabes cómo representar texto en CSS para la lista de movimientos y puedes reproducir el proceso en otros programas de código de una índole diferente. La hoja de estilos de CSS te permite otorgarle tu estilo preferido a una página o app web.
Así pues, si quieres seguir aprendiendo acerca de cómo puedes desarrollar una app web de forma mucho más profesional y desde los conceptos base del código, te recomendamos visitar el programa de Aprende a Programar desde Cero Full Stack Jr. Bootcamp. ¡No dudes en matricularte para convertirte en un profesional!
