Estilos en Angular con CSS: Aplicación de Películas

Curso de Frameworks y Librerías de JavaScript

Contenido del curso

Fundamentos del Desarrollo Web Profesional

Contexto y funcionamiento de los Frameworks JavaScript

Estilos con CSS, preprocesadores y CSS-in-JS

Cómo escalar sitios o aplicaciones web

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:27

Estilos en Angular con CSS: Aplicación de Películas

Curso de Frameworks y Librerías de JavaScript

Clase 18 de 28

Clase 18 / 28

Comentarios (15)15 comentarios

Jimmy Buriticá Londoño

Hace 6 años

CSS-in-JS

Juan Castro

Profesor

Hace 6 años

:joy: Neta sí me dio mucha risa :laughing:

:warning: ¡PERO!

:sweat_smile: A lo mejor para cambiar un solo bombillito puede ser innecesario. Demasiadas complicaciones para conseguir un resultado que pudimos lograr sin enredarnos tanto.

:relieved: Sin embargo, cuando no trabajamos con un solo bombillito, sino con todo el sistema de iluminación de una casa gigante (como un hotel), entonces es SUPER ÚTIL tener una maquinita que nos ahorre el trabajo de ir habitación por habitación y pasillo por pasillo cambiando cada bendito bombillito. :ok_hand:

(espero haberme hecho entender con la metáfora de los bombillos :P)

Reinaldo Mendoza

Hace 5 años

Genio!!

Fabián Andrés Pacherres Bautista

Hace 5 años

Le agregue imágenes y lo hice responsive

Fabián Andrés Pacherres Bautista

Hace 5 años

https://github.com/FabianXRL16/Angular-series

Alejandro Salazar

Hace 5 años

Genial!

Camilo Gonzalez

Hace 5 años

Me encanta que los ejemplos práticos se realicen con el mismo proyecto, creo que permite identificar mejor las diferencias entre cada herraienta sin perder tiempo en entender la logica de lo que se espera lograr <3

Jesus Ivan Villalobos de la Cruz

Hace 5 años

Le hice un cambio a los estilos:

Aquí esta el código:

div {
  text-align: center;
}

h2 {
  border-bottom: 1.5px solid #6a197d;
  padding-bottom: 10px;
  text-align: center;
}

form {
  background: #e0dede;
  border: 1px solid rgba(106, 25, 125, 0.2);
  border-radius: 10px;
  box-shadow: 5px 3px 5px 1px rgba(0, 0, 0, 0.2);
  margin: 0 50px 25px;
  padding: 10px 25px 25px;
  text-align: center;
  transform: scale(1);
  transition: 0.3s transform;
}

form:hover {
  transform: scale(1.2);
}

button {
  background: #6a197d;
  width: 45px;
  height: 25px;
  border: none;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  transition: border-color 0.15s;
}

button:hover {
  border-color: #ffa5b0;
}

button[disabled] {
  background-color: #f5f5f5;
  color: #6a197d;
  border: 1px solid #6a197d;
}

Luis Alejandro Vera Hernandez

Hace 5 años

Te quedo genial!

Griger Ratia

Hace 4 años

A[un no sé cómo poner una imagen diferente en cada componente, peo lo averiguaremos 🔥🚀

Va genial el curso

Víctor Isaac Arias García

Hace 5 años

Por ahora me parece sencillo utilizar CSS en Angular y con muchas ganas de completar las últimas 10 clases que me quedan de este curso que hasta el momento de los mejores que he llevado junto con el práctico de JavaScript

Stanley Melgar

Hace 5 años

Muy interesante ver como maneja muy bien todo lo que nos esta explicando~

Irving Juárez

Hace 5 años

Para que no se vea todo tan amontonado en su archivo de "codesandbox", pueden dar clic en el icono de documento que esta en la barra lateral izquierda para que se oculten todos los archivos del documento y tengan mas espacio en el editor de texto

Milton Fabián Ospina León

Hace 5 años

Super como JuanDC sigue en contacto con la comunidad del curso. muchas gracias

Ricardo Mazuera

Hace 5 años

Gracias profe por tan buenas enseñanzas. Siempre he aprendido bastante y ahora que estás uniendo estilos recuerdo cursos anteriores.

Juan Antonio García Sánchez

Hace 5 años

Muy buena explicación, me gustó el ejemplo 😁

Saori Tovar

Hace 2 años

El resultado de mi Proyecto con Angular:

Saori Tovar

Hace 2 años

El resultado de Mi Proyecto con Angular

Juan Mercado

Hace 4 años

En lo personal me gusta mucho como se trabaja con css normal... quiza es porque no me acostumbro a trabajar con preprocesadores y postprocesadores :(

Gabriel Quevedo

Hace 4 años

ÁNGULAR VALE CALLAMPA!!!!!!!!!!!!

Recursos

¿Cómo aplicar CSS a una aplicación Angular?

En el emocionante mundo del desarrollo web, estilizar adecuadamente tu aplicación es fundamental para crear una experiencia de usuario atractiva. Angular, uno de los frameworks más populares, ofrece una manera intuitiva de gestionar estilos CSS, tanto de manera global como en componentes individuales. Descubre en este artículo cómo aplicar CSS en Angular y mejora la apariencia visual de tus proyectos.

¿Qué son los estilos globales y cómo se aplican?

En Angular, el archivo styles.css se utiliza para definir estilos globales que afectan a toda la aplicación. Aquí puedes incluir:

Clases Generales: Define clases CSS que se aplicarán por defecto a todos los elementos.
Selectores Globales: Usa selectores como * para aplicar estilos de manera global.
Etiquetas como body y html: Estas etiquetas son fundamentales al definir estilos globales, como los fondos de color o la fuente.

A continuación, un ejemplo simple de un estilo global:

body {
  background-color: #ffcse;
  color: #522;
  font-family: sans-serif;
  margin: 0;
}

¿Cómo personalizar estilos para componentes específicos?

Para dar estilos únicos a un componente específico en Angular, como app.component, seguimos un proceso sencillo pero efectivo:

Accede al archivo de estilos del componente: Cada componente tiene un archivo .css asociado, por ejemplo, app.component.css.
Incorpora estilos adicionales en el TypeScript del componente: A veces es necesario añadir una línea en el archivo app.component.ts para asegurarte de que los estilos se importen correctamente:
```
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
```

Define estilos específicos para el componente: Personaliza los estilos directamente en el archivo app.component.css. Veamos cómo:

h2 {
  border-bottom: 1px solid #522;
  padding-bottom: 10px;
}

form {
  background-color: #ffcse;
  border: 1px solid #522;
  margin: 50px 0 25px 0;
  padding: 10px 25px 25px 25px;
  text-align: center;
  transform: scale(1);
  transition: transform 300ms;
}

form:hover {
  transform: scale(1.2);
}

button {
  background-color: rgba(105, 5, 0.5, 0.5);
  margin: 5px;
  border: 1px solid transparent;
  padding: 5px 10px;
  cursor: pointer;
  transition: border-color 150ms;
}

button:hover {
  border-color: #522;
}

button:disabled {
  opacity: 0.5;
}

¿Por qué es importante la organización de estilos en Angular?

Cuando trabajamos con Angular, la organización de estilos no solo mejora la apariencia, sino que también optimiza el rendimiento y la mantenibilidad del código. Unas prácticas recomendadas incluyen:

Separar estilos globales de los específicos de componentes: Esto evita conflictos de estilos y facilita el mantenimiento.
Uso de selectores adecuados: Facilita el control preciso del diseño de cada componente, asegurando que los estilos no afecten a elementos no deseados.
Mantener consistencia en la paleta de colores y fuentes: Ayuda a crear una experiencia de usuario coherente.

En el mundo siempre cambiante del desarrollo web, dominar CSS en Angular te dará una ventaja indiscutible. Explora más posibilidades con preprocesadores de CSS como Sass que exploraremos próximamente con Vue JS. ¡Sigue aprendiendo y mejorando tus habilidades!

div {
  text-align: center;
}

h2 {
  border-bottom: 1.5px solid #6a197d;
  padding-bottom: 10px;
  text-align: center;
}

form {
  background: #e0dede;
  border: 1px solid rgba(106, 25, 125, 0.2);
  border-radius: 10px;
  box-shadow: 5px 3px 5px 1px rgba(0, 0, 0, 0.2);
  margin: 0 50px 25px;
  padding: 10px 25px 25px;
  text-align: center;
  transform: scale(1);
  transition: 0.3s transform;
}

form:hover {
  transform: scale(1.2);
}

button {
  background: #6a197d;
  width: 45px;
  height: 25px;
  border: none;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  transition: border-color 0.15s;
}

button:hover {
  border-color: #ffa5b0;
}

button[disabled] {
  background-color: #f5f5f5;
  color: #6a197d;
  border: 1px solid #6a197d;
}

Resumen

¿Cómo aplicar CSS a una aplicación Angular?

¿Qué son los estilos globales y cómo se aplican?

En Angular, el archivo styles.css se utiliza para definir estilos globales que afectan a toda la aplicación. Aquí puedes incluir:

Clases Generales: Define clases CSS que se aplicarán por defecto a todos los elementos.
Selectores Globales: Usa selectores como * para aplicar estilos de manera global.
Etiquetas como body y html: Estas etiquetas son fundamentales al definir estilos globales, como los fondos de color o la fuente.

A continuación, un ejemplo simple de un estilo global:

body {
  background-color: #ffcse;
  color: #522;
  font-family: sans-serif;
  margin: 0;
}

¿Cómo personalizar estilos para componentes específicos?

Para dar estilos únicos a un componente específico en Angular, como app.component, seguimos un proceso sencillo pero efectivo:

Accede al archivo de estilos del componente: Cada componente tiene un archivo .css asociado, por ejemplo, app.component.css.
Incorpora estilos adicionales en el TypeScript del componente: A veces es necesario añadir una línea en el archivo app.component.ts para asegurarte de que los estilos se importen correctamente:
```
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
```

Define estilos específicos para el componente: Personaliza los estilos directamente en el archivo app.component.css. Veamos cómo:

h2 {
  border-bottom: 1px solid #522;
  padding-bottom: 10px;
}

form {
  background-color: #ffcse;
  border: 1px solid #522;
  margin: 50px 0 25px 0;
  padding: 10px 25px 25px 25px;
  text-align: center;
  transform: scale(1);
  transition: transform 300ms;
}

form:hover {
  transform: scale(1.2);
}

button {
  background-color: rgba(105, 5, 0.5, 0.5);
  margin: 5px;
  border: 1px solid transparent;
  padding: 5px 10px;
  cursor: pointer;
  transition: border-color 150ms;
}

button:hover {
  border-color: #522;
}

button:disabled {
  opacity: 0.5;
}

¿Por qué es importante la organización de estilos en Angular?

Separar estilos globales de los específicos de componentes: Esto evita conflictos de estilos y facilita el mantenimiento.
Uso de selectores adecuados: Facilita el control preciso del diseño de cada componente, asegurando que los estilos no afecten a elementos no deseados.
Mantener consistencia en la paleta de colores y fuentes: Ayuda a crear una experiencia de usuario coherente.

Fundamentos del Desarrollo Web Profesional

Frameworks y Librerías de JavaScript para Aplicaciones Web

Creación y Composición de Componentes en Desarrollo Web

Transformación de Páginas Web a Componentes Reutilizables

Reactividad y Estrategias de Renderizado en JavaScript

Diferencias entre Librerías y Frameworks en Desarrollo Web

Empaquetadores y herramientas esenciales para desarrollo frontend JS

Contexto y funcionamiento de los Frameworks JavaScript

Desarrollo de Aplicaciones con React.js: Componentes y Hooks

Ciclo de vida de componentes en ReactJS

Desarrollo de Aplicación RIA en Code Sandbox

Estado y Eventos en React para Aplicaciones Interactivas

Arquitectura y Funcionamiento de Angular: Componentes y Servicios

Demo de Aplicación Angular para Gestión de Películas

Vue.js: Características y Ventajas frente a Otros Frameworks

Creación de un Demo con Vue.js desde HTML Básico

Desarrollo de sitios web con Svelte: optimización y rendimiento

Creación de Aplicaciones con Svelte: Primeros Pasos Prácticos

Estilos con CSS, preprocesadores y CSS-in-JS

CSS en JS: Integración y Ventajas en Aplicaciones React

Estilos en Angular con CSS: Aplicación de Películas

Componentes en Vue.js y Preprocesadores CSS

Estilos avanzados con SASS en View Components

"Uso de Styled Components para Estilos Dinámicos en React"

Estilos Dinámicos con Theme Provider y Style Components

Variables CSS y Emotion en Svelte: Mejora tus Componentes

Cómo escalar sitios o aplicaciones web

Escalamiento de Aplicaciones Web: SPA, SSR y Generadores Estáticos

Desarrollo de Aplicaciones con Next.js: Rutas y Renderizado Dinámico

Organización de Proyectos en React: Contenedores y Presentacionales

Elección de Frameworks y Librerías JavaScript para Proyectos Web

Desarrollo Frontend: Próximos Pasos y Evaluación Final

Estilos en Angular con CSS: Aplicación de Películas

Progreso del curso

Fundamentos del Desarrollo Web Profesional

Contexto y funcionamiento de los Frameworks JavaScript

Estilos con CSS, preprocesadores y CSS-in-JS

Cómo escalar sitios o aplicaciones web

Recursos

Recursos