---
title: Introducing Inline Styles
localeTitle: Introducción a los estilos en línea
---
## Introducción a los estilos en línea
## Solución
Este puede ser un poco complicado porque JSX es muy similar a HTML pero **NO es el mismo** .
Repasemos los pasos para que puedas entender la diferencia. Primero establece tu etiqueta de estilo en un **objeto JavaScript** .
```react.js
class Colorful extends React.Component {
render() {
return (
Big Red
);
}
};
```
Ahora tienes tu etiqueta de estilo establecida en un objeto vacío. Observe cómo hay dos conjuntos de llaves. Esta es una diferencia importante entre JSX y HTML.
En segundo lugar, vamos a configurar el color en rojo.
```react.js
class Colorful extends React.Component {
render() {
return (
Big Red
);
}
};
```
Finalmente, vamos a establecer el tamaño de la fuente a 72px.
### Alerón
```react.js
class Colorful extends React.Component {
render() {
return (
Big Red
);
}
};
```
Observe cómo el atributo JSX es **camelCase** . Esta es otra diferencia importante para recordar acerca de JSX. Además, probablemente notó que no hay unidad. En JSX, al configurar el atributo fontSize, la **unidad es opcional** y se configurará automáticamente a px si no se configura manualmente.